1. 环境搭建

  1. 下载安装Node.js
  2. 使用npm命令安装 typescript
    npm i -g typescript
  3. 创建 .ts 文件后，输入命令 tsc xxx.ts即可编译为 .js 文件

    2. 基本类型

    TypeScript中的基本类型：
  • 类型声明
    • 类型声明是TS非常重要的一个特点；
    • 通过类型声明可以指定TS中变量（参数、形参）的类型；
    • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；
    • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；
    • 语法：
      • let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ … }
  • 自动类型判断
    • TS拥有自动的类型判断机制
    • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
    • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
  • 类型： | 类型 | 例子 | 描述 | | —- | —- | —- | | number | 1, -33, 2.5 | 任意数字 | | string | ‘hi’, “hi”, hi | 任意字符串 | | boolean | true、false | 布尔值true或false | | 字面量 | 其本身 | 限制变量的值就是该字面量的值 | | any | | 任意类型 | | unknown | | 类型安全的any | | void | 空值（undefined） | 没有值（或undefined） | | never | 没有值 | 不能是任何值，用于报错 | | object | {name:’孙悟空’} | 任意的JS对象 | | array | [1,2,3] | 任意JS数组 | | tuple | [4,5] | 元素，TS新增类型，固定长度数组 | | enum | enum{A, B} | 枚举，TS中新增类型 |

  1. number

    1. let decimal: number = 6;
    2. let hex: number = 0xf00d;
    3. let binary: number = 0b1010;
    4. let octal: number = 0o744;
    5. let big: bigint = 100n;

  2. boolean

    1. let isDone: boolean = false;

  3. string ```typescript let color: string = “blue”; color = ‘red’;

let fullName: string = Bob Bobbington; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}.

I’ll be ${age + 1} years old next month.`;

  2. 4. 字面量
  3. - 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
  4. - 竖线分割 的是 **联合类型**
  5. ```typescript
  6. let color: 'red' | 'blue' | 'black';
  7. let num: 1 | 2 | 3 | 4 | 5;
  1. any
  • 表示任意类型，相当于对改变量关闭了TS的类型检测
  • 如果声明没有赋值和指定类型，则为 隐式any
  • 当将any 类型的变量赋值给其他变量时，则都会变成 any ```typescript let d: any = 4; d = ‘hello’; d = true;

let b // 隐式any

  2. 6. unknown
  3. ```typescript
  4. let notSure: unknown = 4;
  5. notSure = 'hello';

  1. void

    1. let unusable: void = undefined;
    2. function fn(): void {
    3. return;
    4. }

  2. never

    1. function error(message: string): never {
    2. throw new Error(message);    // 常用于报错
    3. }

  3. object（没啥用） ```typescript let obj: object = {};

// 必须是一模一样的类型和属性，? 表示可选属性 let b: { name: string, age?: number }

// [propName: stirng]: any 表示任意类型的属性 let c: { name: stirng, [propName: stirng]: any } c = { name: ‘liwker’, age: 22, male: true }

