【学习笔记】TypeScript中interface和type的区别
TypeScript中interface和type的区别
原文：https://github.com/SunshowerC/blog/issues/7
interface VS type
TypeScript中定义类型的两种方式
- 接口（interface）
- 类型别名（type alias）
interface只能定义对象类型
type声明的方式可以定义组合类型、交叉类型和原始类型
相同点
1. 都可以描述一个对象或者函数
interface
interface User {
name: string;
age: number;
}
interface SetUser {
(name: string, age: number): void;
}
type
type User = {
name: string;
age: number
}
type SetUser = (name: string, age: number): void;
2. 都允许拓展（extends）
interface和type都可以拓展，并且两者并不是互相独立的，也就是说interface可以extends type, type也可以extends interface. 虽然效果差不多，但是语法不同。
interface extends interface
interface Name {
name: string;
}
interface User extends Name {
age: number;
}
type extends type
type Name = {
name: string;
}
type User = Name & { age: number }
interface extends type
type Name = {
name: string;
}
interface User extends Name {
age: number;
}
type extends interface
interface Name {
name: string;
}
type User = Name & {
age: number;
}
不同点
1. type可以声明基本类型别名、联合类型、元祖等类型
// 基本类型别名
type Name = string;
// 联合类型
interface Dog {
wong()
}
interface Cat {
miao();
}
type Pet = Dog | Cat;
// 具体定义数组每个位置的类型
type PetList = [Dog, Pet];
2. type语句中还可以使用typeof获取实例的类型进行赋值
// 当你想要获取一个变量的类型时，使用typeof
let div = document.createElement('div');
type B = typeof div;
3. type其他骚操作
type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T> = (data: T) => void;
type Pair<T> = [T, T];
type Coordinates = Pair<number>;
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
4. interface能够声明合并
interface User {
name: string;
age: number;
}
interface User {
sex: string;
}
User接口为：
{
name: string;
age: number;
sex: string;
}
总结
一般来说，能用interface实现，就用interface，如果不能就用type
Type Aliases的官方文档：https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-aliases
Type aliases create a new name for a type. Type aliases are sometimes similar to interfaces, but can name primitives, unions, tuples, and any other types that you’d otherwise have to write by hand.
（类型别名为类型创建一个新名称。类型别名有时类似于接口，但可以命名原语、联合、元组和其他任何类型，否则您必须手动编写这些类型）
type Second = number;
let timeInSecond: number = 10;
let time: Second = 10;
Aliasing doesn’t actually create a new type - it creates a new name to refer to that type. Aliasing a primitive is not terribly useful, though it can be used as a form of documentation.
（别名实际上并不会创建一个新类型——它只是创建一个新名称来引用该类型。尽管可以将原语用作一种文档形式，但给原语起一个别名并不是非常有用）
Just like interfaces, type aliases can also be generic - we can just add type parameters and use them on the right side of the alias declaration:
（就像接口一样，类型别名也可以是泛型的-我们可以添加类型参数并在别名声明的右侧使用它们）
type Container<T> = { value: T };
We can also have a type alias refer to itself in a property:
（我们也可以有一个类型别名引用自己的属性）
type Tree<T> = {
value: T;
left?: Tree<T>;
right?: Tree<T>
};
脑壳儿疼~~
