Typescript学习——接口

接口：interface

TypeScript 的核心原则之一就是对‘值’ 所具有的结构进行类型检查，而接口的作用就是为这些类型命名或为你的第三方代码定义契约。相当于定义了值的类型。

用法

const foo = (params: {name: string})=>{
	rerurn parasms
}

foo函数使用时，必须传入一个包含参数为name且类型为string，否则类型检查器会报错。

用interface来描述

interface TestParam {
	name: string
}

const foo = (params: TestParam)=>{
	rerurn parasms
}

这种写法，作用和上面相同，但是更加优雅，如果你的类型中包含很多，都写在参数后面的话，代码会很混乱。下面介绍一下interface的一些用法。

可选属性

interface TestParams {
  name: string,
  value?: number | null // 属性可选
}

const foo = (params: TestParam)=>{
	rerurn parasms
}
 

这里定义的value就是可选属性，在调用foo时，检查传入的参数时不会检查是否包含value值。

只读属性

它规定属性只有在对象创建时赋值，通过 readonly 来指定，定义为只读属性以后只可以访问不可以修改。

interface TestParams {
  readonly name: string, // 只读属性
  value?: number | null,
  ary: ReadonlyArray<number>  // 只读数组
}

const a: ITestParams = {name: 'a', value: 30, ary: [2, 3, 4]};

a.value = 40; 
a.name = 'b'; // 报错 readonly
const b = a.ary[0];
a.ary[1] = 45; // 报错 ReadonlyArray

针对接口除已定义属性外的额外属性的检查

如果我们不需要强制定义某个数据的类型，可以将它定义为any。

interface TestParams {
  name: string,
  value?: any
}

const foo = (params: TestParam)=>{
	rerurn parasms
}

定义函数类型的接口

interface TestFunction {
  (name: 'string', value: any): string // (形参格式): 返回值格式
}

const test: TestFunction = function(name, value) { 
  return name.toUpperCase();
}

定义类的接口

interface Person{
  say: {
    (name: string, age: number): boolean
  },
  name: string,
  age: number
}

class Man implements Person { 
  name: string;
  age: number;
  say(name, age) {
    return false;
  }
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

和Java中类十分相似。

接口间的继承

interface Props {
  name: string
}

interface Props2 extends Props {
  age: number
}

const a: Props2 = {name: 'xxx', age: 89};

一个接口也可以继承多个接口。

interface Props1 {
  name: string
}


interface Props2 {
  age: number
}

interface Props3 extends Props1, Props2 { // 多继承
  color: string
}


const a: Props3 = {name: 'xxx', age: 89, color: 'red'};