TS中的关键字总结

最近在写ts,偶尔会遇到一些之前没见过的一些符号或者关键词,索性来一次全面筛查,相似或有关联的都放在一起总结了!

is

is 类型保护,用于判断类型的函数中做类型限制

// bad
function isString(value: unknown): boolean{
  return typeof value === "string";
}

//good
function isString(value: unknown): value is string{
  return typeof value === "string";
}

in

in 其实就像是遍历一样

type Keys = 'a' | 'b' | 'c';
type obj = { 
    [ T in Keys]: string;
}
// in 遍历 Keys,并为每个值赋予 string 类型
 
// type Obj = {
//     a: string,
//     b: string,
//     c: string
// }

keyof

keyof 可以获取一个对象接口的所有 key值

type obj = { a: string; b: string }
type Foo = keyof obj;
// type Foo = 'a' | 'b';

typeof

typeof 用于获取某个变量的具体类型

const obj = { a: '1' };
type Foo = typeof obj; 
// type Foo = { a: string }

extends、implements

  • extends用于接口与接口、类与类、接口与类之间的继承
  • implements用于类与类、类与接口之间的实现
    注意: extends类似于es6的extends,implements没有继承效果的,但是要求子类上必须需有父类的属性和方法,更倾向于限制子类的结构!

type、interface

type 类型别名 用于给类型起一个新名字

type Value: string = "111"
// 或
type Iprops = {
  value: string,
  getName: () => string
}

interface 接口 用于声明类型

interface MyInterface {
  value: string,
  getName: () => string
}

type 和 interface的区别

  • type可以定义单个变量类型、联合类型、对象,interface只能定义对象;
  • type可以使用implements,但是不可以使用extends关键字,interface两者都可以使用;
  • type不可以重复声明,interface可以重复声明(声明合并);

    type Iprops = {
    name: string
    age: number
    }
    type Iprops:string = "111" // Error 标识符“Iprops”重复。ts(2300)
    
    interface MyInterface {
    name: string
    age: number
    }
    interface MyInterface {
    gender: string
    }
    const obj: MyInterface= {
    name: "string"
    age: 18,
    gender: "男",
    }
    // 重复声明相当于把两个类型加一块

    注意: 重复声明同字段若类型不同也会报错

    interface MyInterface {
    name: string
    age: number
    }
    interface MyInterface {
    age: string // 后续属性声明必须属于同一类型。属性“age”的类型必须为“number”,但此处却为类型“string”。ts(2717)
    gender: string
    }
  • type可以动态计算属性,interface则不可以

    // good
    type Keys = "小王" | "小文"
    type X = {
    [key in Keys]: string
    }
    // bad
    interface Y {
     [key in Keys]: string 
    }
    // 映射的类型可能不声明属性或方法。ts(7061)
    // “Keys”仅表示类型,但在此处却作为值使用。ts(2693)
    
    // bad
    type XX = keyof Keys;
    interface Y {
     [k: XX]: number
    }
    // 索引签名参数类型不能为文本类型或泛型类型。请考虑改用映射的对象类型。ts(1337)
  • 两者的拓展
    请注意接口和类型别名不是互斥的。接口可以扩展类型别名,反之亦然。

    // interface
    interface PartialPointX { x: number; }
    interface Point extends PartialPointX { y: number; }
    
    // type
    type PartialPointX = { x: number; };
    type Point = PartialPointX & { y: number; };

infer

infer用于提取属性,具体的返回类型是依据三元表达式的返回而定。

type myInter = T extends Array ? U : T

Pick

用于在定义好的类型中取出特性的类型

interface UserInfo {
  id: string;
  name: string;
}
type NewUserInfo = Pick; // {name: string;}

Record

Record 可以获得根据 K 中所有可能值来设置 key 以及 value 的类型

interface UserInfo {
  id: string;
  name: string;
}
type CurRecord = Record<'a' | 'b' | 'c', UserInfo>; // { a: UserInfo; b: UserInfo; c: UserInfo; }

ReturnType

ReturnType 用来获取函数的返回值的类型

type Func = (value: number) => string;
const foo: ReturnType = "1";

Partial、DeepPartial、Required

  • Partial 功能是将类型的属性变成可选

    interface UserInfo {
    id: string
    name: string
    }
    // bad
    const machinist: UserInfo = {
    name: 'machinist'
    } 
    // error 类型 "{ name: string; }" 中缺少属性 "id",但类型 "UserInfo" 中需要该属性。ts(2741)
    
    type NewUserInfo = Partial;
    // good
    const machinist: UserInfo = {
    name: 'machinist'
    }

    注意: Partial只支持处理第一层的属性,如果想要处理多层,可以使用DeepPartial,使用方法与Partial相同这里就不举例了

  • Required 功能与Partial相反,将类型的属性变成必选
interface UserInfo {
  id?: string
  name?: string
}
type newUserInfo =  Required
const machinist: newUserInfo = {
 id:"111"
}
// error 类型 "{ id: string; }" 中缺少属性 "name",但类型 "Required" 中需要该属性。ts(2741)

Readonly、Mutable

  • Readonly将类型字段的值修改为只读属性,禁止修改
  • 功能是将类型的属性变成可修改,意思就是去除只读

你可能感兴趣的:(typescript)