联结类型
联结类型示意取值能够为多种类型中的一种,应用 |
宰割每个类型。
let a: number | string | boolean;a = 100;a = 'xman';a = true;
函数中应用:
const test = (info: string | number) => { // ...}
束缚取值
const num: 1 | 2 = 1;type isMan = true | false;type EventNames = 'click' | 'scroll' | 'mousemove';
以上1 | 2, true | false, 'click' | 'scroll' | 'mousemove'被称为字面量类型,别离为数字、布尔、字符串字面量类型,能够用来束缚取值只能是其中几个值中的一个。
穿插类型
穿插类型是将多个类型合并为一个类型,应用&
定义穿插类型。
能够将多个接口类型合并成一个类型,实现等同于接口继承的成果
interface A { name: string; age: number;}interface B { name: string; height: string;}type Person = A & B; // 相当于求并集let person: Person = { name: 'xman', age: 18, height: '60kg'};
留神:
原子类型能够合并吗?
如果仅仅把根本类型、字面量类型、函数类型等原子类型合并成穿插类型,是没有任何用途的。因为任何类型都不能满足同时属于多种原子类型。type Useless = string & number; // 就是个never
合并的接口类型存在同名属性是什么成果?
如果同名属性的类型兼容,比方一个是number,另一个是number的子类型、数字字面量类型,合并后属性的类型就是两者中的子类型。interface A { name: string; age: number; id: number;}interface B { name: string; height: string; id: string;}type Person = A & B; let person: Person = { name: 'xman', age: 18, height: '60kg', id: 1};// Type 'number' is not assignable to type 'number & string'. // Type 'number' is not assignable to type 'string'.
以上代码提醒name属性值呈现类型谬误。
interface A { name: string; age: number; id: number;}interface B { name: string; height: string; id: 1; // 数字字面量类型为1}type Person = A & B; let person: Person = { name: 'xman', age: 18, height: '60kg', id: 1};
以上代码中interface B的name属性的类型就是数字字面量类型1,因而咱们不能把任何非1之外的值赋值为id属性;
上面看下同名属性非根本数据类型的合并状况:interface A { info: { name: string }}interface B { info: { age: number }}interface C { info: { bool: boolean }}type ABC = A & B & C;let abc: ABC = { info: { name: 'xman', age: 18, bool: true }}
编译胜利,后果如下:
var abc = { info: { name: 'xman', age: 18, bool: true }};
类型别名
type: 其作用就是给类型起一个新名字,能够作用于原始值(根本类型)、联结类型、元祖以及其余任何你须要手写的类型。
例子:// 根本类型type Num = Number;let n: Num = 1;// 联结类型type Shape = { kind: "circle"; radius: number } | { kind: "square"; x: number } | { kind: "triangle"; x: number; y: number };function area(s: Shape) { if (s.kind === "circle") { return Math.PI * s.radius * s.radius; } else if (s.kind === "square") { return s.x * s.x; } else { return (s.x * s.y) / 2; }} // 对象type UserInfo = {name: string};// 函数type GetInfo = () => string;// 元祖 type Size = [number, number];let x: Size = [10, 99.9]; `````留神:` 起别名不会新建一个类型 - 它创立了一个新 名字来援用那个类型。给根本类型起别名通常没什么用。 # type与interface区别 ### 1. 都能够形容一个对象或者函数 interface
interface IPerson {
name: string;
age: number;
}
interface SetPerson {
(name: string, age: number):void;
}
type
type Person = {
name: string;
age: number;
}
type SetPerson = (name: string, age: number) => void;
`注:` 在ts编译成js后,所有的接口和type 都会被擦除掉 ### 2. 拓展接口能够扩大,但type不能extends和implement,然而type能够通过穿插类型实现interface的extends行为。interface 能够extends type,同时type也能够与interface类型穿插1. interface extends interface, type 穿插类型能够实现
interface IAnimal {
name: string;
}
interface IPerson extends IAnimal{
age: number;
}
// type 穿插类型能够实现
type Animal = {
name: string;
}
type Person = Animal & { age: number};
2. interface extends type, type 与 interface 穿插
type Animal = {
name: string;
}
interface IPerson extends Animal {
age: number;
}
// type 与 interface 穿插
interface IAnimal {
name: string
}
type Person = IAnimal & {
age: number;
}
### 3. Implements 类能够以雷同的形式实现接口或类型别名。然而请留神,类和接口被认为是动态的。因而,它们不能实现/扩大命名联结类型的类型别名
interface Point {
x: number;
y: number;
}
class SomePoint implements Point {
x: 1;
y: 2;
}
type Point2 = {
x: number;
y: number;
};
class SomePoint2 implements Point2 {
x: 1;
y: 2;
}
type PartialPoint = { x: number; } | { y: number; };
// A class may only implement another class or interface.
class SomePartialPoint implements PartialPoint {
x: 1;
y: 2;
}
### 4. extends class类定义会创立两个货色:类的实例类型和一个构造函数。 因为类能够创立出类型,所以你可能在容许应用接口的中央应用类。
class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
### 5. type能够申明根本类型别名、联结类型、元祖等类型
type Num = Number;
// 联结类型
type Shape = { kind: "circle"; radius: number } | { kind: "square"; x: number } | { kind: "triangle"; x: number; y: number };
// 元祖
type Size = [number, number];
type还能够应用typeof获取实例的类型进行赋值
let div = document.createElement('div');
type B = typeof div;
### 6. 申明合并 接口能够定义屡次,并将被视为单个接口(即所有申明属性的合并),而type不能定义屡次
interface IPerson {
name: string;
age: number;
}
interface IPerson {
height: string;
}
let person:IPerson = {
name: 'xman',
age: 18,
height: '60kg'
}
### 7. 映射类型 type 能应用in关键字生成映射类型,但interface不行 语法与索引签名的语法类型,外部应用了 for .. in。 具备三个局部:- 类型变量 K,它会顺次绑定到每个属性。- 字符串字面量联结的 Keys,它蕴含了要迭代的属性名的汇合。- 属性的后果类型。
type Keys = 'name' | 'height';
type Person = {
}
let person: Person = {
name: 'xman',
height: '60kg'
}
### 其余
export default interface IPerson {
name: string;
age: number;
}
type Person = {
name: string;
}
export default Person;
# 参考资料 [https://www.tslang.cn/docs/handbook/declaration-merging.html](https://www.tslang.cn/docs/handbook/declaration-merging.html) [Interfaces vs Types in TypeScript - Stack Overflow](https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript)