TypeScript
TypeScript有什么用
- TypeScript出现的目的为了解决JavaScript中的一些缺点,
- 它是一个以JavaScript为基础构建的语言;
- 它是JS的一个超集,它扩展了JS,并添加了类型的概念,使JS从动态类型变为静态类型(例如给一个变量赋值为数值之后,它就只能存放数值类型的数据了)。
- 它可以在任何支持JavaScript的平台中执行。
注意:TS不能被JS解析器直接执行,它需要被编译为JS代码然后才能执行。
TypeScript增加了什么
- 类型
- 支持ES的新特性
- 添加ES不具备的新特性(抽象类、接口等等)
- 丰富的配置选项
- 强大的开发工具
TypeScript开发环境搭建
- 下载Node.js
- 安装Node.js
- 使用
npm
全局安装TypeScript- 安装命令:
npm install -g typescript
- 安装命令:
- 创建 TS 文件
- 使用
tsc
对ts文件进行编译- 使用命令行进入ts文件所在目录
- 执行命令:
tsc xxx.ts
类型
TypeScript中的数据类型
类型 | 语法 | 描述 |
---|---|---|
number | 变量:number | 任意数字 |
string | 变量:string | 任意字符串 |
boolean | 变量:boolean | 布尔值 |
字面量 | 变量:值 | 限制变量的值就是该字面量的值 |
any | 变量:any | 任意类型 |
unknown | 变量:unknown | 类型安全的any |
void | 变量:void | 返回值不能是 null 和 undefined 之外的任何值 |
never | 变量:never | 不能是任何值 |
object | 变量:object | 任意的JS对象 |
array | 变量:array | 任意的JS数组 |
tuple | 变量:tuple | 元组,TS新增类型,固定长度的数组 |
enum | 变量:enum | 枚举,TS新增类型,列举所有可能的取值 |
声明类型
类型声明是TypeScript非常重要的一个特点,它通过类型声明可以指定TS中变量(参数、形参)的类型。
指定类型后,当为变量赋值时,TypeScript编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
- 语法:
let 变量: 类型
let 变量: 类型 = 值
function fn(参数: 类型, 参数: 类型): 类型 {
···
}
由于是将TS代码编译为JS代码,所以根据JS动态类型的特点,即使为变量赋值报错时,编译仍然可以通过
给变量声明类型
在TS中给变量设置类型的方法是使用冒号:
后跟数据类型
先声明后使用
在变量声明阶段设置变量的类型,然后再对类型进行赋值。
let num: number;
num = 123;
num = 'str'; // 此时会报错
变量初始化的同时设置类型
在给变量进行初始化的同时为变量设置数据类型
let num: number = 123; // 此时num变量类型设置为 number,且值为 123
num = 789;
num = 'str'; // 由于将变量 num 的数据类型设置为 number,所以输入字符串类型的值会报错
字面量类型
当给变量设置为字面量类型时,就相当于是限制变量的值为设置的字面量的值
let gender: 'male' | 'female';
// 此时gender的值只能是 male 或者 female,除此之外的任何值都会报错
gender = 'male';
gender = 'female';
给函数及函数的形参设置类型
给函数设置类型就是相当于 给函数返回值设置类型
// 给形参设置类型
function fn(a: number, b: number) {
};
// 给函数设置类型
function fn(a, b):number {
}
// 两者结合
function fn(a: number, b: number): number {
}
给对象中的属性设置类型
由于JavaScript中所有的复杂类型都是对象,所以将变量的类型设置为对象并没有什么作用;主要是为了给对象中的属性设置类型
语法:let obj: object
或者 let obj: {}
。
单纯的给变量设置对象类型
let obj: object;
// 由于 函数 和 数组都是对象,所以下面的行为 不会报错
obj = function () {};
obj = [];
给对象的属性设置类型
let obj: {name: string};
obj = {name: 1234}; // 报错:name属性只能是 string 类型
上面的方法只适用于一个对象中只有几个特定的属性,当一个对象的属性数量没有限制时,可以通过给特定属性设置类型,其他属性使用方括号括起来作为可选属性
// obj对象中的 name 和 age 属性设置类型,其他的属性不做限制
let obj: {name: string, age: number, [propName: string]: any};
obj = {
name: '孙悟空',
age: 999999,
gender: 0,
type: 'monkey'
}
tuple
tuple类型是TS新增的类型,它是相当于一个可以设置固定长度的数组,当数组项无论是超过设置的长度还是少于设置的长度都会报错。
let j: [string,string]; // 定义只有两个 string 类型数组项的数组
j = ['hello'] // 报错:此时数组项少于设定的长度
j = ['hello', 'TypeScript', '123456'] // 报错:此时数组项超过设定的长度
// 正确写法
j = ['hello', 'TypeScript']
enum
enum 枚举类型,它将所有的可能的取值,列举出来,取值只能是被列举出来的值之一。
语法:enum 变量名 { 存放所有可能的值 }
// 设置一个 enum 类型的变量
enum Gender {
Male ,
Female
}
let obj: {name: string, gender: Gender};
obj = {
name: 'monkeysun',
// 使用 变量
gender: Gender.Male
}
any与unknown区别
any类型没有任何限制,该类型的变量可以是任意类型的值。在声明变量而不赋值的时候,如果不设置类型,就相当于隐式的设置了 any 类型 。
unknown类型表示未知类型,该类型的变量没有类型
它们的区别在于,any 类型的变量可以是任何类型,而 unknown 类型的变量在任何时候都没有类型
类型断言
它的作用就是在TS编译器无法判断一个变量的类型时,告诉 TS 编译器,这个变量的实际类型
语法:as 或者 <type>
let a: any;
let b: unknown;
let c: boolean;
c = a as boolean;
b = <string>c;
void与never的区别
void类型用来表示空,在函数中表示没有返回值的函数,除了返回 null 和 undefined 以外的任何值都会报错
never类型在函数中表示函数不能有返回值,即使返回 null 和 undefined 也会报错
// void
function fn(): void {
return undefined;
}
function fn3(): void {
return null;
}
// never
function fn2(): never {
}
类型的别名
对于一些比较复杂,重复性高的类型设置,可以通过给它们取别名的方法来避免重复写相同的类型设置,当要使用时,可以直接使用别名
语法:type 别名: 类型
// 使用别名前
let a: 1 | 2 | 3 | 4 | 5;
let b: 1 | 2 | 3 | 4 | 5;
a = 2;
b = 5;
使用别名
type myType: 1 | 2 | 3 | 4 | 5;
let a: myType;
let b: myType;
a = 2;
b = 5;
自动类型判断
TypeScript拥有自动类型判断的机制,当一个变量的声明和赋值同时进行时,TS编译器会将当前所赋的值的类型设置为该变量的类型。
let a = 123; // 变量 a 的类型被自动设置为 number
a = 'str'; // 此时会报错
let str = 'abcd'; // 此时变量 str 的类型为 string