TypeScript简介
- TypeScript是JavaScript的超集。
- 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
- TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
- TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。
- 相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。
类型注解
代码示例
let name:string = '张三'
注:代码中 :number
就是类型注解。类型注解约束了只能给该变量赋值该类型的值
常用类型
类型 | 描述 |
---|---|
number | 任意数字 |
string | 任意字符串 |
boolean | 布尔值true或false |
字面量 | 限制变量的值就是该字面量的值 |
any | 任意类型 |
unknown | 类型安全的any |
void | 没有值(或undefined) |
never | 不能是任何值 |
object | 任意的JS对象 |
array | 任意JS数组 |
tuple | 元素,TS新增类型,固定长度数组 |
enum | 枚举,TS中新增类型 |
原始类型
number/string/boolean/null/undefined/symbol
特点:可完全按照 JavaScript 中的名称来书写
let age: number = 18;
let username: string = '张三';
let isMerry: boolean = false;
let unique: Symbol = Symbol('shuiruohanyu');
字面量声明
let a: 10;
a = 10;
可以使用 | 来连接多个类型(联合类型)
let b: "male" | "female";
b = "male";
b = "female";
let c: boolean | string;
c = true;
c = 'hello';
any
any 表示的是任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时,不建议使用any类型
// let d: any;
声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any (隐式的any)
let d;
d = 10;
d = 'hello';
d = true;
注意:
开发中要尽量少用any,当值的类型为any时,可以对该值进行任意操作,并且不会有代码提示
unknown
表示未知类型的值
let e: unknown;
e = 10;
e = "hello";
e = true;
let s:string;
// d的类型是any,它可以赋值给任意变量
// s = d;
e = 'hello';
// unknown 实际上就是一个类型安全的any
// unknown类型的变量,不能直接赋值给其他变量
if(typeof e === "string"){
s = e;
}
类型断言
可以用来告诉解析器变量的实际类型
语法:变量 as 类型
或 <类型>变量
s = e as string;
s = <string>e; //不常用,了解即可
void
用来表示空,以函数为例,就表示没有返回值的函数
function fn(): void{
}
never
表示永远不会返回结果
function fn2(): never{
throw new Error('报错了!');
}
类型别名
当一个复杂类型或者联合类型过多或者被频繁使用时,可以通过类型别名来简化该类型的使用
用法:type
名称 = 具体类型
type StrArray = Array<number | string>;
let arr: StrArray = [1, 2, '3'];
以上代码中,type
作为创建自定义类型的关键字
- 类型别名可以使任意合法的变量名称
- 推荐大驼峰的命名写法