一、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()方法时就会出现歧义，不知道调用哪一个；

ts中实现多重集成可以采用下面两种方式:

混合
继承类+实现接口

混合：

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

继承类+实现接口

class Person1 {
    
    
    age: number
    gender: string

    constructor(age: number, gender: string) {
    
    
        this.age = age;
        this.gender = gender;
    }
}

interface Person2 {
    
    
    high: number;
    address: string;
}

class Person extends Person1 implements Person2 {
    
    
    high: number;
    address: string;

    constructor(age, gender, high, address) {
    
    
        super(age, gender);
        this.high = high;
        this.address = address;
    }
}

let person = new Person(29, "hello", 165, "上海市");
console.log(person)
//打印: Person { age: 29, gender: 'hello', high: 165, address: '上海市' }

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"] };

//下面指定一个键类型是number，值类型时string的对象
let arg4: Record<number, string> = {
    
    
    1: "a",
    2: "b",
    3: "c",
};

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可以使PropKeys联合类型中的任意一个，类似于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关键字，明确指定此处用于类型声明。

TypeScript基础教程

一、TypeScript简介

1. 特性

2. 搭建环境

3. 常见方法说明

3.1 keyof

3.2 in keyof

3.2 extends keyof

二、TypeScript常用类型

1.类型注解

2.常用基础类型概述

2.2 原始类型

2.3 数组类型

2.4 类型别名

2.5 函数类型

2.6 对象类型

2.7 接口

2.8 元组

2.9 类型推论

2.10 类型断言

2.11 字面量类型

2.12 枚举

2.12.1 数字枚举

2.12.2 字符串枚举

2.13 any类型

2.14 typeof

三、TypeScript高级类型

1. class类

1.1 extends继承父类

1.2 模拟多重继承

1.3 implements实现接口

1.4 类成员可见性

1.4.1 public

1.4.2 protected

1.4.3 private

1.4.4 readonly

1.5 get和set的使用

2. 类型兼容性

2.1 类兼容性

2.2 接口兼容性

2.3 函数兼容性

2.3.1 参数个数

2.3.2 参数类型

2.3.3 返回值类型

3. 交叉类型

4. 泛型

4.1 泛型约束

4.1.1 指定更加具体的类型

4.1.2 添加约束

4.2 泛型接口

4.3 泛型类

4.4.1 创建泛型类

4.4 泛型工具类型

5. 索引签名类型

6. 映射类型

四、类型声明文件

1. TS中的两种文件类型

1.1 .ts文件

1.2 .d.ts文件

2. 类型声明文件的使用说明

2.1 使用已有的类型声明文件

2.1.1 内置类型声明文件

2.1.2 第三方库的类型声明文件

2.2 创建自己的类型声明文件

2.2.1 项目内共享类型

2.2.2 为已有JS文件提供类型声明

猜你喜欢

1.1 `.ts`文件

1.2 `.d.ts`文件