// 设置函数结构的类型声明 let fn: (a: number, b: number) => number

  2. 10. array
  3. ```typescript
  4. let list: number[] = [1, 2, 3];    // 类型[] 推荐
  5. let list: Array<number> = [1, 2, 3];    // Array<类型>
  7. // 联合类型
  8. let arr: (number | string)[] = [1, 'Likwer', 3]

  1. tuple

    1. let x: [string, number];    // 表示只有两个值，一个string 一个number
    2. x = ["hello", 10];

  2. enum

  • 枚举成员相当于 命名常量
  • 枚举成员是有值的，默认 从 0开始
  • 枚举成员的值为数字的枚举，称为 数字枚举
  • 字符串枚举：每个成员都必须有初始值 ```typescript enum Color { Red, // 0 Green, // 1 Blue, // 2 } let c: Color = Color.Green; // 1

enum Color { Red = 1, Green, // 2 Blue, // 3 } let c: Color = Color.Green; // 2

enum Color { Red = ‘Red’, Green = 2, Blue = ‘Blue’, } let c: Color = Color.Red; // ‘Red’

  2. 13. function
  3. ```typescript
  4. function fn1(x: number, y: number): number {
  5.   // 如果没指定函数返回值的 类型，那么就是 return决定
  6.   return x + y
  7. }
  9. // 箭头函数不指定返回值的 类型
  10. const fn2 = (x: number, y: number) => {
  11.   return x + y
  12. }
  13. // 指定返回值的 类型
  14. const fn3: (x: number, y: number) => number = (x ,y) {
  15.   return x + y
  16. }

类型断言

  • 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

    • 第一种

      1. let someValue: unknown = "this is a string";
      2. let strLength: number = (someValue as string).length;

    • 第二种

      1. let someValue: unknown = "this is a string";
      2. let strLength: number = (<string>someValue).length;

      使用场景： ```typescript const aLink = document.getElementById(‘link’) // 此时获取的这个dom元素类型为 HTMLElement，但是呢访问不到 href属性 // 用类型断言就可以，HTMLAnchorElement 是HTMLElement的子类型，可以访问href属性 const link = document.getElementById(‘link’) as HTMLAnchorElement

// 获取dom元素的类型 // 选中元素后，在浏览器控制台里输入 console.dir($0) 查看proto即可

  1. **类型别名 type**
  2. ```typescript
  3. type myType = string | number | true    // 这里type定义了 联合类型 的别名
  4. let j: myType = 'Liwker'
  5. let k: myType = false // 报错
  7. type CustomArray = (number | sting)[]
  8. let arr1: CustomArray = [1, 'Liwker']

typeof
在ts中 typeof 除了js中有的获取数据类型外，还可以在类型上下文中引用变量或属性的类型（类型查询）
使用场景：根据已有变量的值，获取该值的类型，来简化类型书写

  1. let p = { x: 1, y: 2 }
  2. function fn(point: { x: number, y: number }) {...}
  3. // 使用typeof
  4. function fn(point: typeof p) {..}
  6. let num: typeof p.x    // num: number

注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（如：函数调用返回的类型）

3. 编译

3.1 自动编译文件

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
tsc xxx.ts -w

自动编译整个项目
如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译
tsc -w即可自动编译所有

配置选项：

3.2 include

  • 定义希望被编译文件所在的目录

  • 默认值：["**/*"]，*表示任意目录，表示任意文件

    1. "include":["src/**/*", "tests/**/*"]

    上述示例中，所有src目录和tests目录下的文件都会被编译

    3.3 exclude

  • 定义需要排除在外的目录

  • 默认值：["node_modules", "bower_components", "jspm_packages"]

    1. "exclude": ["./src/hello/**/*"]

    上述示例中，src下hello目录下的文件都不会被编译

    3.4 extends

  • 定义被继承的配置文件

    1. "extends": "./configs/base"

    上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息

    3.5 files

  • 指定被编译文件的列表，只有需要编译的文件少时才会用到

    1. "files": [
    2.   "core.ts",
    3.   "sys.ts",
    4.   "types.ts",
    5.   "scanner.ts",
    6.   "parser.ts",
    7.   "utilities.ts",
    8.   "binder.ts",
    9.   "checker.ts",
    10.   "tsc.ts"
    11. ]

  • 列表中的文件都会被TS编译器所编译

    3.6 compilerOptions

  • 编译选项是配置文件中非常重要也比较复杂的配置选项

  • 在compilerOptions中包含多个子选项，用来完成对编译的配置

项目选项：

  1. target
    • 设置ts代码编译的目标版本
    • 可选值：
      • ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ES2021、ES2022、ESNext
        1. "compilerOptions": {
        2. "target": "ES6"
        3. }
  • 如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码
  1. lib
  • 指定代码运行时所包含的库（宿主环境），一般不动这个
  • 可选值：默认为浏览器环境
    • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ……
      1. "compilerOptions": {
      2. "target": "ES6",
      3. "lib": ["ES6", "DOM"],
      4. "outDir": "dist",
      5. "outFile": "dist/aa.js"
      6. }
  1. module
  • 设置编译后代码使用的模块化系统
  • 可选值：
    • CommonJS、UMD、AMD、System、ES6、ES2020、ESNext、None
      1. "compilerOptions": {
      2. "module": "es6"
      3. }
  1. outDir
  • 编译后文件的所在目录
  • 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
    1. "compilerOptions": {
    2.   "outDir": "./dist"
    3. }
    设置后编译后的js文件将会生成到dist目录

  1. outFile

    • 将所有的文件编译为一个js文件，一般也不会用
    • 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中
    • 示例：
      1. "compilerOptions": {
      2. "outFile": "./dist/app.js"
      3. }

  2. rootDir

    • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
    • 示例：
      1. "compilerOptions": {
      2. "rootDir": "./src"
      3. }

  3. allowJs

    • 是否对js文件编译，默认值：false

  4. checkJs

    • 是否对js文件进行检查（一般和 allowJs配套使用），默认值：false
    • 示例：
      1. "compilerOptions": {
      2. "allowJs": true,
      3. "checkJs": true
      4. }

  5. removeComments

    • 是否删除注释
    • 默认值：false
  6. noEmit
    • 不对代码进行编译
    • 默认值：false
  7. sourceMap
    • 是否生成sourceMap
    • 默认值：false

语法检查类：

  1. strict
    • 严格检查
    • 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
  2. alwaysStrict
    • 总是以严格模式对代码进行编译，默认值为 false
  3. noImplicitAny
    • 禁止隐式的any类型，默认值为 false
  4. noImplicitThis
    • 禁止类型不明确的this，默认值为 false
  5. strictBindCallApply
    • 严格检查bind、call和apply的参数列表
  6. strictFunctionTypes
    • 严格检查函数的类型
  7. strictNullChecks
    • 严格的空值检查
  8. strictPropertyInitialization
    • 严格检查属性是否初始化

额外检查

  1. noFallthroughCasesInSwitch
    • 检查switch语句包含正确的break
  2. noImplicitReturns
    • 检查函数没有隐式的返回值
  3. noUnusedLocals
    • 检查未使用的局部变量
  4. noUnusedParameters
    • 检查未使用的参数
  • 高级
  1. allowUnreachableCode
    • 检查不可达代码
    • 可选值：
      • true，忽略不可达代码
      • false，不可达代码将引起错误
  2. noEmitOnError
    • 有错误的情况下不进行编译
    • 默认值：false

      4. TypeScript打包

      webpack整合

      通常情况下，实际开发中我们都需要使用构建工具对代码进行打包；
      TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS；
      步骤如下：

      1. 初始化项目

      进入项目根目录，执行命令 npm init -y，创建package.json文件

      2. 下载构建工具

      命令如下：
      npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
      共安装了7个包:
  • webpack：构建工具webpack
  • webpack-cli：webpack的命令行工具
  • webpack-dev-server：webpack的开发服务器
  • typescript：ts编译器
  • ts-loader：ts加载器，用于在webpack中编译ts文件
  • html-webpack-plugin：webpack中html插件，用来自动创建html文件
  • clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录

    3. 配置webpack

    根目录下创建webpack的配置文件webpack.config.js： ```javascript const path = require(“path”); const HtmlWebpackPlugin = require(“html-webpack-plugin”); const { CleanWebpackPlugin } = require(“clean-webpack-plugin”);

module.exports = { mode: ‘production’, // 打包模式 optimization:{ minimize: false // 关闭代码压缩，可选 },

entry: “./src/index.ts”,

devtool: “inline-source-map”,

devServer: { contentBase: ‘./dist’ },

output: { path: path.resolve(__dirname, “dist”), filename: “bundle.js”, environment: { arrowFunction: false // 关闭webpack的箭头函数，可选 } },

resolve: { extensions: [“.ts”, “.js”] },

module: { rules: [ { test: /.ts$/, use: { loader: “ts-loader”
}, exclude: /node_modules/ } ] },

plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title:’TS测试’ }), ] }

  2. <a name="fabad294"></a>
  3. #### 4. 配置TS编译选项
  4. 根目录下创建tsconfig.json，配置可以根据自己需要
  5. ```json
  6. {
  7.    "compilerOptions": {
  8.        "target": "ES2015",
  9.        "module": "ES2015",
  10.        "strict": true
  11.    }
  12. }

5. 修改package.json配置

修改package.json添加如下配置

  1. {
  2.    ...
  3.    "scripts": {
  4.        "test": "echo \"Error: no test specified\" && exit 1",
  5.        "build": "webpack",
  6.        "start": "webpack serve --open"
  7.    },
  8.    ...
  9. }

6. 项目使用

在src下创建ts文件，并在并命令行执行npm run build对代码进行编译；
或者执行npm start来启动开发服务器；

Babel

除了webpack，开发中还经常需要结合babel来对代码进行转换；
以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中；

虽然TS在编译时也支持代码转换，但是只支持简单的代码转换； 对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换；

安装依赖包：
npm i -D @babel/core @babel/preset-env babel-loader core-js

共安装了4个包，分别是：

  • @babel/core：babel的核心工具
  • @babel/preset-env：babel的预定义环境
  • @babel-loader：babel在webpack中的加载器
  • core-js：core-js用来使老版本的浏览器支持新版ES语法

修改webpack.config.js配置文件

  1. module.exports = {
  2.   // ...
  3.   module: {
  4.     rules: [
  5.       {
  6.         test: /\.ts$/,
  7.         use: [
  8.           {
  9.             loader: "babel-loader",
  10.             options: {
  11.               presets: [
  12.                 [
  13.                   // 指定环境的插件
  14.                   "@babel/preset-env",
  15.                   // 配置信息
  16.                   {
  17.                     // 要兼容的目标浏览器
  18.                     "targets": {
  19.                       "chrome": "58",
  20.                       "ie": "11"
  21.                     },
  22.                     // 指定corejs的版本
  23.                     "corejs": "3",
  24.                     // 使用corejs的方式，'usage'表示 按需加载
  25.                     "useBuiltIns": "usage"
  26.                   }
  27.                 ]
  28.               ]
  29.             }
  30.           },
  31.           {
  32.             loader: "ts-loader",
  33.           }
  34.         ],
  35.         exclude: /node_modules/
  36.       }
  37.     ]
  38.   }
  39. }

如此一来，使用ts编译后的文件将会再次被babel处理；
使得代码可以在大部分浏览器中直接使用；
同时可以在配置选项的targets中指定要兼容的浏览器版本；

5. 面向对象-基础

万物皆对象

要想面向对象，操作对象，首先便要拥有对象；
要创建对象，必须要先定义类，所谓的类可以理解为对象的模型；
程序中可以根据类创建指定类型的对象；
举例来说：
可以通过Person类来创建人的对象，通过Dog类创建狗的对象，不同的类可以用来创建不同的对象；

5.1 定义类

  1. class 类名 {
  2.     属性名: 类型;
  4.     constructor(参数: 类型){
  5.         this.属性名 = 参数;
  6.     }
  8.     方法名(){
  9.         ....
  10.     }
  12. }

示例：

  1.     class Person{
  2.         name: string;
  3.         age: number;
  5.         constructor(name: string, age: number){
  6.             this.name = name;
  7.             this.age = age;
  8.         }
  10.         sayHello(){
  11.             console.log(`大家好，我是${this.name}`);
  12.         }
  13.     }

使用类：

  1. const p = new Person('孙悟空', 18);
  2. p.sayHello();

5.2 构造函数

可以使用constructor定义一个构造器方法；

注1：在TS中只能有一个构造器方法！

例如：

  1. class C{
  2.     name: string;    // 默认就是 public name: stirng
  3.     age: number;    
  5.     constructor(name: string, age: number) {
  6.         this.name = name;
  7.         this.age = age;
  8.     }
  9. }

同时也可以直接将属性定义在构造函数中：

  1. class C {    
  2.     // 语法糖，使用修饰符
  3.     constructor(public name: string, public age: number) {
  4.     }
  5. }

上面两种定义方法是完全相同的！

注2：子类继承父类时，必须调用父类的构造方法（如果子类中也定义了构造方法）！

例如：

  1. class A {
  2.     protected num: number;
  3.     constructor(num: number) {
  4.         this.num = num;
  5.     }
  6. }
  8. class X extends A {    // extends 继承
  9.     protected name: string;
  10.     constructor(num: number, name: string) {
  11.         super(num);    // super相当于上层父类
  12.         this.name = name;
  13.     }
  14. }

如果在X类中不调用super将会报错！

5.3 封装

对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装
默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

  • 静态属性（static）：
    • 声明为static的属性或方法不再属于实例，而是属于类的属性；
  • 只读属性（readonly）：
    • 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
  • 静态只读属性（static readonly）：顺序不能变
  • TS中属性具有三种修饰符：
    • public（默认值），可以在类、子类和对象中访问
    • protected ，可以在类、子类中访问
    • private ，只能在类中访问，可以通过添加方法使得私有属性能被外部访问到

示例：
public：

  1. class Person{
  2.     public name: string; // 写或什么都不写都是public
  3.     public age: number;
  5.     constructor(name: string, age: number){
  6.         this.name = name; // 可以在类中修改
  7.         this.age = age;
  8.     }
  10.     sayHello(){
  11.         console.log(`大家好，我是${this.name}`);
  12.     }
  13. }
  15. class Employee extends Person{
  16.     constructor(name: string, age: number){
  17.         super(name, age);
  18.         this.name = name; //子类中可以修改
  19.     }
  20. }
  22. const p = new Person('孙悟空', 18);
  23. p.name = '猪八戒';// 可以通过对象修改

protected：

  1. class Person{
  2.     protected name: string;
  3.     protected age: number;
  5.     constructor(name: string, age: number){
  6.         this.name = name; // 可以修改
  7.         this.age = age;
  8.     }
  10.     sayHello(){
  11.         console.log(`大家好，我是${this.name}`);
  12.     }
  13. }
  15. class Employee extends Person{
  17.     constructor(name: string, age: number){
  18.         super(name, age);
  19.         this.name = name; //子类中可以修改
  20.     }
  21. }
  23. const p = new Person('孙悟空', 18);
  24. p.name = '猪八戒';// 不能修改

private：

  1. class Person{
  2.     private name: string;
  3.     private age: number;
  5.     constructor(name: string, age: number){
  6.         this.name = name; // 可以修改
  7.         this.age = age;
  8.     }
  10.     sayHello(){
  11.         console.log(`大家好，我是${this.name}`);
  12.     }
  13. }
  15. class Employee extends Person{
  17.     constructor(name: string, age: number){
  18.         super(name, age);
  19.         this.name = name; //子类中不能修改
  20.     }
  21. }
  23. const p = new Person('孙悟空', 18);
  24. p.name = '猪八戒';// 不能修改

5.4 属性存取器

对于一些不希望被任意修改的属性，可以将其设置为private
直接将其设置为private将导致无法再通过对象修改其中的属性
我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
读取属性的方法叫做setter方法，设置属性的方法叫做getter方法
示例：

  1. class Person{
  2.     private _name: string;
  4.     constructor(name: string){
  5.         this._name = name;
  6.     }
  8.     get name(){
  9.         return this._name;
  10.     }
  12.     set name(name: string){
  13.         this._name = name;
  14.     }
  16. }
  18. const p1 = new Person('Liwker');
  19. // 实际通过调用getter方法读取name属性
  20. console.log(p1.name);
  21. // 实际通过调用setter方法修改name属性 
  22. p1.name = '猪八戒';

5.5 静态属性

静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用
静态属性（方法）使用static开头
示例：

  1. class Tools{
  2.     static PI = 3.1415926;
  4.     static sum(num1: number, num2: number){
  5.         return num1 + num2
  6.     }
  7. }
  9. console.log(Tools.PI);
  10. console.log(Tools.sum(123, 456));

5.6 this

在类中，使用this表示当前对象

5.7 继承

继承时面向对象中的又一个特性，extends
通过继承可以将其他类中的属性和方法引入到当前类中
示例：

  1. class Animal{
  2.     name: string;
  3.     age: number;
  5.     constructor(name: string, age: number){
  6.         this.name = name;
  7.         this.age = age;
  8.     }
  9. }
  11. class Dog extends Animal{
  13.     bark(){
  14.         console.log(`${this.name}在汪汪叫！`);
  15.     }
  16. }
  18. const dog = new Dog('旺财', 4);
  19. dog.bark();

通过继承可以在不修改类的情况下完成对类的扩展

5.6 重写

发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写
示例：

  1. class Animal{
  2.     name: string;
  3.     age: number;
  5.     constructor(name: string, age: number){
  6.         this.name = name;
  7.         this.age = age;
  8.     }
  10.     run(){
  11.         console.log(`父类中的run方法！`);
  12.     }
  13. }
  15. class Dog extends Animal{
  17.     bark(){
  18.         console.log(`${this.name}在汪汪叫！`);
  19.     }
  21.     run(){
  22.         console.log(`子类中的run方法，会重写父类中的run方法！`);
  23.     }
  24. }
  26. const dog = new Dog('旺财', 4);
  27. dog.bark();

在子类中可以使用super来完成对父类的引用

5.7 抽象类（abstract class）

抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例

  1. abstract class Animal{
  2.   abstract run(): void; // 抽象方法只能定义在抽象内中
  3.   bark(){
  4.       console.log('动物在叫~');
  5.   }
  6. }
  8. class Dog extends Animals{
  9.   run(){
  10.       console.log('狗在跑~');
  11.   }
  12. }

使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现。

6. 接口（interface）

抽象的最高境界！

接口的作用类似于抽象类，不同点在于：接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法；
接口主要负责定义一个类的结构，接口可以去限制一个对象的接口：对象只有包含接口中定义的所有属性和方法时才能匹配接口；
同时，可以让一个类去实现接口，约束类 符合接口的规范，实现接口时类中要保护接口中的所有属性；
示例（检查对象类型）：

  1. interface Person{
  2.     name: string;
  3.     sayHello():void;
  4. }
  6. function fn(per: Person){
  7.     per.sayHello();
  8. }
  10. fn({
  11.   name:'Liwker',
  12.   sayHello() { console.log(`Hello, 我是 ${this.name}`) }
  13. });

示例（实现）：implements 实现接口

  1. interface Person{
  2.    name: string;
  3.    sayHello():void;
  4. }
  6. // implements 实现接口，extends 继承类
  7. class Student implements Person{
  8.    constructor(public name: string) {
  9.    }
  11.    sayHello() {
  12.        console.log('大家好，我是'+this.name);
  13.    }
  14. }

7. 泛型（Generic）

定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用；
举个例子：

  1. function test(arg: any): any{
  2.     return arg;
  3. }

上例中，test函数有一个参数类型不确定，但是能确定的是其返回值的类型和参数的类型是相同的；
由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的：
首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型。

总的来说，泛型就是当类型不明确的时候，整一个变量来表示这个类型

7.1 泛型函数

创建泛型函数

  1. function test<T>(arg: T): T{
  2.     return arg;
  3. }

这里的<T>就是泛型；
T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型；
所以泛型其实很好理解，就表示某个类型；
那么如何使用上边的函数呢？
使用泛型函数
方式一（直接使用）：

  1. test(10)

使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式
方式二（指定类型）：

  1. test<number>(10)

也可以在函数后手动指定泛型。
函数中声明多个泛型
可以同时指定多个泛型，泛型间使用逗号隔开：

  1. function test<T, K>(a: T, b: K): K{
  2.   return b;
  3. }
  5. test<number, string>(10, "hello");

7.2 泛型类

类中同样可以使用泛型：

  1. class MyClass<T>{
  2.   prop: T;
  4.   constructor(prop: T){
  5.       this.prop = prop;
  6.   }
  7. }

7.3 泛型继承

使用泛型时，完全可以将泛型当成是一个普通的类去使用。
除此之外，也可以对泛型的范围进行约束

  1. interface MyInter{
  2.   length: number;
  3. }
  5. function test<T extends MyInter>(arg: T): number{
  6.   return arg.length;
  7. }

使用T extends MyInter表示泛型T必须是MyInter的子类，不一定非要使用接口，类和抽象类同样适用。