美文网首页
高级类型

高级类型

作者: simon_李玉兵 | 来源:发表于2021-03-03 10:43 被阅读0次

类型的且运算

interface A {
  name: string;
  age: number;
}

interface B {
  name: string;
  grade: number;
}

let c: A & B = {
  name: 'c',
  age: 18,
  grade: 100
}

类型的或运算

interface A {
  name: string;
  age: number;
}

interface B {
  name: string;
  grade: number;
}

let c: A | B = {
  name: 'c',
  grade: 100
}
let d: A | B = {
  name: 'c',
  age: 18
}
let g: A | B = {
  name: 'c',
  age: 18,
  grade: 100
}

类型别名 type

给已知的类型取个别名, 不会产生新的类型

interface A {
  name: string;
  age: number;
}

interface B {
  name: string;
  grade: number;
}

type C = A & B

let c: C = {
  name: 'c',
  age: 18,
  grade: 100
}

字面量类型

interface Course {
  category: 'task' | 'video'
}
let course: Course =  {
  category: 'task' // 值只能是task或者 video
}

type Dir = 'east' | 'west' | 'north' | 'south'
let dir:Dir = 'east'

多态的 this类型

class Calc {
  public value: number;
  constructor(n: number) {
    this.value  = n
  }
  addValue(n: number) {
    this.value += n
    return this // 返回Calc
  }
  multiply(n: number) {
    this.value *= n
    return this // 返回Calc
  }
}

let c = new Calc(1)
c.addValue(1).addValue(3).multiply(6) 
console.log(c.value) // 30

索引类型

interface CalenderOptions {
  [k: string]: any
}
let calender = (options: CalenderOptions) => {}
calender({
  view: 'Year',
  a: '12345' // 没有很大的限制。只要符合CalenderOptions的 k是string值可以是任意类型。
})

function pluck<T, K extends keyof T>(object: T, keys:K[]):T[K][] {
  // T                 - {name: 'simon', age: 18, grade: 100}
  // keyof T           - 'name' | 'age' | 'grade'
  // K extends keyof T - 'name' | 'age' | 'grade'
   // T[K] 类型可能是string或者number, 索引访问操作符。 所以 T[K][]代表数组里面的类型可能是string或者number
  return keys.map(n => object[n])
}

let pluckObject = pluck({name: 'simon', age: 18, grade: 100}, ['name', 'age'])
console.log(pluckObject)

interface Person {
  name: string;
  age: number;
  grade: number;
}

type X = keyof Person // "name" | "age" | "grade" 字面量类型

Readonly 和 Partial

interface Person {
  name: string;
  age: number;
}

const person1:Person = {
  name: 'simon',
  age: 18
}
person1.name = 'jack' // 不报错

interface ReadonlyPerson {
  readonly name: string;
  readonly age: number;
}
// 有时候并不需要上述操作
type ReadonlyPerson2 = Readonly<Person> // 此时所有的属性都是只读

const person: Readonly<Person> = {
  name: 'simon',
  age: 18
}
person.name = 'jack' // 报错
interface Person {
  name: string;
  age: number;
  grade: number;
}

interface Person2 {
  name?:string;
  age?: number;
  grade?: number;
}
// 下面的方法一样可以实现

type Person3 = Partial<Person> // 跟上面一样

可识别联合

interface Square {
    kind: "square";
    size: number;
}
interface Rectangle {
    kind: "rectangle";
    width: number;
    height: number;
}
interface Circle {
    kind: "circle";
    radius: number;
}

每个接口都有 kind属性但有不同的字符串字面量类型。 kind属性称做可辨识的特征标签。 其它的属性则特定于各个接口

type Shape = Square | Rectangle | Circle; // 联系起来

下面使用可识别联合

function area(s: Shape) {
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.height * s.width;
        case "circle": return Math.PI * s.radius ** 2;
    }
}

相关文章

网友评论

      本文标题:高级类型

      本文链接:https://www.haomeiwen.com/subject/qramfltx.html