类型

json 转 ts 类型工具

• json2ts
• json2ts

type 和 interface

相同点

1. 都可以用来描述对象或函数

   type Point = {
       x: number
       y: number
   }
   type SetPoint = (x: number, y: number) => void
   
   interface Point {
       x: number
       y: number
   }
   interface SetPoint {
       (x: number, y: number): void
   }
   

2. 都支持扩展

   类型别名通过 &（交叉运算符）来扩展，而 interface 通过 extends 的方式来扩展（可以继承多个）。

   type Animal = {
       name: string
   }
   
   type Bear = Animal & {
       honey: boolean
   }
   
   const bear: Bear = getBear()
   bear.name
   bear.honey
   
   interface Animal {
       name: string
   }
   
   interface Bear extends Animal {
       honey: boolean
   }
   

不同点

1. type 别名可以为基本类型、联合类型或元组类型定义别名，而 interface 不行

   type MyNumber = number
   type StringOrNumber = string | number
   type Point = [number, number]
   

2. 同名接口(interface)会自动合并，而类型(type)别名不会

   interface User {
       name: string
   }
   
   interface User {
       id: number
   }
   
   let user: User = { id: 666, name: '阿宝哥' }
   user.id // 666
   user.name // "阿宝哥"
   
   type User = {
       name: string
   }
   
   // 标识符“User”重复。ts(2300)
   type User = {
       //Error
       id: number
   }
   

3. type 语句中还可以使用 typeof 获取实例的 类型进行赋值

   let div = document.createElement('div')
   type B = typeof div
   

Record

将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型

Record<K,T>构造具有给定类型 T 的一组属性 K 的类型。在将一个类型的属性映射到另一个类型的属性时，Record 非常方便。

eg:

interface EmployeeType {
    id: number
    fullname: string
    role: string
}

let employees: Record<number, EmployeeType> = {
    0: { id: 1, fullname: 'John Doe', role: 'Designer' },
    1: { id: 2, fullname: 'Ibrahima Fall', role: 'Developer' },
    2: { id: 3, fullname: 'Sara Duckson', role: 'Developer' },
}

type petsGroup = 'dog' | 'cat' | 'fish'
interface IPetInfo {
    name: string
    age: number
}

type IPets = Record<petsGroup | 'otherAnamial', IPetInfo>

const animalsInfo: IPets = {
    dog: {
        name: 'dogName',
        age: 2,
    },
    cat: {
        name: 'catName',
        age: 3,
    },
    fish: {
        name: 'fishName',
        age: 5,
    },
    otherAnamial: {
        name: 'otherAnamialName',
        age: 10,
    },
}