Typescript

Typescript 的理解，与 JavaScript 的区别

理解： Typescript 是 JavaScript 的超集，支持 ES6 语法，支持面向对象编程的概念，比如类、接口、继承、泛型等

特性：

• 类型批注和编译时的类型检查：在编译时批注变量类型
• 类型推断：ts 中没有批注变量类型会自动推断变量的类型
• 类型擦除：
• 接口：ts 中用接口来定义对象的类型
• 枚举
• Mixin
• 泛型编程
• 名字空间
• 元祖

Typescipt 数据类型新增有哪些？

• tuple （元祖类型）：赋值的类型、位置、个数需要和定义（生明）的类型、位置、个数一致
• enum （枚举类型）：用于取值被限定在一定范围内的场景
• any （任意类型）
• void 类型：用于标识方法返回值的类型，表示该方法没有返回值
• never 类型：一般用来指定那些总是会抛出异常、无限循环

Typescript 中枚举类型的理解

枚举就是一个对象的所有可能取值的集合

类型可以分成：

• 数字枚举：没有赋值，但默认是数字类型，而且默认从 0 开始依次累加
• 字符串枚举
• 异构枚举：数字枚举和字符串枚举结合起来混合使用

Typescript 中接口的理解

简单来讲，一个接口所描述的是一个对象相关的属性和方法，但并提供具体创建次对象实例的方法

特点：

1. 可继承
2. 定义的属性必传
3. 可类型推断

interface User {
    name: string
    age?: number // 不是必传
    readonly isMale: boolean // 只读属性
    say: (words: string) => string
}

Typescript 中类的理解

类是一种用户定义的引用数据类型，也称类类型

TypeScript 中的高级类型

• 交叉类型：通过 & 将多个类型合并为一个类型，包含了所需的所有类型特征，本质上是一种并的操作
• 联合类型：通过 | 符号，标识其类型为连接的多个类型中的任意一个，本质上是一个交的关系
• 类型别名：类型别名会给一个类型起个新名字，类型别名有时和接口很像，但是可以作用于原始值、联合类型、元祖以及其他任何你需要手写的类型
• 类型索引：keyof 类似于 Object.key ，用于获取一个接口中的 key 的联合类型
• 类型约束：通过关键字 extend 进行约束，不同于在 class 后使用的 extends 的继承作用，泛型内使用的主要作用是对泛型加以约束
• 映射类型：通过 in 关键字做类型的映射，遍历已有接口的 key 或者是遍历联合类型
• 条件类型：条件类型的语法规则和三元表达式一致，经常用于一些类型不确定的情况

Typescript 中泛型的理解

泛型程序设计是程序设计语言的一种风格或范式

应用场景：在定义函数、接口或者类的时候，不遇险定义好具体的类型，而是在使用的时候指定类型的一种特征的时候，这种情况下就可以使用泛型。

TypeScript 中函数的理解？

区别：

• 从定义的方式而言， TypeScript 声明函数需要定义参数类型或者返回值的类型
• TypeScript  在参数中，添加可选参数（？）供使用者选择
• TypeScript 添加函数重载功能，使用者只需要通过查看函数声明的方式，即可知道函数传递格式以及类型

TypeScript 装饰器

装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问符、属性或者参数，是一种不改变原类和使用继承的情况下，动态地扩展对象功能。实质上就是一个函数

可以装饰：类、方法\属性、参数、访问器

优点：

• 代码可读性变强了，装饰器命名相当于一个注释
• 在不改变原有代码情况下，对原来功能进行扩展

TypeScript 中命名空间和模块的理解？区别？

模块：TypeScript 与 ES6一样，任何包含顶级 import 或者 export的文件都被当成一个模块，如果没有，那么它的内容被视为全局可见

命名空间：本质上是一个对象，作用是将一系列相关的全局变量组织到一个对象的属性

区别：

• 命名空间是位于全局命名空间下的一个普通的带有名字的 Javascript 对象,使用起来十分容易。但就像其他的全局命名空间污染一样，它很难去识别组件之间的依赖关系，尤其是在大型应用中
• 像命名空间一样，模块可以包含代码和声明。不同的是模块可以声明它的依赖
• 在正常的 TS 项目开发过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编辑器编写代码的时候参考使用

Vue 项目中使用 TypeScript 

需要引入 vue-property-decorator ,其是基于 vue-class-component 库而来，这个库是 Vue 官方推出的一个使用 class 方式来开发 vue 单文件组件的库