接口(Interface)

• 用来建立某种代码约定,使得其它开发者在调用某个方法或者创建新的类时,必须遵循接口所定义的代码约定
  • 接口的前面加了一个 I 字母
• 规范
  • 在代码设计中，接口是一种规范；
  • 接口通常用于来定义某种规范, 类似于你必须遵守的协议,
  • 站在程序角度上说接口只规定了类里必须提供的属性和方法，
  • 从而分离了规范和实现，增强了系统的可拓展性和可维护性；

示例

const getUserInfo = function (user) {
    return `name: ${user.name}, age: ${user.age}`;
};

getUserInfo({ name: 'koala', age: 18 });

// 错误的调用
getUserInfo(); // Uncaught TypeError: Cannot read property 'name' of undefined
console.log(getUserInfo({ name: 'long' })); // name: long, age: undefined
getUserInfo({ name: 'long', height: 1.66 }); // name: long, age: undefined

• 如果这个 getUserInfo 在多人开发过程中，
• 如果它是个公共函数，多个开发者都会调用，
• 如果不是每个人点进来看函数对应注释，就可能出现调用问题

改版1

const getUserInfo = (user: { name: string, age: number }): string => {
  return `name: ${user.name} age: ${user.age}`;
};
getUserInfo({ name: 'long', age: 18 });

// 错误的调用
// getUserInfo(); // 错误信息：An argument for 'user' was not provided.
// getUserInfo({ name: 'long' }); // 错误信息：Property 'age' is missing in type '{ name: string; }'
// getUserInfo({ name: 'long', height: 1.88 }); // 错误信息：类型不匹配

• 调用的时候，会直接提示错误

重构1

  // 先定义一个接口
  interface IUser {
    name: string;
    age: number;
  }

  const getUserInfo = (user: IUser): string => {
    return`name: ${user.name}, age: ${user.age}`;
  };

  // 正确的调用
  getUserInfo({name: "long", age: 18});

重构2

  type IUserInfoFunc = (user: IUser) =>string;

  interface IUser {
    name: string;
    age: number;
  }

  const getUserInfo: IUserInfoFunc = (user) => {
    return`name: ${user.name}, age: ${user.age}`;
  };

  getUserInfo({name: "koala", age: 18});
  //  getUserInfo();