Ts中的type、interface关键字

Myth丶恋晨 2024-03-17 15:16 50阅读 0赞

**type定义**  
type作用就是给类型起一个新名字，支持基本类型、联合类型、元祖及其它任何你需要的手写类型,常用于**联合类型**

type test = number; //基本类型
    let num: test = 10;
    type userOjb = {name:string} // 对象
    type getName = ()=>string  // 函数
    type data = [number,string] // 元组
    type numOrFun = Second | getName  // 联合类型

interface只能表示function，object和class类型

interface A{name:string;
                add:()=>void;
    }
    interface B{():void}

##  **type和interface的区别** ##

**1、和接口一样，用来描述对象或函数的类型**

type User = {
        name: string
        age: number
    };
    type SetUser = (name: string, age: number)=>void;

**2、扩展和实现(extends & implement)**  
interface可以扩展，type可以通过交叉实现interface的extends行为  
interface可以extends type，同时type也可以与interface类型交叉

interface Name {
      name: string;
    }
    interface User extends Name {
      age: number
    }
    let stu:User = {name: 'wang', age: 10}
    //interface的扩展可以通过type交叉(&)类型实现
    type Name = {
       name: string;
    }
    type User = Name & {age: number}
    let stu:User={name: 'wang', age: 18}
    //interface 扩展 type
    type Name = {
      name: string;
    }
    interface User extends Name {
      age: number;
    }
    let stu:User={name: 'wang', age: 89}
    //type与interface交叉
    interface Name {
      name: string;
    }
    type User = Name & {
      age: number;
    }
    let stu:User={name:'wang', age: 18}

#### 3、映射类型 ####

![ab1a23147ddc41ed9a27127f52d0e558.png][]

type Keys = "name" | "sex"
    type DuKey = {
      [Key in Keys]: string //类似 for ... in
    }
    let stu: Dukey = {
      name: 'wang'，
      sex: 'man'
    }

**4、interface可以合并同名接口，type不可以**

interface A{name:string}
    interface A{age:number}
    var x:A={name:'xx',age:20}

**5.、nterface可以继承interface，继承type，使用extends关键字，type也可继承type，也可继承interface，使用&**

interface A{name:string}
    interface B extends A{age:number}
     
    type C={sex:string}
     
    interface D extends C{name:string}
     
    type E={name:string}&C
     
    type F ={age:number}&A

**6、还有类可以实现接口，也可以实现type**

interface A{name:string;add:()=>void}
    type B={age:number,add:()=>void}
     
    class C implements A{
        name:'xx'
        add(){console.log('类实现接口')}
    }
     
    class D implements B{
        age:20
        add(){console.log('类实现type')}
    }

[ab1a23147ddc41ed9a27127f52d0e558.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/7597382264a94a54a3dbd60ddf8a8dba.png