This is the 12th day of my participation in the August Text Challenge.More challenges in August

As Typescript continues to grow in popularity, let’s share some common knowledge about TS. Let’s learn and communicate about Typescript.

Type of protection

Type protection is used in Typescript to match types more accurately

1. typeof

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

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

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"); }}Copy the code

3. The null protection

Many of the built-in method hints fail when TS determines that a variable may be null, so use the following method to exclude null cases

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

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

/ / the default value
function b(s: string | null) {
    s = s || "";

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

/ / as assertions
function c(s: string | null) {
    console.log("s", (s as string).length);
}
Copy the code

4. In protection

interface A {
    name: string;
}

interface B {
    gender: string;
}

function d(a: A | B) {
    if ("name" in a) {
        console.log("Type A");
    } else {
        console.log("Type B"); }}Copy the code

5. Literal protection

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

Custom type

In the previous chapter we learned how to filter types using extends and infer. Now we can extend some new types on top of the built-in types

1. Get different properties

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

2. Ignore properties in the object

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 };
Copy the code

3. Remove another object from the main object

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 };
Copy the code

4. Take two types of cross attributes

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 };
Copy the code

5. Override properties in the object

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 };
// The type is {name: string; age: string; isMale: boolean };
let overwriteProp: OverwriteProp<Props5, Props6> = {
    name: "tom".age: "1".isMale: true};Copy the code

6. Merge object properties

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"};Copy the code

The relevant data

  • The TypeScript’s official website

Check out my TypeScript column if you like. I will try to keep it updated every night. If you like it, please give me a thumbs up

If you like “algorithm”, you can have a look at another column I share (front-end algorithm) there are more about the topic of the algorithm to share, I hope to help you a deeper understanding of the algorithm

The purpose of this article is to study, discuss and share the experience in the process of learning TS. Some of the materials in this article are from the network. If there is any infringement, please contact us to delete [email protected]