深入理解TYpeScript

TS基础

基础类型

boolean、number、string
枚举enum
any、unknown、vois
never(永远不存在类型 )
数组类型[]
元组类型 tuple

函数类型

定义︰TS定义函数类型时要定义输入参数类型和输出类型输入参数︰参数支持可选参数和默认参数输出参数:输出可以自动推断，没有返回值时，默认为void类型函数重载:名称相同但参数不同，可以通过重载支持多种类型

函数重载：

function add(x: number[]): numberfunction add(x: string[]): stringfunction add(x: any[]): any iif(typeof x[0] === 'string ') {
    return x.joinO
    )
    if (typeof x[0]= s = " number' ) {
    return x.reduce((acc，cur) => acc + cur)
}
    }

interface

定义:接口是为了定义对象类型特点︰ -可选属性:? -只读属性:readonly -可以描述函数类型 -可以描述自定义属性总结:接口非常灵活duck typing

类

定义:写法和JS差不多，增加了一些定义特点: -增加了public、private、protected修饰符 -抽象类: -只能被继承，不能被实例化 -作为基类，抽象方法必须被子类实现

interface约束类，使用implements关键字

TS进阶

高级类型

1.联合类型|

2.交叉类型&

3.类型断言

4.类型别名(type vs interface) -定义:给类型起个别名

-相同点︰ 1.都可以定义对象或函数 2.都允许继承

-差异点:

interface是TS用来定义对象，type是用来定义别名方便使用;
type可以定义基本类型，interface不行;
interface可以合并重复声明,type不行;(interface可以重名,type不可以)

一般情况下使用组合+类型使用type，涉及类如extends或inplaments等对类的类型定义使用interface

泛型

使用场景

定义一个print函数，这个函数的功能是把传入的参数打印出来。传入的参数类型不确定

法一：使用any

function print(arg:any):any{
    console.log(arg);
    return arg;
}

法二：使用泛型

使用泛型的好处是实现输入输出相关联，并且对类型进行检测

function print<T>(arg:T):T{
    console.log(arg);
    return arg;
}

基本使用

基本定义：

泛型的语法是<>，里面写类型参数，一般用T表示
使用时有两种方法指定类型
- 定义要使用的类型
- 通过TS类型推断，自动推导类型
泛型的作用是临时占位，之后通过传来的类型进行推导

function print<T>(arg:T):T{
    console.log(arg)
    return arg
}

print<string>('hello')  //定义 T 为 string

print('hello') // TS 类型推断，自动推导类型为 string

泛型基础操作符

typeof:获取类型

取出 sem 的类型标识

interface Person{
    name:string;
    age:number;
}
const sem:Person = {name:"semliker",age:30};
type sem = typeof sem; //type Sem = Person

keyof:获取所有键

枚举Person中所有的key进行取值

interface Person{
    name:string;
    age:number;
}
type k1 = keyof Person; // "name" | "age"

in:遍历枚举类型

type Keys = "a" | "b" | "c";
type Obj = {
    [p in Keys]: any
} // -> {a:any,b:any,c:any}

T[K]:索引访问

对key值进行索引访问

interface IPerson{
    name:string;
    age:number;
}
let type1:IPerson['name']  //"string"
let type2:IPerson['age']   //"number"

extends:泛型约束

常用工具类型

Partial:将类型属性变为可选
Required:将类型属性变为必选
Readonly:将类型属性变为只读

type Partial<T> = {
    [P in keyof T]?: T[P]; };
   
type Required<T> = {
[in keyof T]-?: T[P]
    };

type Readonly<T> = {
    readonly [P in keyof T]: T[P]; };

深入理解TypeScript | 青训营笔记