[前端基础]typescript安装以及类型拓展

（0）写在前面：

作者之前都是在写js，所以这里介绍ts肯定是不能从头开始介绍了，主要在js的基础上介绍ts关于类型的几个特性，以及ts的安装还有配置问题

（1）ts和js是什么关系

通俗点来讲，ts是js的扩展，或者说js可以理解为ts的一部分。在实际应用上来说，ts是对js在编写层面上作出的一种规范。甚至运行的时候，都要通过ts编辑器将ts代码文件转化为js代码才能顺利执行。

（2）ts的安装，启动以及环境配置

ts的安装可以直接使用指令

npm install -g typescript

下载完成后，通过tsc指令编译你的ts文件

tsc ‘目标文件名称’

会生成同名的js文件，这个时候再使用node去执行js

node ‘同名的js文件’

这个其实就是底层的原理，因为node环境还有浏览器环境之恩那个识别js，所以我们要先把ts转化为js。第一眼看可能是多次一举，但是在编写ts的时候，无论是ide也好，ts编译器也好，都会对我们的一些错误进行修正，让生成的js代码更加和谐。

不过如果想要跳过这个中间产物，可以直接使用工具ts-node，可以直接去编译ts并且执行，不需要我们手动去执行一些东西了

npm install -g ts-node

接下来就可以通过这个第三方工具直接执行ts文件了

ts-node ‘ts文件’

一个可能需要注意一点的问题就是，有些时候安装完了这两个工具可能是会识别不出tsc和ts-node这两个东西是什么，原因在于window下我们一般要手动配置环境变量。

其实-g这个参数的意思就是全局安装，但是在window下，会有很多其奇怪挂的情况，所以这个全局安装多半会失败。

这个的解决方法就是，你需要从node-module模块中寻找到可能会需要到的应用程序，然后单独提取出来，再把环境变量指向这个东西。（具体可以询问身边的老手或者ai工具，这个东西应该是每个node程序员都要会的）

当然如果你是linux系统就不会有这个顾虑，因为linux处理这类安装的时候，一般是自动帮你集成好了环境变量。

（3）一些关于类型,以及声明形式

其实类型很多,详见类型声明的部分,但是主要还是注意一下: any这个类型

any其实就是所谓的万能类型,举个例子,这里的a可以传入任何一个类型

function ddd(a:any){
     ..................
}

剩下的详见代码注释

//首先要说一句 ts是js的超类,所以js的代码全部是ts代码的一部分
console.log('ddd')
 
 
//首先声明变量key可以加上类型，ts会做相关的检查
let a:string='dddd'
 
 
//对于对象，也可以使用接口的方式进行检查
interface User {
    name:string;
    age:number;
}
const user:User={name:'',age:0}
 
 
//方法也可以使用这种方式，对传入参数进行检查
//并且控制返回值的类型
//如图所示，返回一个字符串
function deleteUser(user: User)：string {
    // ...
}
 
//定义组合类型：
type myType=1|2|3|4
// const b:myType=0这样子就会报错
// 有点类似枚举的感觉
//应用：
function testType(obj:string|string []){
    //这参数可以接收字符串或者字符串数组，内部可以使用typeof等等方法做尝试
}
 
//泛型,用法和其他语言差不多，用来指明本语言中缺失的部分
class Student<type>{
    name:type;
    constructor(name:type){
        this.name=name
    }
}
 
//结构类型系统，一个ts中很有意思的点，如果有相同的属性部分，那么在使用的时候就会被视为是同一种类型
function testT(point:{x:string,y:number}){
    //...里面是一些属性
}
//这时候可以传入
testT({x:'',y:1})
//也可以，以这样的方式传入，子集xy的部分会被视为point同类型的东西
const x={x:'',y:1,z:12}
testT(x)
//自由度是真的高啊。。。。

 3.1.number,string,boolean

这三种类型构成了ts中的基本类型,声明形式即为简单的:

const a:number; 

 3.2.Object

对于object来说,需要对内部的key进行一一的类型声明

const o:{
   key:string
} = {
   key:"this is a string"
}

 3.3.Array

Array和js不太一样,js中允许我们在数组中插入不同的类型,比如[1,"12",true]

但是在ts中,涉及到类型的声明,不允许我们这样做,因为我们需要指明数组内部的元素是什么

const arr:string[];

 3.4.Tuple

Tuple并不是js中的东西,而是ts添加到js上的,本质上是一个"长度固定,而且任何位置的变量数值都声明的数组"

const arr:[string,number];

 如图所示的情况应该是比较明显的一种了

（4）关于类型别名和接口

对于一些自定义类型，我们可以其别名

例如我们设置一个枚举类型，0-7

type num=0|1|2|3|4|5|6|7

这样num这个类型的对象，或者说变量，取值只能是0-7的其中一个数字

上面利用对象也是一样的

当然对于对象还有别的可用方式：接口

interface User {
    name:string;
    age:number;
}
const user:User={name:'',age:0}

这种方式就允许我们自定义一些特殊的类，此外接口和别名也有些不一样的地方，比如说接口允许我们通过继承来叠加东西

（不过js和ts本身也不是面向对象的语言。。。所以就这样）

（5）关于字面类型

字面类型有种语法糖的感觉，或者可以说是匿名类？

const name：'head'='head'

像是这段代码所展示的内容一样，name这变量的类型被固定在’head‘这个字符串上了

。。。感觉好像有点鸡肋，但是这种用法主要是用来搭配其他的东西

const num：'1'|'2'|'3'='3'

这样是不是就好理解一点

（6）关于断言

ts中的断言和其他语言中的assert不一样，ts的断言主要是一种声明，告知tsc不需在做一些检查了。或者至少在编译的层次上指明一件事情: 这个东西就是xx类型

虽然这样的操作有时候会发生一些逻辑上的错误，造成一点问题。但是个别时候代码逻辑需要我们告诉编译器某种情况。

ts中的断言分为两种：as，！

as：类型断言（Type Assertion）：使用 as 关键字或尖括号（<>）语法，将一个值断言为特定的类型。这可以用于告诉编译器在某个上下文中使用特定类型，即使它的类型推断可能是其他类型。

const a='dududu' as string
const a=<string>'dududu'

!:非空断言（Non-null Assertion）：使用感叹号 !，表示告知编译器一个变量不会为 null 或 undefined。这可以用于避免空值检查，并在访问变量的属性或方法时省略空值检查。

const a=bunn!.name

断言其实就是一种提前声明：告诉编译器“我已经确定这是什么类型了，不用检查了”

(7)对于函数

其实对于函数来说,ts相比于js多了一些检查内容

主要是参数问题,我们在js中传参数主打一个随性,想串什么就串什么, js方法内部都会默默接受,甚至你可以什么都不写,跳过某个参数.

无论或多或少 , js本身永远会用undefined惯着你......

但是ts不会,ts的检测方式就是该传多少参数就是多少参数,容不得你胡来,甚至是传入参数类型,返回值类型都可以进行限制1

function buildName(firstName: string, lastName?: string):any {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

两个参数的类型都限制为string,返回值限制为any

其中第二个参数是一个可选参数,使用?:作为标志