typescript中的type关键字

关键字"/>

typescript中的type关键字

type定义：

Type又叫类型别名（type alias）,作用是给一个类型起一个新名字，不仅支持interface定义的对象结构，还支持基本类型、联合类型、交叉类型、元组等任何你需要手写的类型。

type num = number; // 基本类型
type stringOrNum = string | number; // 联合类型
type person = {name: string}; // 对象类型
type user = person & { age: number } // 交叉类型
type data = [string, number]; // 元组
type fun = () => void; // 函数类型

type和interface的异同：

相同点

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.都可以进行拓展

        interface可以扩展，type可以通过交叉实现interface的extends行为，interface可以extends type，同时type也可以与interface类型交叉 。

// interface通过extends实现继承
interface userName {name: string;
}
interface user extends userName {age: number
}
let stu:user = {name: 'wang', age: 10}// interface的extends扩展可以通过type交叉(&)类型实现
type userName = {name: string;
}
type user = userName & {age: number}
let stu:user={name: 'wang', age: 18}// interface扩展type
type name = {name: string;
}
interface user extends name {age: number;
}
let stu:user={name: 'wang', age: 89}// type与interface交叉
interface name {name: string;
}
type user = name & {age: number;
}
let stu:user={name:'wang', age: 18}

不同点：

1.类型别名可以用于其它类型 （联合类型、元组类型、基本类型（原始值）），interface不支持

2.interface 可以多次定义来合并声明，type 不支持

interface user {name: string;age: number;
}
interface user {sex: string;
}
//user实际接口为：
{name: string;age: number;sex: string;
}

3.type 能使用 in 关键字生成映射类型，但 interface 不行

type keys = 'firstname' | 'surname';type nameTypes = {[key in Keys]: string;
};
const test: nameTypes = {firstname: 'Pawel',surname: 'Grzybek',
};

4.默认导出方式不同

// inerface 支持同时声明，默认导出 而type必须先声明后导出
export default interface name {name: string;
};
// 同一个js模块只能存在一个默认导出type typeName = {name: string};export default typeName

5.在type中可以使用泛型

type Zoo<T> = T;
const num : Zoo<number> = 3;type callback<T> = (data: T) => void;

6.type可以使用typeof获取实例类型

let div = document.createElement('div');
type divType = typeof div;