类型声明
- 类型声明是TS非常重要的一个特点
- 通过类型声明可以指定TS中变量(参数、形参)的类型
- 指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
- 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
- 语法:
let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... }
自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明
类型
number
声明一个变量a,同时指定它的类型是number
let a : number;
a的类型设置为了number,在以后使用a的过程中a的值只能是数值
a = 33; // a = 'hello' 此行代码会报错,因为变量a的类型是number,不能赋值字符串
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.`;
boolean
let isDone: boolean = false;
字面量
可以直接使用字面量进行类型声明
let c : 10 c= 10 console.log(typeof c) //number
也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围,可以使用|连接多个类型(联合类型),这里的|是“或”的意思
let color: 'red' | 'blue' | 'black'; let num: 1 | 2 | 3 | 4 | 5;
any
any表示任何类型,一个变量设置类型为any后相当于关闭了ts的类型检测
不建议使用
let a : any; let d: any = 4; d = 'hello'; d = true;
声明变量如果不指定类型,则ts解析器会自动判断变量的类型为any(隐式any)
let e; e = 'hello' e = 123
unknown
unknown 表示未知类型的值
let f : unknown f = 10 f = "hello"
unknown 实际上就是一个类型安全的any
unknown类型的变量,不能直接赋值给其他变量,如图所示:
在这里我们定义一个string类型的变量,没有赋值,随后定义了f,我们直接将f赋值给s,直接会报错,这就是因为unknown类型的变量,不能直接赋值给其他变量
我们需要给f指定类型,这样的话才不会报错,实例代码如下:
if (typeof f === 'string') { s = f }
但是在我们的实际书写代码的时候,编译器一旦遇到unknown类型的变量时便无法解析,我们一直if判断未免不会感到麻烦,这就引入了一个名词类型断言
类型断言
定义 :用来告诉解析器变量的实际类型
语法: 变量 as 类型 或 <类型>变量
s = f as string s = <string>f
void
在我们书写函数的时候都知道函数都可以去返回值的,在书写函数的时候:void用来表示空,以函数为例,就表示没有返回值的函数
function fn() : void { } //es6箭头函数 const fn1 = () :void =>{ }
never
never表示永远不会返回结果(undefined都不会返回),在我们学习js的时候都学过抛出异常这个函数,这个函数什么都不返回,就是提示报错。
function fn2() : never { throw new Error('报错了') }
在书写代码时,当我们需要报错的时候只要一调用这个函数,就会报错,这就体现了ts的严谨性!
小结
通过ts基本类型的上篇学习,就可以感受到ts书写代码的严谨性,ts在运用到大型项目中非常的实用,在维护的过程中非常的便利,通过学习基本类型就可以感觉到ts比js更加的细节!