Ts 使用总结/可用于面试

typescript中interface与type的区别

1. interface可以合并同名接口，type不可以

 interface Person {
     name:String
 }
 interface Person {
     age: Number
 }
 const person: Person = {name:'zs',age:12}

2. type支持的声明格式，interface不支持

类型别名可以用于其它类型 （联合类型、元组类型、基本类型（原始值）），interface不支持，接口只能表示function，object, class类型

type PersonName = {name:string}
type PersonAge = {age:number}
​
// union(联合)
type person = PersonName|PersonAge;
​
//tuple(元祖)
type Data = [PersonName,PersonAge]
​
//primitive(原始值)
type age = number;
​
// tyoeof的返回值
let age = 12
type name = typeof age;

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

type Keys = 'firstname' | 'surname';
​
type DudeType = {
    [key in Keys] :string; //映射每个参数
};
​
const test: DudeType = {
    firstname: 'zhang',
    surname: 'san'
}

typescript中interface与type的相同点

1.都可以描述一个对象或者函数

interface

interface People {
    name: string
    age: number
}
interface setPeople {
    (name:string,age:number):void
}
type

type People = {
    name: string
    age: number
};
type setPeople = (name:string,age:12)=>void;

2.都允许相互拓展属性，但是语法不同

interface extends interface 关键词：extends

interface Name {
    name:string;
}
interface People extends Name {
    age:number;
}

interface extends type 关键词：extends

type Name = {
    name:string;
}
type People = Name & {age:number}
type extends type 关键词：&

type Name = {
    name:string;
}
type People = Name & {age:number}
type extends interface 关键词：&

interface Name = {
    name:string;
}
type People = Name & {age:number}

总结

interface 可以继承 interface , 继承type, 使用extends关键字。type也可以继承type，也可以继承interface，使用 &

只要是interface扩展属性无论是interface还是type都使用关键字extends;type的扩展属性无论是type还是interface都是使用关键字&

你如何理解Typescript中的类?列出类的一些特性

TypeScript是一种面向对象的语言，支持OOP（面向对象编程）三大特性：封装，继承与多态。TypeScript的类是一组具有公共属性的对象，是创建对象的模板。“class”关键字声明一个类。Typescript的类除了实现所有ES6中的类的功能，还添加类一些新的用法。

其特性如下：

封装：

将对数据的操作细节隐藏起来，只暴露对外的接口。

继承：

子类除了拥有父类的所有特性外，还有一些更具体的特性。

多态：

由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。

存取器：

用以改变属性的读取和赋值行为。

抽象类：

抽象类是供其他类继承的基类，抽象类不允许被实例化。

修饰符：

是一些关键字，用于限定成员或类型的性质。

接口：

不同类之间公有的属性或方法，可以抽象成一个接口。

应用场景

除了日常借助类的特性完成日常业务代码，还可以将类（class）也可以作为接口，尤其在 React 工程中是很常用的，

如下：

export default class Carousel extends React.Component<Props, State> {}

由于组件需要传入 props 的类型 Props ，同时有需要设置默认 props 即 defaultProps，这时候更加适合使用class作为接口

先声明一个类，这个类包含组件 props 所需的类型和初始值：

// props的类型
export default class Props {
  public children: Array<React.ReactElement<any>> | React.ReactElement<any> | never[] = []
  public speed: number = 500
  public height: number = 160
  public animation: string = 'easeInOutQuad'
  public isAuto: boolean = true
  public autoPlayInterval: number = 4500
  public afterChange: () => {}
  public beforeChange: () => {}
  public selesctedColor: string
  public showDots: boolean = true
}

当我们需要传入 props 类型的时候直接将 Props 作为接口传入，此时 Props 的作用就是接口，而当需要我们设置defaultProps初始值的时候，我们只需要:

public static defaultProps = new Props()

Props 的实例就是 defaultProps 的初始值，这就是 class作为接口的实际应用，我们用一个 class 起到了接口和设置初始值两个作用，方便统一管理，减少了代码量