那 type 和 interface 难道都可以随便用，总得有个区别吧。

两者相同点：

都可以定义一个对象或函数
都允许继承
都可以定义一个对象或函数

定义对象上文已经说了，我们来看一下如何定义函数。

type addType = (num1:number,num2:number)




    
 => number
interface addType {
    (num1:number,num2:number):number
// 这两种写法都可以定义函数类型
const add:addType = (num1, num2) => {
    return num1 + num2
都允许继承
 
我们定义一个 Person 类型和 Student 类型，Student 继承自 Person，可以有下面四种方式
 
// interface 继承 interface
interface Person { 
  name: string 
interface Student extends Person { 
  grade: number 
const person:Student = {
  name: 'lin',
  grade: 100
// type 继承 type
type Person = { 
  name: string 
type Student = Person & { grade: number  }   // 用交叉类型
// interface 继承 type
type Person = { 
  name: string 
interface Student extends Person { 
  grade: number 
// type 继承 interface
interface Person { 
  name: string 
type Student = Person & { grade: number  }   // 用交叉类型
interface 使用 extends 实现继承， type 使用交叉类型实现继承
 
两者不同点：
 
interface（接口） 是 TS 设计出来用于定义对象类型的，可以对对象的形状进行描述。
 
type 是类型别名，用于给各种类型定义别名，让 TS 写起来更简洁、清晰。
 
type 可以声明基本类型、联合类型、交叉类型、元组，interface 不行
 
interface可以合并重复声明，type 不行
 
合并重复声明：
 
interface Person {
    name: string
interface Person {         // 重复声明 interface，就合并了
    age: number
const person: Person = {
    name: 'lin',
    age: 18
重复声明 type ，就报错了
 
type Person = {
    name: string
type Person = {     // Duplicate identifier 'Person'
    age: number
const person: Person = {
    name: 'lin',
    age: 18
这两者的区别说了这么多，其实本不该把这两个东西拿来做对比，他们俩是完全不同的概念。
 
interface 是接口，用于描述一个对象。
 
type 是类型别名，用于给各种类型定义别名，让 TS 写起来更简洁、清晰。
 
只是有时候两者都能实现同样的功能，才会经常被混淆
 
平时开发中，一般使用组合或者交叉类型的时候，用 type。
 
一般要用类的 extends 或 implements 时，用 interface。
 
其他情况，比如定义一个对象或者函数，就看你心情了。
 
类型保护
 如果有一个 getLength 函数，入参是联合类型 number | string，返回入参的 length，
 
function getLength(arg: number | string): number {
    return arg.length
从上文可知，这么写会报错，因为 number 类型上没有 length 属性。
 
这个时候，类型保护（Type Guards）出现了，可以使用 typeof 关键字判断变量的类型。
 
我们把 getLength 方法改造一下，就可以精准地获取到 string 类型的 length 属性了，
 
function getLength(arg: number | string): number {
    if(typeof arg === 'string') {
        return arg.length
    } else {
        return arg.toString().length
之所以叫类型保护，就是为了能够在不同的分支条件中缩小范围，这样我们代码出错的几率就大大降低了。
 
类型断言
 上文的例子也可以使用类型断言来解决。
 
类型断言语法：
 
值 as 类型
使用类型断言来告诉 TS，我（开发者）比你（编译器）更清楚这个参数是什么类型，你就别给我报错了，
 
function getLength(arg: number | string): number {
    const str = arg as string
    if (str.length) {
        return str.length
    } else {
        const number = arg as number
        return number.toString().length
注意，类型断言不是类型转换，把一个类型断言成联合类型中不存在的类型会报错。
 
function getLength(arg: number | string): number {
    return (arg as number[]).length
字面量类型
 有时候，我们需要定义一些常量，就需要用到字面量类型，比如，
 
type ButtonSize = 'mini' | 'small' | 'normal' | 'large'
type Sex = '男' | '女'
这样就只能从这些定义的常量中取值，乱取值会报错，
 
泛型，是 TS 比较难理解的部分，拿下了泛型，对 TS 的理解就又上了一个台阶，对后续深入学习帮助很大。
 
为什么需要泛型？
 如果你看过 TS 文档，一定看过这样两段话：
 
软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
 
在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
 
简直说的就不是人话，你确定初学者看得懂？
 
我觉得初学者应该要先明白为什么需要泛型这个东西，它解决了什么问题？而不是看这种拗口的定义。
 
我们还是先来看这样一个例子，体会一下泛型解决的问题吧。
 
定义一个 print 函数，这个函数的功能是把传入的参数打印出来，再返回这个参数，传入参数的类型是 string，函数返回类型为 string。
 
function print(arg:string):string {
    console.log(arg)
    return arg
现在需求变了，我还需要打印 number 类型，怎么办？
 
可以使用联合类型来改造：
 
function print(arg:string | number):string | number {
    console.log(arg)
    return arg
现在需求又变了，我还需要打印 string 数组、number 数组，甚至任何类型，怎么办？
 
有个笨方法，支持多少类型就写多少联合类型。
 
或者把参数类型改成 any。
 
function print(arg:any):any {
    console.log(arg)
    return arg
且不说写 any 类型不好，毕竟在 TS 中尽量不要写 any。
 
而且这也不是我们想要的结果，只能说传入的值是 any 类型，输出的值是 any 类型，传入和返回并不是统一的。
 
这么写甚至还会出现bug
 
const res:string = print(123) 
定义 string 类型来接收 print 函数的返回值，返回的是个 number 类型，TS 并不会报错提示我们。
 
这个时候，泛型就出现了，它可以轻松解决输入输出要一致的问题。
 
注意：泛型不是为了解决这一个问题设计出来的，泛型还解决了很多其他问题，这里是通过这个例子来引出泛型。
 
泛型基本使用
 处理函数参数
 我们使用泛型来解决上文的问题。
 
泛型的语法是 <> 里写类型参数，一般可以用 T 来表示。
 
function print<T>(arg:T):T {
    console.log(arg)
    return arg
这样，我们就做到了输入和输出的类型统一，且可以输入输出任何类型。
 
如果类型不统一，就会报错：
 
泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。
 
泛型的写法对前端工程师来说是有些古怪，比如 <> T ，但记住就好，只要一看到 <>，就知道这是泛型。
 
我们在使用的时候可以有两种方式指定类型。
 
定义要使用的类型
 TS 类型推断，自动推导出类型
 
print<string>('hello')  // 定义 T 为 string
print('hello')  // TS 类型推断，自动推导类型为 string
我们知道，type 和 interface 都可以定义函数类型，也用泛型来写一下，type 这么写：
 
type Print = <T>(arg: T) => T
const printFn:Print = function print(arg) {
    console.log(arg)
    return arg
interface 这么写：
 
interface Iprint<T> {
    (arg: T): T
function print<T>(arg:T) {
    console.log(arg)
    return arg
const myPrint: Iprint<number> = print
默认参数
 如果要给泛型加默认参数，可以这么写：
 
interface Iprint<T = number> {
    (arg: T): T
function print<T>(arg:T) {
    console.log(arg)
    return arg
const myPrint: Iprint = print
这样默认就是 number 类型了，怎么样，是不是感觉 T 就如同函数参数一样呢？
 
处理多个函数参数
 现在有这么一个函数，传入一个只有两项的元组，交换元组的第 0 项和第 1 项，返回这个元组。
 
function swap(tuple) {
    return [tuple[1], tuple[0]]
这么写，我们就丧失了类型，用泛型来改造一下。
 
我们用 T 代表第 0 项的类型，用 U 代表第 1 项的类型。
 
function swap<T, U>(tuple: [T, U]): [U, T]{
    return [tuple[1], tuple[0]]
这样就可以实现了元组第 0 项和第 1 项类型的控制。
 
传入的参数里，第 0 项为 string 类型，第 1 项为 number 类型。
 
在交换函数的返回值里，第 0 项为 number 类型，第 1 项为 string 类型。
 
第 0 项上全是 number 的方法。
 
第 1 项上全是 string 的方法。
 
函数副作用操作
 泛型不仅可以很方便地约束函数的参数类型，还可以用在函数执行副作用操作的时候。
 
比如我们有一个通用的异步请求方法，想根据不同的 url 请求返回不同类型的数据。
 
function request(url:string) {
    return fetch(url).then(res => res.json())
调一个获取用户信息的接口：
 
request('user/info').then(res =>{
    console.log(res)
这时候的返回结果 res 就是一个 any 类型，非常讨厌。
 
我们希望调用 API 都清晰的知道返回类型是什么数据结构，就可以这么做：
 
interface UserInfo {
    name: string
    age: number
function request<T>(url:string): Promise<T> {
    return fetch(url).then(res => res.json())
request<UserInfo>('user/info').then(res =>{
    console.log(res)
这样就能很舒服地拿到接口返回的数据类型，开发效率大大提高：
 
约束泛型
 假设现在有这么一个函数，打印传入参数的长度，我们这么写：
 
function printLength<T>(arg: T): T {
    console.log(arg.length)
    return arg
因为不确定 T 是否有 length 属性，会报错：
 
那么现在我想约束这个泛型，一定要有 length 属性，怎么办？
 
可以和 interface 结合，来约束类型。
 
interface ILength {
    length: number
function printLength<T extends ILength>(arg: T): T {
    console.log(arg.length)
    return arg
这其中的关键就是 ，让这个泛型继承接口 ILength，这样就能约束泛型。
 
我们定义的变量一定要有 length 属性，比如下面的 str、arr 和 obj，才可以通过 TS 编译。
 
const str = printLength('lin')
const arr = printLength([1,2,3])
const obj = printLength({ length: 10 })
这个例子也再次印证了 interface 的 duck typing。
 
只要你有 length 属性，都符合约束，那就不管你是 str，arr 还是obj，都没问题。
 
当然，我们定义一个不包含 length 属性的变量，比如数字，就会报错：
 
泛型的一些应用
 使用泛型，可以在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型。
 
泛型约束类
 定义一个栈，有入栈和出栈两个方法，如果想入栈和出栈的元素类型统一，就可以这么写：
 
class Stack