TypeScript之路----探索接口（interface）的奥秘

TypeScript定义接口
熟悉编程语言的同学都知道，接口（interface）的重要性不言而喻。 很多内容都会运用到接口。typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等，要想对typescript的操作进行更深入的了解，接口是必须接触到的。今天我就为大家分享一下，如何使用接口。

一. 为什么要使用接口
1.1. JavaScript存在的问题
我们在JavaScript中定义一个函数，用于获取一个用户的姓名和年龄的字符串：
const getUserInfo = function(user) {
return name: ${user.name}, age: ${user.age}
}
正确的调用方法应该是下面的方式：
getUserInfo({name: “coderwhy”, age: 18})
但是当项目比较大，或者多人开发时，会出现错误的调用方法：
// 错误的调用
getUserInfo() // Uncaught TypeError: Cannot read property ‘name’ of undefined
console.log(getUserInfo({name: “coderwhy”})) // name: coderwhy, age: undefined
getUserInfo({name: “codewhy”, height: 1.88}) // name: coderwhy, age: undefined
因为JavaScript是弱类型的语言，所以并不会对我们传入的代码进行任何的检测，但是在之前的javaScript中确确实实会存在很多类似的安全隐患。
如何避免这样的问题呢？
当然是使用TypeScript来对代码进行重构
1.2. TypeScript代码重构一
我们可以使用TypeScript来对上面的代码进行改进：
const getUserInfo = (user: {name: string, age: number}): string => {
return name: ${user.name} age: ${user.age};
};
正确的调用是如下的方式：
getUserInfo({name: “coderwhy”, age: 18});
如果调用者出现了错误的调用，那么TypeScript会直接给出错误的提示信息：
// 错误的调用
getUserInfo(); // 错误信息：An argument for ‘user’ was not provided.
getUserInfo({name: “coderwhy”}); // 错误信息：Property ‘age’ is missing in type ‘{ name: string; }’
getUserInfo({name: “coderwhy”, height: 1.88}); // 错误信息：类型不匹配
这样确实可以防止出现错误的调用，但是我们在定义函数的时候，参数的类型和函数的类型都是非常长的，代码非常不便于阅读。
所以，我们可以使用接口来对代码再次进行重构。
1.3. TypeScript代码重构二
现在我们使用接口来对user的类型进行重构。
接口重构一：参数类型使用接口定义
我们先定义一个IUser接口：
// 先定义一个接口
interface IUser {