Typescript接口-简化基础

在实际应用开发的场景中，用typescript接口基础很常见的。比如像大项目，有几个对象也可以实现了一个接口，通过接口interface可以获取方法、属性等，对开发来说是比较方便的。咱们来看看typescript接口是什么样子的。

1.接口例子

    interface text{
      title:string
     }
    function print(textObj:text){
      console.log(textObj.title)
     }
     let myTitle = {num:23,title:"my is pig"};
     print(myTitle)

解析：类型检查器会查看text的调用。text有一个参数，并要求这个对象参数有一个名为title、类型为string的属性。需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必备的属性是否存在。

2.重名以及重合

interface Mother {
    name:string,
    age:number
}
interface Mother{
    isModel:boolean
}
// 重合
const ther:Mother = {
    name:'james',
    age:39,
    isModel:false 
} 

出现定义同名的接口的时候，它们会进行重合。

3.任意属性key

任意属性[propName:string]，注意：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的子集。

interface Person {
    name:string,
    age:number,
    [propName:string]:any
}
const tom:Person = {
    name:'james',
    age:26,
    a:1,
    b:2,
    c:'title'
}

以上的写法是没问题

但是想想如下：

interface Person1 {
    name:string,
    age:number,
    [propName:string]:string
}
const personResult:Person1 ={
    name:'title',
    age:26,
    grend:'baidu'
}

为什么报错，首先任意属性的类型是stirng，但是却age的类型是number，因为number不是string的子集，所以报错的。

另外一个报错信息：

不能将类型“{ name: string; age: number; grend: string; }”分配给类型“Person1”。 属性“age”与索引签名不兼容。 不能将类型“number”分配给类型“string”。 这是叫联合类型和接口的结合

如何解决这个问题？

如果在接口中任意属性只有一个类型，只能定义对应的一个类型。如果任意属性中多个类型，则可以在任意属性中使用多个联合类型，如下：

interface Persons {
    name:string,
    age:number,
    is:boolean,
    [propName:string]:string|number|boolean
}
const result:Person = {
    name:'james',
    age:29,
    is:false,
    grend:'string',
    price:200,
}

4.可选属性(?)

在接口中属性读取不到怎么办？可以使用可选属性，则使可选属性不存在且不会报错的。

interface Person {
    name:string,
    age:number,
    title?:string
}
const result:Person = {
    name:'james',
    age:28,
}

可以看到以上的例子：title属性不存在且不会报错的。

5.接口继承

interface A extends B {
    name:string,
    age:number
}
interface B{
    title:string
}
const result3:A = {
  name: 'james',
  age: 30,
  title: '篮球活动',
}

接口A继承接口B，也就是说接口A和接口B的对象内合并。

6.定义函数类型

interface Person {
    (name:number):number[]
}
const fn:Person = (name:number)=>{
    return [43,23,231]
}

接口可以使用函数的。