TS 学习笔记

TypeScript | 汪图南 (wangtunan.github.io)

交叉类型

interface Body {
    sex: string;
    age: number
}

type Person<T, P = string> = T & { name: P};
// & 联合类型，在T的基础上添加键名"name"，值类型为P的属性

interface Options {
    people: Person<Body, string>
}

function make(options: Options) {
    const { people } = options
    console.log(people)

}

make({
    people: {
        name: "Li",
        sex: "男",
        age: 18
    }
})

联合类型

interface Foo {
  foo: string;
  name: string;
}

interface Bar {
  bar: string;
  name: string;
}

const sayHello = (obj: Foo | Bar) => {
  console.log(obj);
};

sayHello({ foo: "foo", name: "lolo" });
sayHello({ bar: "bar", name: "growth" });

任意属性

interface User {
    id: number;
    name: string;
    // 任意属性
    [propName: string]: any
}

// 只对id和name做规定，其他属性随意，

const user: User = {
    id: 1,
    name: 'jack',
    age: 12,
}

const user1: User = {
    id: 1,
    name: 'jack',
    age: 12,
    email: '111@163.com'
}

readonly（只读属性）

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};
tom.id = 9527;      //  Cannot assign to 'id' because it is a constant or a read-only property

Partial (可选属性，但仍然不允许添加接口中没有的属性)

当我们不能明确地确定对象中包含哪些属性时，我们就可以通过Partial来声明。

可以将一个定义必选参数的转化成全部可选参数

interface IUser {
  name: string
  age: number
  department: string
}
 
//经过 Partial 类型转化后得到
 
type optional = Partial<IUser>
 
// 等价于
 
type optional = {
    name?: string | undefined;
    age?: number | undefined;
    department?: string | undefined;
}

Required（必选属性）

和Partial刚好相反，将一个定义中的属性全部变成必选参数

让一个类型的属性全部必填

Pick（部分选择）

在一个已经声明的类型中，抽出一部分形成子类型，在子类型中可以包含父类型中的部分或全部属性

interface User {
    id: number;
    name: string;
    age: number;
    gender: string;
    email: string;
}

type PickUser = Pick<User, 'id' | 'name' | 'gender'>;

// 等价于
type PickUser = {
    id: number;
    name: string;
    gender: string;
}

const user: PickUser = {
    id: 1,
    name: 'jack',
    gender: '男'
}

// 应用场景：定义全部属性类型，根据应用场景取所需的属性（新建，详情，列表等）

Omit（属性忽略）

与Pick相反，忽略掉我们不需要的属性

interface User {
    id: number;
    name: strng;
    age: number;
    email: string;
}

type OmitUser = Omit<User, 'age' | 'email'>;

// 等价于

type OmitUser = {
    id: number;
    name: string;
}

const user: OmitUser = {
    id: 1,
    name: 'jack'
}