typescript ts 基础知识之接口、泛型

一、接口

接口用来定义一个对象结构，用来定义一个对象中应该包含哪些属性和方法

使用关键字 interface 定义

interface PersonObj {

  name: string

  age:number

}

const obj:PersonObj = {

  name: '小明',

  age: 18,

  // gender: '男', //报错，gender没有在PersonObj中定义

}

 1.接口也可以当成类型声明使用，同type

type MyType = {

  name: string,

  age: number

}

const obj:MyType = { ... }

不同点：

type不能声明同一个名字的类型两次，会报错

type MyType = { ... }

type MyType = { ... }  // 报错

接口interface可以声明同一个名字的类型两次，结果为两个声明合并，但后续声明中若有之前声明过的属性，则属性类型须一致

interface PersonObj {

  name: string

  age:number

}

interface PersonObj {

  gender:string

}

const obj:PersonObj = {

  name: '小明',

  age: 18,

  gender: '男'

} 

2. 用类实现接口

接口可以在定义对象的时候限制对象的结构，接口中所有的属性都不能有实际的值，即接口只定义对象结构，不考虑实际值，类似于抽象类，不同的是在接口中所有的属性和方法都是抽象的，抽象类中可以有实质的属性和方法

定义类时，可以使类去实现一个接口（使类满足接口的要求），使用关键字implements

 interface MyInter{

  name:string

  sayHi():void

}

class MyClass implements MyInter{

  name:string

  constructor(name:string){

    this.name = name

  }

  sayHi(): void {

    console.log('Hi~')

  }

}

二、泛型

在定义函数或类时，遇到类型不明确的，可以使用泛型，泛型就是一个不确定的类型，调用时传入具体类型

1. 指定一个泛型

function fn<T>(a: T): T{ return a }

// 可以直接调用具有泛型的函数

fn(10) //不指定泛型，TS可以自动对类型进行推断

fn<string>('hello') //指定泛型

2. 指定多个泛型

function fn<T, K>(a:T, b:K):T{

  return a

}

fn(10, 'hello')

fn<number,string>(10,'hello')

3.  限制泛型的范围

T extends Inter 表示泛型T 必须是Inter实现类（子类） 

interface Inter{

  length: number

}

function fn<T extends Inter>(a:T):number{

  return a.length

}

fn('hello')

 class MyClass<K>{

  name: K

  constructor(name: K){

    this.name = name

  }

}

const myClass = new MyClass<string>('a')