TypeScript常用知识之--类型保护自定义类型这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战类型保

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

因为Typescript的持续火爆，分享下TS的常用知识点，我们一起学习交流，一起加油！

类型保护

类型保护在Typescript中是为了更加精确匹配类型

1. typeof

function fn(a: number | string): void {
    if (typeof a === "string") {
        a.split(",");
    }

    if (typeof a === "number") {
        a.toFixed(2);
    }
}

2. instanceof

class Person {}
class Animal {}

function fn2(clazz: Person | Animal): void {
    if (clazz instanceof Person) {
        console.log("person");
    }

    if (clazz instanceof Animal) {
        console.log("animal");
    }
}

3. null 保护

当ts 判断一个变量可能null的时候，很多内置的方法提示都会失效，所以采用一下方法来排除null的情况

// if 判断
function a(s: string | null) {
    if (!s) {
        return;
    }

    console.log("s", s.length);
}

// 默认值
function b(s: string | null) {
    s = s || "";

    console.log("s", s.length);
}

// as断言
function c(s: string | null) {
    console.log("s", (s as string).length);
}

4. in 保护

interface A {
    name: string;
}

interface B {
    gender: string;
}

function d(a: A | B) {
    if ("name" in a) {
        console.log("类型为A");
    } else {
        console.log("类型为B");
    }
}

5.字面量保护

function e(a: "1" | "2") {
    if (a === "1") {
        console.log("1");
    } else {
        console.log("2");
    }
}

自定义类型

上章我们学习了如何利用extends 和 infer 去筛选类型，现在我们利用在内置的类型上扩展一些新的类型

1.获取不同的属性

type SetDifferent<T, U> = T extends U ? never : T;
let setDifferent: SetDifferent<string | number, number> = "111";

2.忽略对象中的属性

type Omit<T extends object, U> = Pick<T, SetDifferent<keyof T, U>>;
type OBJ = {
    name: string;
    age: number;
    isMale: boolean;
};
let omitType: Omit<OBJ, "name"> = { age: 1, isMale: true };

3.去除主对象中的另外一个对象

type RemoveDiff<T extends object, U> = Pick<
    T,
    SetDifferent<keyof T, keyof U>
>;

type Props1 = {
    name: string;
    age: number;
    isMale: boolean;
};

type Props2 = {
    name: string;
    age: number;
};

let removeDiff: RemoveDiff<Props1, Props2> = { isMale: true };

4.取2个类型的交叉属性

type IntersectionProps<T extends object, U extends object> = Pick<
    T,
    Extract<keyof T, keyof U>
>;
type Props3 = { name: string; age: number; isMale: boolean };
type Props4 = { age: number; gender: string };
let intersectionProps: IntersectionProps<Props3, Props4> = { age: 1 };

5.重写对象中的属性

type OverwriteProp<
    T extends object,
    U extends object,
    I = RemoveDiff<T, U> & IntersectionProps<U, T>
> = Pick<I, keyof I>;
    type Props5 = { name: string; age: number; isMale: boolean };
type Props6 = { age: string };
// 类型为 { name: string; age: string; isMale: boolean };
let overwriteProp: OverwriteProp<Props5, Props6> = {
    name: "tom",
    age: "1",
    isMale: true,
};

6.合并对象的属性

type Compute<T> = T extends Function ? T : { [P in keyof T]: T[P] };
type MergeProp<T extends object, U extends object> = Compute<
    T & Omit<U, keyof T>
>;
type Props7 = { name: string; age: number; isMale: boolean };
type Props8 = { age: string; gender: string };
let MergeProp: MergeProp<Props7, Props8> = {
    name: "Tom",
    age: 11,
    isMale: true,
    gender: "male",
};

TypeScript常用知识之--类型保护自定义类型

类型保护

1. typeof

2. instanceof

3. null 保护

4. in 保护

5.字面量保护

自定义类型

1.获取不同的属性

2.忽略对象中的属性

3.去除主对象中的另外一个对象

4.取2个类型的交叉属性

5.重写对象中的属性

6.合并对象的属性

相关资料