重拾Typescript之interface

0.interface：

interface是接口，顾名思义就有点设计模式中的适配器的感觉,typescript中的接口是用来约束或者说描述对象的。

1.函数参数的注解:

直接上例子🌰：

const getPersonName = (person) => {
  console.log(person.name);
};

const setPersonName = (person, name) => {
  person.name = name;
};

// 常规注解方法

const getPersonName0 = (person: { name: string }) => {
  console.log(person.name);
};

const setPersonName0 = (person: { name: string }, name: string) => {
  person.name = name;
};

上面代码会发现，person类型的变量都和人相关，写法上也重复写了{name:string}，那么有没有一种方法能够将某一类的约束给提出来，同意进行约束定义呢？

2.通过类型别名type的方式对函数参数进行注解：

• 类型别名注解：

// 类型别名注解方法:
type Person1 = {
  name: string;
};

const getPersonName1 = (person: Person1) => {
  console.log(person.name);
};

const setPersonName1 = (person: Person1, name: string) => {
  person.name = name;
};

3.通过interface接口的方式对函数参数进行注解：

• 使用interface接口的方式注解

interface Person2 {
  name: string;
}
const getPersonName2 = (person: Person2) => {
  console.log(person.name);
};

const setPersonName2 = (person: Person2, name: string) => {
  person.name = name;
};

4.类型别名type注解和interface接口注解的区别：

既然既可以使用类型别名type注解又可以使用interface接口的方式，那么两者之间的区别是啥呢？

//interface和type的区别
interface Person3 {
  name: string;
}
type PersonType = string;

• 类型别名type后面可以直接定义简单类型数据。但是interface只能用来定义对象、函数
• ts中如果能用interface接口去表述一些类型的话，那就用接口，如果不能用接口的话再考虑使用type类型别名的方式

5.某个对象的属性可有可的注解方式（注意函数参数传参方式）：

如果期望某个对象的属性可有可无，不确定是否存在，那么可以用下面的这种方式：

interface Person4 {
  name: string;
  age?: number;
}
const getPersonName4 = (person: Person4): void => {
  console.log(person.name);
};

const setPersonName4 = (person: Person4, name: string): void => {
  person.name = name;
};

const PInfo = {
  name: 'dell',
  age: 18,
  sex: 'male',
};
//如果是以字面量对象的形式传参数，ts会进行强校验，也就是说类型必须和接口interface Person4接口对应上
// 如果是存在变量里，然后通过变量传入，就不会那么严格，只要满足interface中要求的属性即可
getPersonName4({
  name: 'dell',
  age: 18,
  sex: 'male',
}); // sex处报错
getPersonName4(PInfo);
setPersonName4(PInfo, 'RichardMrX');

给函数传入字面量对象和传入字面量对象的变量是有区别的:

• 如果是以字面量对象的形式传参数，ts会进行强校验，也就是说类型必须和接口interface Person4接口对应上（多添加的sex属性提示报错）
• 如果是对象存在变量里，然后通过变量传入，就不会那么严格，只要满足interface中要求的属性即可

6.对于不确定key字段名属性的注解

interface接口中对于不确定key字段名属性的注解：

下面例子中多添加的sex属性，虽然在interface中没有明确定义,但是由于有[propName:string]:any 的存在，所以不会报错。

//interface中定义不确定key字段名的属性

interface Person5 {
  name:string,
  age?:number,
  [propName:string]:any 
}

const getPersonName5 = (person: Person5): void => {
  console.log(person.name);
};

const setPersonName5 = (person: Person5, name: string): void => {
  person.name = name;
};
getPersonName5({
  name: 'dell',
  age: 18,
  sex: 'male',
}); 

7.interface中定义方法：

interface中定义方法：

//interface中定义方法
interface Person6 {
  name:string,
  age?:number,
  [propName:string]:any,
  say():string
}

const getPersonName6 = (person: Person6): void => {
  console.log(person.name);
};

const setPersonName6 = (person: Person6, name: string): void => {
  person.name = name;
};

const person6 = {
  name:'测试interface中方法',
  sex:'male',
  say(){
    return '傻蛋傻蛋'
  }
}
getPersonName6(person6);

8.class类对接口interface的应用:

class类对接口interface的应用:

• 类对接口是通过implements来应用的
• 下面例子中的User1类，就必须具有Person7中的属性

//类对接口的应用(类可以应用interface接口)
// 要求类中必须要有interface接口中的属性
interface Person7 {
  name:string,
  age?:number,
  [propName:string]:any,
  say():string
}


class User1 implements Person7{
  name:'青峰大辉';
  say(): string {
      return '自由的仔'
  }
}
const getPersonName7 = (person: User1): void => {
  console.log(person.name);
};

const setPersonName7 = (person: Person7, name: string): void => {
  person.name = name;
};

9.interface和interface之间的应用：

interface和interface之间的应用：

• Teach接口中继承了接口Person8,这样再有需要其他接口的时候就可以去继承啦。

//接口和接口之间互相继承
//Teacher继承了Person8的接口，同时还定义了自己的teach方法
interface Person8 {
  name:string,
  age?:number,
  [propName:string]:any,
  say():string
}

interface Teacher extends Person8{
  teach():string
}

const getPersonName8 = (person: Teacher): void => {
  console.log(person.name);
};

const setPersonName8 = (person: Teacher, name: string): void => {
  person.name = name;
};

const person8 = {
  name:'测试interface中方法',
  sex:'male',
  say(){
    return '傻蛋傻蛋'
  },
  // 这里需要添加teach方法，不然下面会报错
  teach(){
    return "我是教大前端的"
  }
}
getPersonName8(person8);

10.interace自身定义一个函数:

interace自身定义一个函数:

• (word:string):string即为函数的参数规范

//接口自身还可以定义一个函数
  // 接口去定义一个函数的类型
interface SayHi{
  (word:string):string
};
const say :SayHi = (word:string)=>{
  return word;
}