「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。
TypeScript的核心原则之一是对值所具有的结构进行类型检查，而接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
基本使用
先来回顾一下，声明变量的写法是let [变量名] : [类型] = 值;
假如要定义用户的基本信息可以这样写
如果想要把所有的信息描述放在一个对象，可以这样写
可以看到，如果属性多的时候，这样写出来的代码可读性就会不太好。
这个时候，就可以用到接口interface来改写：
interface User {
name: string;
age: number;
}
let jane: User = {
name: '简',
age: 18
};
定义了一个接口 User，然后用它作为对象jane的类型。这样，就约束对象jane 的形状必须和接口 User 一致。
接口有两个重要的概念
-
对行为的抽象；
-
对「对象的形状（Shape）」进行描述；
interface接口的使用规范
- 定义的对象第一字母大写。
- interface里面每一个属性定义类型时候用【分号】隔开。
一致性
赋值的时候，变量的形状必须和接口的形状保持一致
如上面的示例，变量中少了一个age的话是不被允许的。
当然多了也不行
可选属性
但是有的时候，我们有的属性本身就是可选的，那应该如何用接口描述这种情况？
可以用可选属性描述这种情况，假如我们的用户信息中，兴趣爱好是非必填的。可以在属性后面打一个问号?
可以看到代码提示，这个 hobby 属性既可能是string类型也可能是 undefined 。
可选属性的含义是该属性可以不存在。
任意属性
上面的可选属性，只能处理【对象】比【接口】属性少的情况。但是仍然不允许添加未定义的属性。
有时候我们可能希望一个接口允许有任意的属性。
上面示例中，定义了三个name、age、hobby属性
可以看到，这些属性有一些共同之处
- key都是string类型
- value是string或者number中的一种
我们就可以这样来定义一个任意属性
[propName: string]: string | number;
现在，只要是key是string，值是string或number都是被允许的。
注意：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集。
什么意思呢?就是说
其他
未完待续...
参考资料：TypeScript interface
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
