TypeScript不学？你养我啊[1]

了解TypeScript

TypeScript,Type(类型)，也就是说它与JavaScript相比更加注重类型，Script则说明TypeScript是在JavaScript基础上实现的。

因为JavaScript是动态分配数据类型的，比如： let a = 123，那么此时a就被分配成了数值(Number)类型。所以在声明时不需要分配类型，而TypeScript则注重这一点。

image.png

如上图，可以说Ts是Js的超集。

定义类型的好处

如下，我想求和a和b，但是又错误的给a赋值了'sk'，那么c的值就成了拼接字符串的结果。其实这时候要是定义变量的时候约束了类型，在给变量a赋值 'sk'时，就会报错。

 let a = 123;
 let b = 456;
 a = 'sk'         // 数值类型被赋值成了字符串类型 但是在js中是不会报错的。 
 let c = a + b    //  'sk456'

不能被JS解析器直接执行

Ts需要编译成Js再执行。

TypeScript增加了什么

• 类型
• 支持Es的新特性
• 添加Es不具备的新特性
• 丰富的配置选项

创建一个项目

首先，需要Node.js，这里我们就略过了。

全局安装typescript

npm i -g typescript

执行 tsc命令，出现如下结果说明安装成功。

image.png

新建文件

层级如下，文件的后缀名为.ts

image.png

随便加点代码

console.log('Hello Ts')

运行

此时浏览器中，是不认识ts文件的。如果想要运行，就需要tsc 命令先编译一下。

tsc helloTs.ts

如图，编译后又生成了对应的js文件。

image.png

类型声明

number

声明一个数值类型的变量a，:number 一个冒号加上number，就说明现在变量a的类型是number类型。

let a:number;

当我们给a赋值字符串时，就会提示错误。

image.png

并且我们再执行编译的时候，也会报错。但是即使报错也会将ts成功编译成相应的js文件。

image.png

string

声明一个字符串类型

let str:string;
str= 'abc'

boolean

声明一个布尔值类型，并且声明完变量直接赋值。

let c:boolean = false

如果我们在声明完直接赋值，并且没有定义类型。如下，此时给bool赋值为true，然后又赋值为123。此时也会报错的。因为Ts会自动判断类型。

let bool = true;
bool = 123

函数

在js中函数是不考虑参数的类型和个数的。

function sum(a+b){
    return a+b
}

函数参数类型声明

我们给参数类型声明为数值，如果我们传参时赋值了字符串，就会报错。

function sum(a:number,b:number){
    return a+b
}

sum(123,'456')

image.png

并且，如果参数个数传多了或者少了也是会提示的

image.png

函数返回值类型声明

在括号外添加 :对应的类型，如下是添加为数值类型。

function sum(a:number,b:number): number{
    return a+b
}

这里我加上返回值类型约束之后报错了

image.png

这个时候，执行 tsc --init，会生成一个tsconfig.json文件，此时就不会报错了。

image.png

如果将返回值类型赋值为字符串那么就会报错。

image.png

字面量

像是常量

如下，冒号后直接跟值这种情况就是字面量。此时a只能被赋值为10，此时像是const常量了。

let a:10
a = 12

我们给a赋值12就会报错如下错误

image.png

联合类型

使用或者符号()此时，sex赋值必须是字符串"male" 或者 "female"

let sex : "male" | "female"

除了，限制固定值，当然也可以联合两个类型，如下，c可以是boolean或 number

let c : boolean | number

any

表示任意类型，关闭了一切Ts检测。不建议使用。这种情况是 显示的any

let no_use : any

而在定义变量时，不赋值，就是 隐式any 。Ts检测到没有指定类型，然后给添加类型为any。

let d;

image.png

！！！！！

📢 不建议使用。

unknown

我们有些时候，并不确定数据的类型。当然可以使用any，最好是使用unknown。

let e:unknown
e = 12 
e ='sss'

any和unknown的区别

如下，any类型的值可以赋值给字符串。any可以霍霍别人儿

let no_use:any
let str:string
str = no_use

而 把unknown赋值给别的类型 就会报错。

let str:string
let e:unknown
e ='sss'
str = e

image.png

unknown类型实际上是一个类型安全的any，unknown类型的变量不能赋值给其他变量

unknown类型赋值给string变量

1.类型判断

做一个类型判断之后。我们就可以赋值了。如下判断如果类型是string就能把e赋值给字符串类型str

if(typeof e === 'string'){
    str = e
}

2.类型断言

编译器并不知道e是字符串，但是此时我们知道它是字符串。所以，此时我们使用 as 关键字后接数据类型。

str = e as string

除了这种断言,还有另一种<数据类型>

str = <string>e;

void

void在函数的返回值使用

如下，函数的返回值是boolean类型。那么没有返回值的函数怎么写呢

function fn():boolean{
    return true
}

当然你什么不写也不会错

function fn(){

}

因为什么都不写的时候，Ts自动检测为void

image.png

当返回值是boolean的时候，他也会自动检测出是boolean。

image.png

但是对于空返回值得函数，最好还是写上void。(当我们代码规范添加校验之后，有些时候不定义函数的返回值类型的，是会报错的)

function fn():void{

}

那么undefined、null的返回值用什么？

• 既然在这里提了这个问题，那肯定是用void。
• 📢 在vsCode编辑器中null返回值不能使用void类型，对于null类型的可以如下面的下面的写法。
• 而在webstorm中就是可以的。

function fn():void{
    return undefined
}

function fn():null{
    return null
}

对了，我们上面提到的联合类型。也可以在函数返回值使用。如下：返回值类型是字符串或者数值。

function fn():string|number{
        return 12
}

never

也是用于函数的返回值，表示永远不会返回结果(连undefined、null都不返回)。那它有什么用呢？

用于报错处理 如下 throw抛出异常。

function fn2():never{
    throw new Error('报错了')
}