TypeScript基础教程
一、TypeScript简介
1. 特性
- Typescript是以JavaScript为基础构建语言
- 一个JavaScript的超集
- 不能被JS解析器直接执行
- 扩展了JS,并添加了类型
TS、ES6、JS之间的关系:
TS在线编译器
2. 搭建环境
- 下载Node
下载地址:https://nodejs.org/en/download/
-
安装Node
-
使用npm全局安装typescript
npm i typescript -g
验证是否安装成功:tsc -v
-
创建一个ts文件
-
使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令:
tsc greeter.ts
执行完命令后,在同级目录下会出现一个编译后的文件greeter.js
。
- 运行js
node greeter.js
-
简化ts运行过程
使用
ts-node
,可以直接运行ts文件。首先需要全局安装npm i -g ts-node
。然后执行ts-node greeter.ts
。ts-node执行时,在内部将ts文件转化为js,然后在执行js代码;
3. 常见方法说明
3.1 keyof
keyof
与Object.keys
略有相似,只是 keyof
是取 对象类型 的键,而且 keyof
取到键后会保存为联合类型。
type Point = { x: number; y: number };
type P = keyof Point;
//type P = keyof Point 等效
type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish;
//type A = number 等效
type Mapish = { [k: string]: boolean };
type M = keyof Mapish;
//type M = string | number 等效
结合类使用:
type Person = {
name: string
age: number
add: string
}
class Student {
constructor(private info: Person) { }
getInfo<T extends keyof Person>(key: T): Person[T] {
return this.info[key];
}
}
let student = new Student({ name: "IT飞牛", age: 19, add: "上海" });
console.log(student.getInfo("name")); //打印:IT飞牛
结合泛型类使用:
class Student<K> {
constructor(private info: K) { }
getInfo<T extends keyof K>(key: T): K[T] {
return this.info[key];
}
}
let student = new Student({ name: "IT飞牛", age: 19 });
console.log(student.getInfo("name")); //打印:IT飞牛
3.2 in keyof
in
可以理解为 for ... in
,表示从 keyof T
中去遍历每一个类型,用上述的例子就是分别是 "a"
、"b"
和 "c"
类型。注意这里他们不是 string
类型,而是 literal string
类型,是某个具体的字符串类型。比如 "a"
类型的变量就只能是 "a"
值。
表示一个字符串字面量类型,常用于映射类型
type Props = { a: number; b: number; c: number };
// 映射类型:根据对象类型来创建
type Type3 = { [key in keyof Props]: number };
3.2 extends keyof
K extend keyof T
表示 K
是 T
的子类型,这里是一个类型约束声明。比如 type T = "a" | "b" | "c";
,那么 K
可以是 "a"
,也可以是 "a" | "c"
或者 "a" | "b" | "c"
等;
表示一个子联合类型,常用于定义一个子联合类型
class Student<K> {
constructor(private info: K) { }
getInfo<T extends keyof K>(key: T): K[T] {
return this.info[key];
}
}
二、TypeScript常用类型
TypeScript是JS的超集,TS提供了JS的所有功能,并且额外增加了类型系统;
- 所有js代码都是ts代码
- js有类型(比如:number、string、…),但是js不会检查变量的类型是否发生变化。而TS会检查。TypeScript类型系统的主要优势:可以显示标记出代码中的意外行为,从而降低了发生错误的可能性。
1.类型注解
let age:number=18;
代码中:number
就是类型注解。作用是为变量添加类型约束。约定了什么类型,就只能给变量赋值该类型的值,否则,就会报错。
2.常用基础类型概述
可以将TS中的常用基础类型细分为两类:JS已有类型和TS新增类型。
-
JS已有类型:
- 原始类型:string、number、boolean、null、undefined、symbol
- 对象类型:object(数组、对象、函数等对象)
-
TS新增类型
- 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、any等。
2.2 原始类型
原始类型:string、number、boolean、null、undefined、symbol
特点:简单。这些类型,完全按照js中类型的名称来书写。
let flag: boolean = true;
let myname: string = "IT飞牛";
let num: number = 100;
2.3 数组类型
数组类型的两种写法:
let numbers:number[]=[1,2,3];
let strings:Array<string>=["a","b","c"];
如果数组中既有number
类型,又有string
类型,这个数组的类型应该如何写?
let arr:(number|string)[]=[1,"a",3,"b"];
|(竖线)在TS中叫做联合类型(由两个或者多个其他类型组成的类型,表示可以是这些类型中的任意一种)。
2.4 类型别名
类型别名(自定义类型):为任意类型起别名。
使用场景:当同一类型(复杂)被多次使用时,可以通过类型别名,简化该类型的使用。
type CustomArray=(number|string)[];
let arr1:CustomArray=[1,"a",3,"b"];
let arr2:CustomArray=["x","y",6,7];
解释:
- 使用type关键字来创建类型别名
- 类型别名(比如,此处CustomArray),可以是任意合法的变量名称。
- 创建类型别名后,直接使用该类型别名作为变量的类型注解即可。
2.5 函数类型
函数的类型实际上指的是:函数参数和返回值的类型。
为函数指定类型的两种方式:
- 单独指定参数、返回值的类型
function add(num1: number, num2: number): number {
return num1 + num2;
}
const add = (num1: number, num2: number): number => {
return num1 + num2;
}
- 同时指定参数、返回值的类型
const add = (num1: number, num2: number) => number = (num1, num2) => {
return num1 + num2;
}
当函数作为表达式时,可以通过类似箭头函数形式的语法来为函数添加类型。这种形式只适用于函数表达式。
如果函数没有返回值,那么函数返回值类型为:void
。
function greet(name:string):void{
console.log("Hello",name);
}
使用函数实现某个功能时,参数可以传也可以不传,这种情况下,在给函数参数指定类型时,就用到可选参数了。比如,数组的slice
方法,可以slice()
也可以slice(1)
,还可以slice(1,3)
。
function mySlice(start?:number,end?:number):void{
console.log("起始索引:",start,"结束索引:",end);
}
可选参数:在可选和不可选的参数名称后面添加?(问号)
可选参数只能出现在参数列表的最后,也就是说可选参数后面不能再出现必选参数。
有剩余参数的函数:
function add(...nums: number[]) {
let sum = 0;
sum = nums.reduce((a, b) => {
return a + b;
})
console.log(sum);
}
add(1, 2, 3); //打印:6
2.6 对象类型
JS中的对象是由属性和方法构成的,而TS中对象的类型就是在描述对象的结构(有什么类型的属性和方法)。
对象类型的写法:
let person: { name: string; age: number; sayHi(): void } = {
name: 'IT飞牛',
age: 19,
sayHi() { }
}
- 直接使用
{}
来描述对象结构。属性采用属性名:类型
的形式;方法采用方法名():返回值类型
的形式。 - 如果方法有参数,就在方法名后面的小括号中指定参数类型(比如:
greet(name:string):void
)。 - 在一行代码中指定对象的多个属性类型时,使用
;
(分号)来分割。 - 如果一行代码只指定一个属性类型(通过换行来分割多个属性类型),可以去掉
;
(分号) - 方法的类型也可以使用箭头函数 形式(比如:
{sayHi:()=>void}
)
对象的属性或方法,也可以是可选的,此时就用到可选属性了。
比如:我们在使用axios({...})
时,如果发送GET请求,method属性就可以省略。
function myAxios(config:{url:string;method?:string}){
console.log(config);
}
可选属性的语法与函数的可选参数的语法一直,都是用?
(问号)来表示。
2.7 接口
当一个对象类型被多次使用时,一般会使用接口(interface)
来描述对象的类型,达到复用的目的。
- 使用
interface
关键字来声明接口 - 接口名称(比如:此处
IPerson
),可以是任意合法的变量名称 - 声明接口后,直接使用接口名称作为变量的类型。
- 因为每一行只要一个属性类型,因此,属性类型后没有
;
(分号)
interface IPerson{
name:string
age:number
sayHi():void
}
let person:IPerson={
name:"IT飞牛",
age:19,
sayHi(){}
};
interface和type的对比:
相同点:都可以给对象指定类型
不同点:
- 接口:只能为对象指定类型。
- 类型别名:不仅可以为对象指定类型,实际上可以为任意类型指定别名。
interface IPerson {
name: string
age: number
sayHi(): void
}
type IPerson{
name: string
age: number
sayHi(): void
}
type NumStr = number | string
如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用。
比如,这两个接口都有x、y
这两个属性,重复这些两次,会很复杂。
//改造前
interface Point2D { x: number, y: number }
interface Point3D { x: number, y: number, z: number }
//改造后
interface Point2D { x: number, y: number }
interface Point3D extends Point2D { z: number }
- 使用
extends
(继承)关键字实现了接口Point3D
继承Point2D
。 - 继承后,
Point3D
就有了Point2D
的所有属性和方法(此时,Point3D
同时有x、y、z
三个属性)。
2.8 元组
在地图中,使用经纬度坐标来标记位置信息。
可以使用数组来记录坐标,那么,改数组中只有两个元素,并且这两个元素都是数值类型。
let position:number[]=[39.3213,116.3123];
使用number[]
的缺点:不严谨,因为该类型的数组中可以出现任意多个数字。更好的方式:元祖(Tuple)
元祖类型是另一种类型的数组,它确切的知道包含多少个元素,以及特定索引对应的类型。
let position: [number, number] = [1.1, 2.3];
2.9 类型推论
在TS中,某些没有明确指出类型的地方,TS的类型推论机制会帮助提供类型。
换句话说:由于类型推论的存在,这些地方,类型注解可以省略不写!
发生类型推论的两种常见场景:
- 声明变量并初始化时
//鼠标移入age,TS自定推断出变量age为number类型
let age=18;
- 决定函数返回值时
//鼠标移入add,系统自动推断函数返回值是number类型
function add(num1:number,num2:number){
return num1+num2;
}
这两种情况下,类型注解可以省略不写!
推荐:能省略类型注解的地方就省略(偷懒,充分利用TS类型推论的能力,提升开发效率)
技巧:如果不知道类型,可以通过鼠标放在变量名称上,利用VSCode的提示查看类型。
2.10 类型断言
有时候你会比TS更加明确一个值的类型,此时,可以使用类型断言来指定更具体的类型。
<a href="https://blog.csdn.net/bobo789456123" id="link">IT飞牛</a>
//此时类型推断会识别alink的类型为:HTMLElement
const alink=document.getElementById("link")
此时类型推断会识别alink
的类型为HTMLElement
,该类型只包含所有标签公共的属性或方法,不包含a
标签特有的href
属性。
因此,这个类型太宽泛,无法操作href
等a
标签特有的属性或方法。
//这两个写法等效
const alink = document.getElementById("link") as HTMLAnchorElement
const alink=<HTMLAnchorElement>document.getElementById("link")
- 使用
as
关键字实现类型断言 - 关键字
as
后面的类型是一个更加具体的类型(HTMLAnchorElement
是HTMLElement
的子类型。)
2.11 字面量类型
思考一下代码,两个变量的类型分别是什么?
let str1="Hello feiniu";
const str2="Hello IT";
通过TS类型推论机制,可以得到的答案:
- 变量str1的类型为
string
- 变量str2的类型为
Hello IT
str2是一个常量,他的值不能变化只能是
Hello IT
,所以他的类型为Hello IT
。
注意:此处的Hello IT
,就是一个字面量变量。也就是说某个特定的字符串也可以作为TS中的类型。除字符串外,任意的JS字面量(比如:对象、数字等)都可以作为类型使用。
**常见使用场景:**用来表示一组明确的可选值的列表。经常配合联合类型一起使用。
function changeDirection(direction:"up"|"down"|"left"|"right"){
console.log(direction);
}
说明:参数
direction
的值只能是up/down/left/right
中的任意一个。优势:相比于
string
类型,使用字面量类型更加精准、严谨。
2.12 枚举
枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值。
枚举:定义一组命令常量。他描述一个值,该值可以是这些命名常量中的一个。
2.12.1 数字枚举
//使用联合类型+字面量类型
function changeDirection1(direction: Direction1) {
console.log(direction);
}
type Direction1 = "up" | "down" | "left" | "right";
changeDirection1("up");
// 使用枚举
function changeDirection2(direction: Direction2) {
console.log(direction);
}
enum Direction2 { Up, Down, Left, Right };
changeDirection2(Direction2.Up);
- 使用
enum
关键字定义枚举 - 约定枚举名称、枚举中的值以大小写字母开头
- 枚举中的多个值之间通过
,
(逗号)分割 - 定义好枚举后,直接使用枚举名称作为类型注解
Direction2
中没有指定每个枚举值,默认就是数字枚举。例如下面Direction2.Up
是作为实参传入,他的值为0。也就是说枚举成员是有值的,默认为从0爱是的自增数值。
我们也可以给枚举中的值初始化。
function changeDirection2(direction: Direction2) {
console.log(direction);
}
enum Direction2 { Up = 2, Down = 4, Left = 6, Right };
changeDirection2(Direction2.Up); //值为2
changeDirection2(Direction2.Right); //值为7
2.12.2 字符串枚举
枚举成员的值是字符串。
function changeDirection2(direction: Direction2) {
console.log(direction);
}
enum Direction2 { Up = "UP", Down = "DOWN", Left = "LEFT", Right="RIGHT" };
changeDirection2(Direction2.Up); //值为UP
changeDirection2(Direction2.Right); //值为RIGHT
字符串枚举没有自增行为,因此字符串枚举的每个成员必须有初始值。
枚举是TS为数不多的非JavaScript类型级扩展(不仅仅是类型)的特性之一。
因为,其他类型仅仅被当作类型,枚举不仅用作类型,还提供值(枚举成员都是有值的)
也就是说,其他类型会在编译为JS代码时自动移除。但是,枚举类型会被编译为JS代码!
//编译前
enum Direction2 { Up = "UP", Down = "DOWN", Left = "LEFT", Right="RIGHT" };
//编译后
var Direction2;
(function (Direction2) {
Direction2["Up"] = "UP";
Direction2["Down"] = "DOWN";
Direction2["Left"] = "LEFT";
Direction2["Right"] = "RIGHT";
})(Direction2 || (Direction2 = {}));
说明:枚举与前面讲到的字面量类型+联合类型组合的功能类似,都用来表示一组明确的可选值列表。
一般情况下,推荐使用字面量类型+联合类型组合的方式,因为相比枚举,这种方式更加直观、简洁、高效。
2.13 any类型
不推荐使用Any!
这会让TypeScript变为AnyScript
(失去TS类型保护的优势)。因为当值的类型为Any
是,可以对改制进行任意操作,并且不会有代码提示。
let obj: any = { x: 0 };
obj.bar = 100;
obj();
const s: number = obj;
其他隐式具有any
类型的情况:
- 声明变量不提供类型也不提供默认值
- 函数参数不加类型
2.14 typeof
总所周知,JS中提供了typeof
操作符,用来在JS中获取数据的类型。
console.log(typeof "Hello IT飞牛");//打印:string
TS也提供了typeof
操作符:可以在类型上下文中引用变量或属性的类型(类型查询)。
使用场景:根据已有变量的值,获取该值的类型,来简化类型书写。
let p = { x: 1, y: 2 };
function formatPoint1(point: { x: number, y: number }) { }
function formatPoint2(point: typeof p) { } //在类型注解上下文中使用typeof
// 以下两种写法等效
formatPoint1(p);
formatPoint2(p);
三、TypeScript高级类型
TS中的高级类型有很多,重点学习一下高级类型:
- class类
- 类型兼容性
- 交叉类型
- 泛型和keyof
- 索引签名类型和索引查询类型
- 映射类型
1. class类
TypeScript全面支持ES2015中引入的class
关键字,并为其添加了类型注解和其他语法(比如:可见性修饰符等)
class Person {
age: number
gender: string
constructor(age: number, gender: string) {
this.age = age;
this.gender = gender;
}
}
let person = new Person(19, "hello");
- 成员初始化,比如:
age:number
后,才可以通过this.age
来访问实例成员。 - 需要为构造函数指定类型注解,否则会隐式推断为
any
;构造函数不需要返回值类型。
class Point {
x: number
y: number
scale(n: number): void {
this.x *= n;
this.y *= n;
}
}
解释:方法类型注解(参数和返回值)与函数用法相同。
类继承的两种方法:
extends
继承父类(ES6中提供)implements
实现接口(TS中提供)
1.1 extends继承父类
class Animal {
move() {
console.log("move along");
}
}
class Dog extends Animal {
bark() {
console.log("汪");
}
}
const dog = new Dog();
dog.move();
dog.bark();
//打印:
// move along
// 汪
-
通过
extends
关键字实现继承 -
子类
Dog
继承父类Animal
,则Dog
的实例对象dog
就同时具有了父类Animal
和子类Dog
的所有属性和方法。
1.2 模拟多重继承
TypeScript不支持多重继承,也就是不支持
class A extends B,C{...}
这样的写法。
这么做是应为多重集成会潜在增加程序的复杂性。
例如B
、C
中都有move()
方法,那么A
的实例在调用move()
方法时就会出现歧义,不知道调用哪一个;
混合:
class B {
breath(): string {
return "i am breath";
}
}
class C {
fly(): string {
return "i am fly";
}
}
class A implements B, C {
breath: () => string;
fly: () => string;
}
//混合
function Mixins(targetClass: any, baseClass: any[]) {
baseClass.forEach(item => {
Object.getOwnPropertyNames(item.prototype).forEach(name => {
if (name != "constructor") {
targetClass.prototype[name] = item.prototype[name];
}
})
});
}
Mixins(A, [B, C]);
let a = new A();
console.log(a.breath());
console.log(a.fly());
// 执行时,需要关闭tsconfig.json中强制初始化校验,否则程序执行失败。
//compilerOptions.strictPropertyInitialization=false
// 打印如下:
// i am breath
// i am fly
1.3 implements实现接口
interface Animal {
move(): void
}
class Dog implements Animal {
move() {
console.log("move along");
}
bark() {
console.log("汪");
}
}
const dog = new Dog();
dog.move();
dog.bark();
//打印:
// move along
// 汪
通过
implements
关键字让class
实现接口
Person类
实现接口Singable
意味着,Person类
中必须提供Singable接口
中指定的所有方法和属性。
1.4 类成员可见性
类成员可见性:可以使用TS来控制class
的方法或属性对于class
外的代码是否可见。
可见性修饰符包括:
- public:共有的
- private:私有的
- protected:受保护的
1.4.1 public
表示共有的、公开的,共有成员可以被任何地方访问,默认可见性。
class Animal {
public move(){
console.log("move along");
}
}
- 在类属性或方法前面添加
public
关键字,来修饰该属性或方法是共有的 - 因为
public
是默认可见性,所以可以直接省略。
1.4.2 protected
表示受保护的,仅对其声明所在类和子类中(非实例对象)可见。
class Animal {
protected move(){
console.log("move along");
}
}
class Dog extends Animal {
bark() {
this.move();
console.log("汪");
}
}
const dog = new Dog();
dog.bark();
// dog.move(); 会报错
//打印:
// move along
// 汪
- 在类属性或方法前面添加
protected
关键字,来修饰改属性或方法是受保护的。 - 在子类的方法内部可以通过
this
来访问父类中受保护的成员,但是,对实例不可见。
1.4.3 private
表示私有的,旨在当前类中可见,对实例对象以及子类也是不可见的。
class Animal {
private move() {
console.log("move along");
}
protected go() {
this.move();
}
}
class Dog extends Animal {
bark() {
// this.move(); 会报错
this.go();
console.log("汪");
}
}
const dog = new Dog();
dog.bark();
// dog.move(); 会报错
- 在类属性或方法前面添加
private
关键字,来修饰该属性或方法是私有的。 - 私有的属性或方法只在当前类中可见,对子类和实例对象也都是不可见的!
1.4.4 readonly
除了可见性修饰符之外,还有一个常见修饰符就是:readonly
(只读修饰符)。
readonly:表示只读,用来防止在构造函数值外对属性进行赋值。
class Person {
readonly age: number = 18
constructor(age: number) {
this.age = age;
}
}
let person = new Person(19);
console.log(person.age);
// person.age = 20; 报错
// console.log(person.age);
- 使用
readonly
关键字修饰该属性是只读的,注意只能修饰属性不能修饰方法。 - 注意:属性
age
后面的类型注解(比如,此处的number
)如果不加,则age
的类型为18(字面量类型)。 - 接口或者
{}
表示的对象类型,也可以使用readonly
。
1.5 get和set的使用
class Company {
// 记住 你要使用的名字的话 前面必须要加上_
private _fullName: string;
//get 的用法
get fullName(): string{ // 函数后(): string 这个的意思是 要求函数返回的类型必须是 string
return this._fullName;
}
// set 的用法
set fullName(newName: string) {
console.log("这里可以写一些你想要的操作的方法");
this._fullName = newName;
}
}
// 执行class
const c = new Company();
c.fullName = "我是小白";
2. 类型兼容性
两种类型系统:
- Structural Type System(结构化类型系统)
- Norminal Type System(标明类型系统)
TS采用的是结构化类型系统,也叫做duck typing(鸭子类型),类型检查关注的是值所具有的形状。
2.1 类兼容性
也就是说,在结构类型系统中,如果两个对象具有相同的形状,则认为他们属于同一类型。下面定义变量p
为Point
类型,但是他的值却是Point2D
的实例,并且没有类型错误。
class Point {
x: number
y: number
}
class Point2D {
x: number
y: number
}
let p: Point = new Point2D();
因为TS是结构化类型系统,只检查
Point
和Point2D
的结构是否相同(相同,都具有x
和y
两个属性,属性类型也相同)。如果是在Norinal Type System中(比如,C#、Java等),他们是不同的类,类型无法兼容。
注意:在结构化类型系统中,如果两个对象具有相同的形状,则认为他们属于同一类型,这种说法并不准确。
更准备的说法:对于对象类型来说,y
的成员至少与x
相同,则x
兼容y
(成员多的可以赋值给少的)。
下面的赋值方式都是可以的:
class Point {
x: number
y: number
}
class Point2D {
x: number
y: number
}
class Point3D {
x: number
y: number
z: number
}
let point1: Point = new Point2D();
let point2: Point = new Point3D();
除了class
之外,TS中的其他类型也存在相互兼容的情况,包括接口兼容性、函数兼容性等。
2.2 接口兼容性
接口之间的兼容性,类似于class
,并且,class
和interface
之间也可以兼容。
interface Point {
x: number;
y: number;
}
interface Point2D {
x: number;
y: number;
}
let p1: Point = { x: 1, y: 2 };
let p2: Point2D = p1;
interface Point3D {
x: number;
y: number;
z: number;
}
let p3: Point3D = { x: 1, y: 2, z: 3 }
p2 = p3;
class Point3D {
x: number;
y: number;
z: number;
}
let p4: Point2D = new Point3D();
2.3 函数兼容性
函数之间兼容性比较复杂,需靠考虑参数个数、参数类型、返回值类型。
2.3.1 参数个数
type F1=(a:number)=>void
type F2=(a:number,b:number)=>void
let f1:F1
let f2:F2=f1;
const arr=["a","b","c"];
arr.forEach(()=>{})
arr.forEach((item)=>{})
- 参数少的可以赋值给参数多的,所以f1可以复制给f2
- 数组
forEach
方法的第一个参数是回调函数,该示例中类型为:(value:string,index:number,array:string[])=>void
- 在JS中省略用不到的函数参数实际上是很常见的,这样的使用方式,促成了TS中函数类型之间的兼容性。
- 并且因为回调函数是有类型的,所以TS会自动推导出参数
item/index/array
的类型
2.3.2 参数类型
相同位置的参数类型要相同(原始类型)或兼容(对象类型)。
type F1=(a:number)=>void
type F2=(a:number,b:number)=>void
let f1:F1
let f2:F2=f1;
函数类型F2
兼容函数类型F1
,因为F1
和F2
的第一个参数类型相同。
interface Point2D {
x: number
y: number
};
interface Point3D {
x: number
y: number
z: number
};
type F2 = (p: Point2D) => void
type F3 = (p: Point3D) => void
let f2: F2
let f3: F3 = f2
f2 = f3
- 此处与前面讲到的接口兼容性冲突
- 技巧:将对象拆开,把每个属性看作一个个参数,则参数少的
f2
可以赋值给参数多的f3
。
2.3.3 返回值类型
如果返回值是原始类型,此时两个类型要相同,比如F5
和F6
type F5=()=>string
type F6=()=>string
let f5:F5
let f6:F6=f5;
如果返回值类型是对象类型,此时成员多的可以赋值给成员少的,比如F7
和F8
type F7 = () => { name: string }
type F8 = () => { name: string, age: number }
let f7: F7
let f8: F8
f7 = f8;
3. 交叉类型
交叉类型功能类似于接口继承extends,用于组合多个类型为一个类型(常用于对象类型)。
interface Person{name:string}
interface Contact{phone:string}
type PersonDetail=Person & Contact
//type PersonDetail={name:string;phone:string}; 等同于上方
let obj:PersonDetail={
name:"IT飞牛",
phone:"13312332123"
};
使用交叉类型后,新的类型PersonDetail
就同时具备了Person
和Contact
的所有的属性类型。
交叉类型和接口继承的对比:
- 相同点:都可以实现对象类型的组合
- 不同点:两种方式实现类型组合时,对于同名属性之间,处理类型冲突的方式不同。
interface A {
fn: (val: number) => string
}
interface B extends A {
// fn: (val: string) => string 出现同名方法或属性会报错
}
interface C {
fn: (val: string) => string
}
type D = A & C; //交叉类型中,同名属性或者方法不会报错
4. 泛型
泛型是可以在保证类型安全前提下,让函数等于多种类型一起工作,从而实现复用,常用于:函数、接口、class中。
例如:
function id<Type>(value: Type): Type {
return value;
}
console.log(id<number>(100)); //打印:100
// console.log(id(100)); 等效
console.log(id<string>("Hello")); //打印:Hello
// console.log(id("Hello"));等效
- 语法:在函数名称的后面添加
<>
(尖括号),尖括号中添加类型变量,比如此处的Type
。 - 类型变量
Type
,是一种特殊类型的变量,他处理类型而不是值。 - 该类型变量相当于一个类型容器,能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)。
- 因为
Type
是类型,因此可以将其作为函数参数和返回值的类型,表示参数和返回值具有相同的类型。 - 类型变量
Type
,可以是任意合法的变量名称。
当编译器无法推断类型或者推断的类型不准确时,就需要显式的传入类型参数,不能省略
<>
。如:id<number>(100)
4.1 泛型约束
默认情况下,泛型函数的类型变量Type
可以代表多个类型,这导致无法访问任何属性。比如:id("a")
调用函数时获取参数的长度。
function id<Type>(value:Type):Type{
console.log(value.length);//报错,不能保证value上有length属性
return value;
}
这时需要使用泛型约束来收缩类型。
4.1.1 指定更加具体的类型
function id<Type>(value:Type[]):Type[]{
console.log(value.length);
return value;
}
指定传入是Type[]
数组,只要是数据就一定有length
属性值。
4.1.2 添加约束
- 创建描述约束的接口
ILenght
,该接口要求提供length
属性。 - 通过
extends
关键字使用该接口,为泛型(类型变量)添加约束。 - 该约束表示:传入的类型必须具有
length
属性。(比如数组就是带length
属性,可以被正常传入)
interface ILength { length: number }
function id<Type extends ILength>(value: Type): Type {
console.log(value.length);
return value;
}
泛型的类型变量可以有多个,并且类型变量之间还可以约束(比如,第二个类型变量受第一个类型变量约束)。
比如:创建一个函数来获取对象中属性的值:
function getProp<MyType, MyKey extends keyof MyType>(obj: MyType, key: MyKey) {
return obj[key];
}
let person = { name: "IT飞牛", age: 19 };
console.log(getProp(person, "name"));
- 添加了第二个类型变量
MyKey
,两个类型变量之间使用,
逗号分割。 keyof
关键字接受一个对象类型,生成其键名称(可能是字符串或数字)的联合类型。- 本实例中
keyof Type
实际上获取的是person
对象所有建的联合类型,也就是:'name'|'age'
。 - 类型变量
MyKey
受MyType
约束,可以理解为:MyKey
只能是MyType
所有键中的任意一个,或者说只能访问对象中存在的属性。
4.2 泛型接口
接口也可以配合反省来使用,以增加其灵活性,增强其复用性。
interface IdFunc<MyType> {
id: (value: MyType) => MyType
ids: () => MyType[]
}
let obj: IdFunc<number> = {
id(value) { return value; },
ids() { return [1, 3, 5]; }
}
备注:
- 在接口名称的后面添加
<类型变量>
,那么这个接口就变成了泛型接口。 - 接口的类型变量,对接口中所有其他成员可见,也就是接口中所有成员都可以使用类型变量。
- 使用泛型接口时,需要显示制定具体的类型(比如:此处是
IdFunc<number>
) - 此时,
id
方法的参数和返回值类型都是number
;ids
方法的返回值类型是number[]
;
实际上,Js中的数组在TS中就是一个泛型接口。当我们在使用数组的不同类型时,TS会根据数组的不同类型,来自动将类型变量设置为相应的类型。
4.3 泛型类
比如React的class组件
的基类Component
就是泛型类,不同的组件有不同的props
和state
。
4.4.1 创建泛型类
- 类似于泛型接口,在
class
名称后面添加<类型变量>
,这个类就变成了泛型类。 - 此处的
add
方法,采用的是箭头函数形式的类型书写方式。
class genericNumber<NumType>{
defaultValue: NumType
add: (x: NumType, y: NumType) => NumType
}
const myNum = new genericNumber<number>();
myNum.defaultValue = 10;
console.log(myNum.defaultValue);
上面代码直接执行
ts-node greeter.ts
时,会提示defaultValue
和add
没有初始化,这是因为tsconfig.json
中默认需要初始化compilerOptions.strictPropertyInitialization=true
。但是这样做并不推荐。
有三种方法可以规避:
-
使用非空断言,属性后加
!
:defaultValue!: NumType
-
使用联合类型。
defaultValue: NumType | null | undefined
-
使用可选属性,属性后加“
?
:defaultValue?: NumType
4.4 泛型工具类型
TS中内置了一些常用的工具类型,来简化TS中的一些常见操作。
说明:他们都是基于泛型实现的(泛型适用于多种类型,更加通用),并且是内置的,可以直接在代码中使用。
这些工具类型有很多,主要有以下几个:
Partial<Type>
:用来构造一个类型,将Type
的所有属性设置为可选
interface Person {
id: string
children: number[]
}
type PartialProps = Partial<Person>;
Readonly<Type>
:用来构造一个类型,将Type
的所有属性设置为只读
interface Person {
id: string
children: number[]
}
type PartialProps = Readonly<Person>;
Pick<Type,Keys>
:从Type
中选择一组属性来构造新类型。
//Pick工具类型有两个类型变量:1、表示选择谁的属性 2、表示选择哪几个属性
//第二个类型变量,如果只选择一个则只传入该属性名即可。且只能是第一个类型变量中存在的属性
//构造出来的新类型PickProps,只有id和title两个属性类型。
interface Props {
id: string
title: string
children: number[]
}
type PickProps = Pick<Props, "id" | "title">;
Record<Keys,Type>
:构造一个对象类型,属性键为keys
,属性类型为Type
。
//Record工具类型有两个类型变量:1、表示对象有哪些属性 2、表示对象属性的类型
//构建的新对象类型RecordObj表示:这个对象有三个属性分别为a/b/c,属性值的类型都是string[];
type RecordObj = Record<"a" | "b" | "c", string[]>;
let obj: RecordObj = { a: ["1"], b: ["2"], c: ["3"] };
5. 索引签名类型
在JS中数组是一类特殊的对象,特殊在数组的键(索引)是数值类型。
并且,数组也可以出现任意多个元素。所以,在数组对应的泛型接口中,也用到了索引签名类型。
interface MyArray<T> {
[n: number]: T
}
let arr: MyArray<number> = [1, 3, 5];
备注:
MyArray
接口模拟原生的数组接口,并使用[n:number]
来作为索引签名类型。- 该索引签名类型表示:只要是
number
类型的键(索引)都可以出现在数组中,或者说数组中可以有任意多个元素。 - 同时也符合数组索引是
number
类型这一前提。 T
是泛型。
6. 映射类型
映射类型:基于旧类型创建新类型(对象类型),减少重复开发、提升开发效率。
比如:类型PropKeys
有x/y/z
,另一个类型Type1
中也有x/y/z,并且Type1
中x/y/z
的类型相同。
type PropKeys = "x" | "y" | "z";
// 传统写法
type Type1 = { x: number, y: number, z: number };
// 映射类型
type Type2 = { [key in PropKeys]: number };
- 映射类型是基于索引签名类型的,所以该语法类似于索引签名类型,也使用了
[]
Key in PropKeys
表示Key
可以使PropKey
s联合类型中的任意一个,类似于forin(lei k in obj)
- 使用映射类型创建的新对象类型
Type2
和Type1
结构完全相同 - 注意:映射类型只能在类型别名中使用,不能在接口中使用
type Props = { a: number; b: number; c: number };
// 映射类型:根据对象类型来创建
type Type3 = { [key in keyof Props]: number };
备注:
- 首先,先执行
keys Props
获取到对象类型Props
中所有键的联合类型:“a”|"b"|"c"
- 然后,
Key in ...
就表示Key
可以是Props
中所有的键名称中的任意一个。
实际上,前面讲到的泛型工具类型(比如:
Partial<Type>
)都是基于映射类型实现的
比如,Partial<Type>
的实现:
type Partial<T> = {
[P in keyof T]: T[P]
}
type Props = { a: number; b: number; c: boolean }
type PartialProps = Partial<Props>
四、类型声明文件
类型声明文件用来为已存在的JS库提供类型信息。这样在TS项目中使用这些库时,就想用TS一样,都会有代码提示、类型保护等机制。
1. TS中的两种文件类型
1.1 .ts
文件
- 既包含类型信息又可执行代码
- 可以被编译为.js文件,然后执行代码
1.2 .d.ts
文件
- 只包含类型信息的类型声明文件
- 不会生成.js文件,仅用于提供类型信息
.ts
是代码实现文件;.d.ts
是类型声明文件;如果要为JS库提供类型信息,要使用
.d.ts
文件。
2. 类型声明文件的使用说明
2.1 使用已有的类型声明文件
2.1.1 内置类型声明文件
TS为JS运行时可用的所有标准化内置API都提供了声明文件。
比如,在使用数组时,数组所有方法都会有相应的代码提示以及类型信息:
实际上这都是TS提供的内置类型声明文件。可以通过Ctrl+鼠标左键来查看内置类型文件内容。
2.1.2 第三方库的类型声明文件
几乎所有常用的第三方库都有相应的类型声明文件。有两种形式:
- 库自带类型声明文件,如
axios
- 由
DefinitelyTyped
提供
DefinitelyTyped
是一个github仓库,用来提供高质量的TypeScript类型声明。
可以通过npm/yarn
来下载该仓库提供的TS类型声明包,这些包的名称格式为:@types/*。比如:@types/react
、@types/lodash
等,当安装@types/*
类型声明包后,TS也会自动加载该类型生命包,以提供改库的类型声明。
在实际项目开发时,如果你使用的第三方库没有自带的声明文件,VSCode会给出明确的提示。
TypeScript官网提供了@types/*
库的查询地址:Type Search
2.2 创建自己的类型声明文件
2.2.1 项目内共享类型
如果多个.ts
文件中都用到同一个类型,此时可以创建.d.ts
文件提供类型,实现类型共享。
操作步骤:
- 创建
index.d.ts
类型声明文件 - 创建需要共享的类型,并使用export导出(TS中的类型也可以使用import/export实现模块化功能)
- 在需要使用共享类型的
.ts
文件中,通过import
导入即可(.d.ts
后缀导入时,直接省略).
2.2.2 为已有JS文件提供类型声明
- 在将JS项目迁移到TS项目时,为了让已有的
.js
文件有类型声明。 - 成为库作者,创建库给其他人使用。
TS项目中也可以使用.js
文件。在导入.js
文件时,TS会自动加载与.js
同名的.d.ts
文件,已提供类型声明。
declare
关键字:用于类型声明,为其他地方(比如:.js
文件)已存在的变量声明类型,而不是创建一个新的变量。
- 对于
type
、interface
等这些明确就是TS类型的,可以省略declare
关键字。 - 对于
let
、function
等具有双重含义(js、ts均可),应该使用declare
关键字,明确指定此处用于类型声明。