一、简介
什么是 TypeScript
添加了类型系统的 JavaScript,适用于任何规模的项目。
TypeScript 的特性。
静态类型:在编译阶段就能确定每个变量的类型【JavaScript:动态类型,运行时确定变量的类型】
弱类型:允许隐式类型转换【完全兼容JavaScript】
二、基础
1. 原始数据类型 + 任意值 + 类型推论
布尔值、数值、字符串、null、undefined、Symbol【ES6】
any: 任意值,允许赋值为任意类型
1) 声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值;
2) 变量声明未指定类型时,会被识别为任意值类型
类型推论:如果没有明确的指定类型,ts会依照类型推论(Type Inference)的规则推断出一个类型;
2. 联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
3. 接口:用来定义对象
- 赋值的时候,变量的形状必须和接口的形状保持一致,多少一些属性都不行;
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'tom',
age: 25
}
- 可选属性(?:) :该属性可以不存在
interface Person {
name: string;
age: number;
gender?: string;
}
let tom: Person = {
name: 'tom',
age: 25
}
- 任意属性
interface Person {
name: string;
age: number;
[propName: string]: any; // 定义了任意属性取 string 类型的值
}
let tom: Person = {
name: 'tom',
age: 25,
gender: 'male'
}
一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集:
一个接口中只能定义一个任意属性。如果接口中有多个类型的属性,则可以在任意属性中使用联合类型:
4. 数组的类型
1.常用定义方法
【类型 + 方括号】let arr: number[] = [1,2,3,4];
2.【数组泛型】let arr: Array = [1,2,3,4];
5.函数的类型
- 函数声明:
// 输入多余的(或者少于要求的)参数,是不被允许的
function sum(x:number,y:number): number{
return x+y;
}
- 函数可选参数
// 可选参数后面不允许再出现必需参数了
function buildName(firstName: string, lastName?: string) {
if (lastName) {
return firstName + ' ' + lastName;
} else {
return firstName;
}
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');
6.类型断言.
手动指定一个值的类型【语法:值 as 类型】,只会影响 TypeScript 编译时的类型。
1) 联合类型可以被断言为其中一个类型;
2) 父类可以被断言为子类;
3) 任何类型都可以被断言为 any;
理想情况下,TypeScript 的类型系统运转良好,每个值的类型都具体而精确。
(Window as any).nub = 1; // 在any类型的变量上,访问任务属性都是可以的。
4) any 可以被断言为任何类型;
通过类型断言及时的把 any 断言为精确的类型,亡羊补牢,使我们的代码向着高可维护性的目标发展
5) 类型断言的限制
要使得 A 能够被断言为 B,只需要 A 兼容 B 或 B 兼容 A 即可;
6) !【感叹号】:非null、非undefined的类型断言;
备注:
1. 使用类型断言时一定要格外小心,尽量避免断言后调用方法或引用深层属性,以减少不必要的运行时错误
2. 类型断言不是类型转换,它不会真的影响到变量的类型