type(类型别名)
类型别名可以用于表示基本类型、对象类型、联合类型、泛型和元组
type MtherString = string;
type MyObj = {
a: string;
b: number;
c: boolean;
};
type setPoint = (x: number, y: number) => void;
type Total = string | number;
type Tree<T> = {
node: T;
}
type comble = [number, string, number];
interface(接口)
接口只能用于描述对象类型
interface MyObj {
a: string;
b: number;
c: boolean;
}
interface setPoint {
(x: number, y: number): void;
}
interface Tree<T, U> {
node: T;
leaf: U;
}
继承 extends
interface 继承 interface
interface Person{
name:string
}
interface Student extends Person { stuNo: number }
interface 继承 type
type Person{
name:string
}
interface Student extends Person { stuNo: number }
type 继承 type
type Person{
name:string
}
type Student = Person & { stuNo: number }
type 继承 interface
interface Person{
name:string
}
type Student = Person & { stuNo: number }
实现 implements
类可以实现 interface 以及 type(对象类型)
interface ICat{
setName(name:string): void;
}
class Cat implements ICat{
setName(name:string):void{
}
}
type ICat = {
setName(name:string): void;
}
class Cat implements ICat{
setName(name:string):void{
}
}
总结(type 与 interface 的区别)
- type 可以定义基本类型别名、联合类型、元组类型, 但是 interface 无法定义。
- interface 支持声明合并,但是 type 不行。
interface Person { name: string }
interface Person { age: number }
let user: Person = {
name: "Tolu",
age: 0,
};
type Person { name: string };
type Person { age: number }
- 索引签名问题
如果你经常使用TypeScript, 一定遇到过相似的错误:(是的没错)
Type ‘xxx’ is not assignable to type ‘yyy’ Index signature is missing in type ‘xxx’.
interface propType{
[key: string] : string
}
let props: propType
type dataType = {
title: string
}
interface dataType1 {
title: string
}
const data: dataType = {title: "订单页面"}
const data1: dataType1 = {title: "订单页面"}
props = data
props = data1
我们发现 dataType 和 dataType1 对应的类型一样,但是interface定义的就赋值失败,是什么原因呢? 刚开始百思不解,最后我在 stack overflow上找到了一个相似的问题:
并且很幸运的找到了有效的答案:
翻译过来的大致意思就是:
Record<string,string> 与 {[key:string]:string} 相同。只有当该类型的所有属性都已知并且可以对照该索引签名进行检查时,才允许将子集分配给该索引签名类型。在您的例子中,从 exampleType 到 Record<string,string> 的所有内容都是可分配的。这只能针对对象字面量类型进行检查,因为一旦声明了对象字面量类型,就无法更改它们。因此,索引签名是已知的。 相反,在你使用 interface 去声明变量时,它们在那一刻类型并不是最终的类型。由于 interfac 可以进行声明合并,所以总有可能将新成员添加到同一个 interface 定义的类型上。
再结合第2点 ‘声明合并’ 的讲解, 这样就很好理解了。就是说 interface 定义的类型是不确定的, 后面再来一个:
interface propType{
title:number
}
这样propType类型就被改变了。
参考资料
https://mp.weixin.qq.com/s/Y96lcMspyQ5WvXfoI61USg
|