ts的一些注意点

196 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第20天,点击查看活动详情 

1. 基础类型合并没有任何意义,一般用在两个接口类型合并。合并过程相当于继承。但是如果同名属性property在不同接口是不同类型,则该同名属性property合并有为never类型

2. 任意属性一旦定义后其他所有属性都必须是任意属性类型值的子级,本例中name和age都将变成string


interface Person {
    name: string;
    age?: number;
    [propName: string]: string; 
}

3.当以变量形式作为参数调方法时候会绕过方法参数的类型检查,和as效果一样。

原因是给变量赋值的时候,赋值语句会自动根据类型推定,判断出参数类型。而方法参数校验,校验需要的类型满足条件。 故而其他类型绕开了检查。 所以注意:仅仅绕开多余类型检查。

interface TestType {
label: string;
}
function printLabel(test: TestType) {
console.log(test.label);
}
let myObj = { size: 10, label: "testtest" };
printLabel(myObj); // OK

或者

let myObj: TestType = { size: 10, label: "testtest" } as TestType

4.定义多个同名接口的会自动合并其中所有值

interface Point { x: number; }
interface Point { y: number; }

等价于

interface Point { x: number; y: number; }

5 泛型限定传参必须包含某个或某些属性

interface Person {
    idCard: number
}
// 限定传参必须包含idCard参数
function personInfo<T extends Person> (params: T): T{
    console.log(params.idCard)
    return args
}

通过keyof获取T中的所有key,第一个参数传T,第二个参数传T中的key组成的array,返回T[K]即value

function getValues<T, K extends keyof T>(person: T, keys: K[]): T[K][] {
  return keys.map(key => person[key]);
}

6.将interface中所有属性变成可选的

interface TestInterface{
    name:string,
    age:number
}
type NewTestInterface<T> = {
    [p in keyof T]+?:T[p]
}
// 加上只读
// type NewTestInterface<T> = {
//     +readonly [p in keyof T]+?:T[p]
// }

关键字Partial直接将所有属性变成可选

注意只会处理第一层属性,第二层会忽略

// 与上面例子等价
type NewTestInterface = Partial<TestInterface>;

反过来将可选变成必选 Required -?

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

Readonly所有属性变成只读

type Readonly<T> = {
 readonly [P in keyof T]: T[P];
};
const testInterface: Readonly<TestInterface> = {
    name: "Delete inactive users",
    age: 20

};

todo.name = "Hello"; // Error: cannot reassign a readonly property

Omit<T, K extends keyof any> 的作用是使用 T 类型中除了 K 类型的所有属性,来构造一个新的类型。

interface TestInterface{
    name:string,
    age:number
}

type NameTestInterface = Omit<TestInterface, "age">; // 删掉了age属性,=== {name:string}

除去所有null和undefined的属性 type T0 = NonNullable

Pick 挑出指定属性作为一个新的类型

interface TestInterface{
    name:string,
    age:number,
    weight: number,
    scores: number
}

type NameTestInterface = Pick<TestInterface, "name" | "age">;

ReturnType 用来得到函数的返回值类型

type Func = (value: number) => string;
const foo: ReturnType<Func> = "1"; // 将foo定义为函数Func的返回值类型string

Exclude<T, U> 的作用是将某个类型中属于另一个的类型移除掉。

interface TestInterface{
    name:string,
    age:number,
    weight: number,
    scores: number
}

interface TestInterface2{
    name:string,
    age:number,
    weight: number,
}


type T0 = Exclude<TestInterface, TestInterface2>; // 最终得到scores