ts专栏 ===> 🌈 typescript入门到拔高🌈(持续更新中…)

类型声明

• 类型声明是TS非常重要的一个特点
• 通过类型声明可以指定TS中变量（参数、形参）的类型
• 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
• 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
• 语法:

let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    ...
}
1
2
3
4
5
6
7

自动类型判断

• TS拥有自动的类型判断机制
• 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
• 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

类型

number

声明一个变量a，同时指定它的类型是number

let a : number;
1

a的类型设置为了number，在以后使用a的过程中a的值只能是数值

a = 33;
// a = 'hello'   此行代码会报错，因为变量a的类型是number，不能赋值字符串
1
2

string

let color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.I'll be ${age + 1} years old next month.`;
1
2
3
4
5
6

boolean

let isDone: boolean = false;
1

字面量

可以直接使用字面量进行类型声明

let c : 10
c= 10
console.log(typeof c)  //number
1
2
3

也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围，可以使用|连接多个类型(联合类型),这里的|是“或”的意思

let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
1
2

any

1. any表示任何类型，一个变量设置类型为any后相当于关闭了ts的类型检测
2. 不建议使用

let a : any;
let d: any = 4;
d = 'hello';
d = true;
1
2
3
4

声明变量如果不指定类型，则ts解析器会自动判断变量的类型为any(隐式any)

let e;
e = 'hello'
e = 123
1
2
3

unknown

unknown 表示未知类型的值

let f : unknown
f  = 10
f = "hello"
1
2
3

unknown 实际上就是一个类型安全的any
unknown类型的变量，不能直接赋值给其他变量,如图所示:

在这里我们定义一个string类型的变量，没有赋值，随后定义了f，我们直接将f赋值给s,直接会报错，这就是因为unknown类型的变量，不能直接赋值给其他变量
我们需要给f指定类型，这样的话才不会报错，实例代码如下：

if (typeof f === 'string') {
    s = f
}
1
2
3

但是在我们的实际书写代码的时候，编译器一旦遇到unknown类型的变量时便无法解析，我们一直if判断未免不会感到麻烦，这就引入了一个名词类型断言

类型断言

定义 ：用来告诉解析器变量的实际类型

语法: 变量 as 类型 或 <类型>变量

s = f as string
s = <string>f
1
2

void

在我们书写函数的时候都知道函数都可以去返回值的，在书写函数的时候：void用来表示空，以函数为例，就表示没有返回值的函数

function fn() : void {

}
//es6箭头函数
const fn1 = () :void =>{
    
}
1
2
3
4
5
6
7

never

never表示永远不会返回结果(undefined都不会返回),在我们学习js的时候都学过抛出异常这个函数,这个函数什么都不返回，就是提示报错。

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

在书写代码时，当我们需要报错的时候只要一调用这个函数，就会报错，这就体现了ts的严谨性！

小结

通过ts基本类型的上篇学习，就可以感受到ts书写代码的严谨性，ts在运用到大型项目中非常的实用，在维护的过程中非常的便利，通过学习基本类型就可以感觉到ts比js更加的细节！