本文共 20317 字，大约阅读时间需要 67 分钟。

1. TypeScript 简介

1.1 TypeScript 是什么

• 以 JavaScript 为基础构建的语言
• 一个 JavaScript 的超集
• TypeScript 扩展了 JavaScript，并添加了类型
  • 让 JavaScript 从动态类型语言转为静态类型语言
• 可以在任何支持 JavaScript 平台中执行
  • TypeScript 不能被 JavaScript 解析器直接执行

1.2 TypeScript 增加了什么

• 类型
• 支持ES新特性
• 添加ES不具备的新特性
• 丰富的配置选项
• 强大的开发工具

2. TypeScript 开发环境搭建

2.1 下载安装 Node.js

2.2 npm 全局安装 TypeScript

• 终端 npm install -g typescript

2.3 创建 TypeScript 文件

2.4 使用 tsc 进行编译

• 进入 ts 文件所在目录
• 执行 tsc xxx.ts

3. TypeScript 基本类型

3.1 类型声明

• 类型声明是 TypeScript 非常重要的一个特点
• 通过类型声明可以指定 TS 中变量（参数、形参）的类型
• 指定类型后，当为变量赋值时，TypeScript 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
• 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{
   	...}// 声明一个变量a, 同时指定它的类型为 numberlet a: number;// a 的类型设置为了 number, 在以后的使用过程中 a 的值只能是数字a = 10;a = 33;// a = 'hello' // 报错// 声明完变量直接进行赋值// let c: boolean = true;// 如果变量的声明和赋值是同时进行的，TS 可以自动对变量进行类型检测let c = false;c = true// JS 中的函数是不用考虑参数的类型和个数的// function sum(a, b) {
   //     return a + b// }// console.log(sum(123, 456)); // 579// console.log(sum(123, "456")); // "123456"function sum(a: number, b: number): number {
       return a + b;}let result = sum(123, 456) // 传多传少，类型不对都会报错

3.2 自动类型判断

• TypeScript 拥有自动的类型判断机制
• 当对变量的声明和赋值是同时进行的，TypeScript 编译器会自动判断变量的类型
• 所以如果变量的声明和赋值是同时进行的，可以省略掉类型声明

3.3 类型

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”	任意字符串
boolean	true, false	布尔值
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:‘zx’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A,B}	枚举，TS中新增类型

// numberlet decimal: number = 6;let hex: number = 0xf00d;let binary: number = 0b1010;let octal: number = 0o744;let big: bigint = 100n;// booleanlet isDone: boolean = false;// stringlet color: string = "blue";color = "red";let fullName: string = "Bob Bobbington";let age: number = 12;let sentence: string = `Hello, my name is ${
     fullName}.I'll be ${
     age + 1} years old next month.`;// 也可以直接使用字面量进行类型声明let a: 10;a = 10;// 可以使用 | 来连接多个类型(联合类型)let b: "male" | "female";b = "male";b = "female";let c: boolean | string;c = true;c = 'hello';// any 表示的是任意类型，一个变量设置类型为 any 后相当于对该变量关闭了 TS 的类型检测// 使用 TS 时，不建议使用 any 类型// let d: any;// 声明变量如果不指定类型，则 TS 解析器会自动判断变量的类型为 any (隐式的 any)let d: any;d = 10;d = 'hello';d = true;// unknown 表示未知类型的值let e: unknown;e = 10;e = 'hello';e = true;let s: string;// d 的类型是 any，它可以赋值给任意变量s = d;e = 'hello';// unknown 实际上就是一个类型安全的 any// unknown 类型的变量，不能直接赋值给其他变量if (typeof e === 'string') {
       s = e;}// 类型断言，可以用来告诉解析器变量的实际类型/***** * 语法： *      变量 as 类型 *      
   <类型>
    变量 */s = e as string;s = 
    
     e;// void 用来表示空，以函数为例，就表示没有返回值的函数function fn(): void {
       return null;}// never 表示永远不会返回结果function fn2(): never {
       throw new Error("报错了")}// object 表示一个 js 对象let a: object;a = {
   };a = function (){
   }// {} 用来指定对象中可以包含哪些属性// 语法: {属性名:属性值,属性名:属性值}// 在属性民后边加上?,表示属性是可选的let b: {
   name: string, age?: number};b = {
   name: '孙悟空', age: 18}// [propName: string]: any 表示任意类型的属性let c: {
   name: string, [propName: string]: any};c = {
   name: '猪八戒', age: 18, gender: '男'};/***** * 设置函数结构的类型声明: *      语法: (形参: 类型, 形参: 类型...) => 返回值 */let d: (a: number, b: number) => number;// d = function (n1: number, n2: number): number {
   //     return 10;// }/** * 数组的类型声明: *      类型[] *      Array
     <类型>
       */// string[] 表示字符串数组let e: string[];e = ['a', 'b', 'c'];// number[] 表示数值数值let f: number[];let g: Array
      
       g = [1,2,3];/***** * 元组，元组就是固定长度的数组 *      语法: [类型，类型，类型] */let h: [string, number];h = ['hello', 123]/***** * enum 枚举 */enum Gender {
       Male = 0,    Female = 1}let i: {
   name: string, gender: Gender};i = {
       name: '孙悟空',    gender: Gender.Male // 'male'}console.log(i.gender === Gender.Male);// & 表示同时let j: {
   name: string} & {
   age: number}// j = {name: '孙悟空', age: 18};// 类型的别名type myType = 1 | 2 | 3 | 4 | 5;let k: myType
      
     
    
   

4. TypeScript 编译选项

4.1 自动编译文件

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

4.2 自动编译整个项目

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

4.2.1 配置选项 include

• 定义希望被编译文件所在的目录
• 默认值: ["**/*"]
• 示例
  • "include":["src/**/*","tests/**/*"]
  • 上述示例中，所有 src 目录和 tests 目录下的文件都会被编译

4.2.2 配置选项 exclude

• exclude
  • 定义需要排除在外的目录
  • 默认值: ["node_modules", "bower_components","jspm_packages"]
  • 示例
    • "exclude": ["./src/hello/**/*"]
    • 上述示例中，src 下 hello 目录下的文件都不会被编译

4.2.3 配置选项 extends

• extends
  • 定义被继承的配置文件
  • 示例:
    • "extends": "./configs/base"
    • 上述示例中，当前配置文件中会自动包含 config 目录下 base.json 中的所有配置信息

4.2.4 配置选项 files

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

// 列表中的文件都会被 TS 编译器所编译"files": [	"core.ts",	"sys.ts",	"types.ts",	"scanner.ts",	"parser.ts",	"utilities.ts",	"binder.ts",	"checker.ts",	"tsc.ts"]

4.2.5 配置选项 compilerOptions

• 编译选项是配置文件中非常重要也比较复杂的配置选项
• 在 compilerOptions 中包含多个子选项，用来完成对编译的配置
• 项目选项
  • target
    • 设置 ts 代码编译的目标版本
    • 可选值:
      • ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2020、ESNext
    • 示例
      • 如上设置，我们所编写的 ts 代码将会被编译为 ES6 版本的 js 代码
      • "compilerOptions": {"target": "ES6"}
  • lib
    • 指定代码运行时所包含的库（宿主环境）
    • 可选值:
      • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost…
    • 示例
      • "compilerOptions": {"target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js"}
  • module
    • 设置编译后代码使用的模块化系统
    • 可选值:
      • CommonJS、UMD、AMD、System、ES2020、ESNext、None
    • 示例
      • compilerOptions": {"module": "CommonJS"}
  • outDir
    • 编译后文件的所在目录
    • 默认情况下，编译后的 js 文件会和 ts 文件位于相同的目录，设置 outDir 后可以改变编译后文件的位置
    • 示例：
      • 设置后编译后的 js 文件将会生成到 dist 目录
      • "compilerOptions": {"outDir": "dist"}
  • outFile
    • 将所有的文件编译为一个js文件
    • 默认会将所有的编写在全局作用域中的代码合并为一个 js 文件，如果 module 制定了 None、System 或 AMD 则会将模块一起合并到文件之中
    • 示例：
      • "compilerOptions": {"outFile": "dist/app.js"}
  • rootDir
    • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir 可以手动指定根目录
    • 示例：
      • "compilerOptions": {"rootDir": "./src"}
  • allowJs
    • 是否对 js 文件编译
  • checkJs
    • 是否对 js 文件进行检查
    • 示例：
      • "compilerOptions": {"allowJs": true, "checkJs": true}
  • removeComments
    • 是否删除注释
    • 默认值：false
  • noEmit
    • 不对代码进行编译
    • 默认值：false
  • sourceMap
    • 是否生成sourceMap
    • 默认值：false
  • 严格检查

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

• 额外检查

选项名称	选项功能
noFallthroughCasesInSwitch	检查 switch 语句包含正确的 break
noImplicitReturns	检查函数没有隐式的返回值
noUnusedLocals	检查未使用的局部变量
noUnusedParameters	检查未使用的参数

• 高级
  • allowUnreachableCode
    • 检查不可达代码
    • 可选值：
      • true，忽略不可达代码
      • false，不可达代码将引起错误
  • noEmitOnError
    • 有错误的情况下不进行编译
    • 默认值：false

5. 使用 webpack 打包 TypeScript 代码

5.1 webpack 整合

5.1.1 初始化项目

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

5.1.2 下载构建工具

• npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
• 安装包:

安装包名称	作用
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 中的清除插件，每次构建都会先清除目录

5.1.3 配置 webpack

• webpack.config.js

// 引入包const path = require("path");// 引入 html 插件const HtmlWebpackPlugin = require("html-webpack-plugin");// 引入 clean 插件const {
    CleanWebpackPlugin } = require("clean-webpack-plugin");// webpack 中的所有的配置信息都应该写在 module.exports 中module.exports = {
       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: {
       	// 凡是以 ts js 结尾的文件都可以作为模块使用        extensions: [".ts", ".js"]    },	// 指定 webpack 打包时要使用的模块    module: {
       	// 指定要加载的规则        rules: [            {
               	// test 指定的是规则生效的文件                test: /\.ts$/, // 匹配所有以 ts 结尾的文件                use: {
                       loader: "ts-loader" // 用 ts-loader 去处理以 ts 结尾的文件                },                // 要排除的文件                exclude: /node_modules/            }        ]    },	// 配置 webpack 插件    plugins: [        new CleanWebpackPlugin(), // 将原先的打包文件清空后，再次生成最新的打包文件        new HtmlWebpackPlugin({
               title:'TS测试' // 自定义配置            template: "./src/index.html" // html 模板        }),    ]}

5.1.4 配置 TS 编译选项

• tsconfig.json

{
       "compilerOptions": {
           "target": "ES2015",        "module": "ES2015",        "strict": true    }}

5.1.5 修改 package.json 配置

• package.json

{
       ...    "scripts": {
           "test": "echo \"Error: no test specified\" && exit 1",        "build": "webpack",        "start": "webpack serve --open chrome.exe" // 自动构建项目    },    ...}

5.1.6 项目使用

• 执行npm run build对 ts 代码进行编译
• 或者执行npm start来启动开发服务器

5.2 Babel

• 除了webpack，开发中还经常需要结合babel来对代码进行转换
• 以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中
  • 虽然TS在编译时也支持代码转换，但是只支持简单的代码转换
  • 对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换
• 安装依赖包
  • npm i -D @babel/core @babel/preset-env babel-loader core-js

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

• webpack.config.js

...module: {
       rules: [        {
               test: /\.ts$/,            use: [            	// 先用 ts-loader 把 ts 文件转换成 js 文件            	// 再用 babel-loader 把 ES6 转换成 ES5                {
   	// 配置 babel                    loader: "babel-loader", // 指定加载器                    // 设置 babel                    options:{
                       	// 设置预定义环境                        presets: [                            [                            	// 指定环境的插件                                "@babel/preset-env",                                {
   	// 配置信息                                	// 要兼容的目标浏览器                                    "targets":{
                                           "chrome": "58", // 兼容版本                                        "ie": "11"                                    },                                    // 指定 corejs 的版本                                    "corejs":"3",                                    // 使用 corejs 的方式 "usage" 表示按需加载                                    "useBuiltIns": "usage"                                }                            ]                        ]                    }                },                {
                       loader: "ts-loader",                }            ],            exclude: /node_modules/        }    ]}...

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

6. TypeScript 面向对象

• 程序之中所有的操作都需要通过对象来完成，也就是面向对象
• 举例
  • 操作浏览器要使用 window 对象
  • 操作网页要使用 document 对象
  • 操作控制台要使用 console 对象
• 计算机程序的本质就是对现实事物的抽象，事物在程序中也就变成了对象
• 在程序中所有的对象都被分为两个部分，数据和功能
• 举例
  • 人的姓名、性别、年龄、身高、体重属于数据
  • 吃饭、睡觉属于功能或方法

6.1 定义类

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

class 类名 {
       属性名: 类型;        constructor(参数: 类型){
           this.属性名 = 参数;    }        方法名(){
           ....    }}

• 示例

// 使用一个 class 关键字来定义一个类/*	对象中主要包含了两个部分		属性		方法*/class Person{
   	/*		直接定义的属性是实例属性，需要通过对象的实例去访问			const per = new Person()			per.name				使用 static 开头的属性是静态属性(类属性)，可以直接通过类去访问			Person.age		readonly 开头的属性表示一个只读的属性无法修改	*/	// 定义实例属性    // readonly name: string = '孙悟空';	name = '孙悟空';		// 在属性前使用 static 关键字可以定义类属性(静态属性)，使用类访问    // static readonly age: number = 18；	age = 18;	    constructor(name: string, age: number){
           this.name = name;        this.age = age;    }	// 定义方法	/*		如果方法以 static 开头则方法就是类方法，可以直接通过类去调用	*/    sayHello(){
           console.log(`大家好，我是${
     this.name}`);    }}

• 使用类

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

6.2 构造函数

• 可以使用constructor定义一个构造器方法
• 在TS中只能有一个构造器方法
• 例如

class C{
       name: string;    age: number		// constructor 被称为构造函数	// 构造函数会在对象创建时调用    constructor(name: string, age: number) {
   		// 在实例方法中，this 就表示当前的实例		// 在构造函数中当前对象就是当前新建的那个对象		// 可以通过 this 向新建的对象中添加属性        this.name = name;        this.age = age;    }	bark() {
   		// 在方法中可以通过 this 来表示当前调用方法的对象		console.log(this.name);	}}

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

class C {
       constructor(public name: string, public age: number) {
       }}

• 上面两种定义方法是完全相同的
• 子类继承父类时，必须调用父类的构造方法（如果子类中也定义了构造方法）
• 例如

class A {
       protected num: number;    constructor(num: number) {
           this.num = num;    }}class X extends A {
       protected name: string;    constructor(num: number, name: string) {
           super(num);        this.name = name;    }}

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

6.3 封装

• 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装
• 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置
  • 静态属性（static）：
    • 声明为static的属性或方法不再属于实例，而是属于类的属性
  • 只读属性（readonly）：
    • 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
  • TS中属性具有三种修饰符：
    • public（默认值），可以在类、子类和对象中修改
    • protected ，可以在类、子类中修改
    • private ，可以在类中修改
• 示例
• public

class Person{
       public name: string; // 写或什么都不写都是public    public age: number;    constructor(name: string, age: number){
           this.name = name; // 可以在类中修改        this.age = age;    }    sayHello(){
           console.log(`大家好，我是${
     this.name}`);    }}class Employee extends Person{
       constructor(name: string, age: number){
           super(name, age);        this.name = name; //子类中可以修改    }}const p = new Person('孙悟空', 18);p.name = '猪八戒';// 可以通过对象修改

• protected

class Person{
       protected name: string;    protected age: number;    constructor(name: string, age: number){
           this.name = name; // 可以修改        this.age = age;    }    sayHello(){
           console.log(`大家好，我是${
     this.name}`);    }}class Employee extends Person{
       constructor(name: string, age: number){
           super(name, age);        this.name = name; //子类中可以修改    }}const p = new Person('孙悟空', 18);p.name = '猪八戒';// 不能修改

• private

class Person{
       private name: string;    private age: number;    constructor(name: string, age: number){
           this.name = name; // 可以修改        this.age = age;    }    sayHello(){
           console.log(`大家好，我是${
     this.name}`);    }}class Employee extends Person{
       constructor(name: string, age: number){
           super(name, age);        this.name = name; //子类中不能修改    }}const p = new Person('孙悟空', 18);p.name = '猪八戒';// 不能修改

6.3.1 属性的封装

(function (){
   	// 定义一个表示人的类	class Person{
   		// TS 可以在属性前添加属性的修饰符		// public 修饰的属性可以在任意位置访问（修改）默认值		// private 私有属性，私有属性只能在类内部进行访问（修改）		//		通过在类中添加方法使得私有属性可以被外部访问		// protected 受包含的属性，只能在当前类和当前类的子类中访问		name: string;		age: number;		constructor(name: string, age: number) {
   			this.name = name;			this.age = age;		}		// getter 方法用来读取属性		// setter 方法用来设置属性		// 		它们被称为属性的存取器				// 定义方法，用来获取 name 属性		getName() {
   			return this.name		}		// 定义方法，用来设置 name 属性		setName(value: string){
   			this.name = value;		}		// TS 中设置 getter 方法的方式		get name(){
   			console.log('zzz')			return this.name		}		set name(value: string){
   			this.name = value		}	}	const per = new Person('xxx', 12);		// 现在属性是在对象中设置的，属性可以任意的被修改	// 属性可以任意被修改将会导致对象中的数据变得非常不安全		per.setName('qqq')	console.log(per.getName())	class A {
   		protected num: number;		constructor(num: number){
   			this.num = num;		}	}	class B extends A {
   		test(){
   			console.log(this.num)		}	}	class C {
   		// 可以直接将属性定义在构造函数中		constructor(public name: string, public age: num) {
   		}	}	})();

6.4 属性存取器

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

class Person{
       private _name: string;    constructor(name: string){
           this._name = name;    }    get name(){
           return this._name;    }    set name(name: string){
           this._name = name;    }}const p1 = new Person('孙悟空');// 实际通过调用getter方法读取name属性console.log(p1.name);// 实际通过调用setter方法修改name属性 p1.name = '猪八戒';

6.5 静态属性

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

class Tools{
       static PI = 3.1415926;        static sum(num1: number, num2: number){
           return num1 + num2    }}console.log(Tools.PI);console.log(Tools.sum(123, 456));

6.6 this

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

6.7 继承

• 继承是面向对象中的又一个特性
• 通过继承可以将其他类中的属性和方法引入到当前类中
• 通过继承可以在不修改类的情况下完成对类的扩展
• 示例

(function (){
   	// 定义一个 Animal 类	class Animal {
   		name: string;		age: number;		constructor(name: string, age: number) {
   			this.name = name;			this.age = age;		}		sayHello() {
   			console.log('xxx');		}	}	/*		此时，Animal 被称为父类，Dog 被称为子类		使用继承后，子类将会拥有父类所有的方法和属性		通过继承可以将多个类中共有的代码写在一个父类中		这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法		如果希望在子类中添加一些父类中没有的属性或方法，直接加就行		如果在子类中添加了和父类相同的方法，则子类方法会覆盖掉父类方法		这种子类覆盖掉父类方法的形式，称为方法重写	*/	// 定义一个表示狗的类	// 使 Dog 类继承 Animal 类	class Dog extends Animal {
   		run(){
   			...		}	}	// 定义一个表示猫的类	// 使 Cat 类继承 Animal 类	class Cat extends Animal {
   			}	const dog = new Dog('xx', 5);	console.log(dog);	dog.sayHello();	dog.run();	const cat = new Cat('xx', 5);	console.log(cat);	cat.sayHello();	cat.run() // 报错})();

6.7.1 重写

• 发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写
• 在子类中可以使用 super 来完成对父类的引用
• 示例

class Animal{
       name: string;    age: number;    constructor(name: string, age: number){
           this.name = name;        this.age = age;    }    run(){
           console.log(`父类中的run方法！`);    }}class Dog extends Animal{
       bark(){
           console.log(`${
     this.name}在汪汪叫！`);    }    run(){
           console.log(`子类中的run方法，会重写父类中的run方法！`);    }}const dog = new Dog('旺财', 4);dog.bark();

6.7.2 super 关键字

class Animal{
       name: string;    age: number;    constructor(name: string, age: number){
           this.name = name;        this.age = age;    }    sayHello(){
           console.log(`父类中的sayHello方法！`);    }}class Dog extends Animal{
   		constructor(color: string){
   		// 如果在子类中写入构造函数，那么在子类的构造函数中必须对父类的构造函数进行调用		super(name, age); // 调用父类的构造函数        this.color = color;    }	    sayHello() {
       	// 在类的方法中 super 就表示当前类的父类    	super.sayHello();    }}const dog = new Dog('旺财', 4);dog.sayHello();

6.7.3 抽象类（abstract class）

• 抽象类是专门用来被其他类所继承的类，它只能被其他类所继承，不能用来创建实例
• 使用 abstract 开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现

(function () {
   	/*		以 abstract 开头的类是抽象类		抽象类和其他类区别不大，只是不能用来创建对象		抽象类就是专门用来被继承的类			抽象类中可以添加抽象方法	*/	abstract class Animal{
   	  name: string;			  constructor(name: string) {
   	  	this.name = name;	  }			  // 定义一个抽象方法	  // 抽象方法使用 abstract 开头，没有方法体	  // 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写	  abstract sayHello(): void;	}		class Dog extends Animals{
   	  sayHello(){
   	      console.log('狗在跑~');	  }	}	class Cat extends Animal{
   		sayHello() {
   			console.log('mmm');		}	}})();

7. TypeScript 接口

• 接口的作用类似于抽象类
  • 不同点在于：接口中的所有方法和属性都是没有实值的，即接口中的所有方法都是抽象方法
• 接口主要负责定义一个类的结构，接口可以去限制一个对象的接口
  • 对象只有包含接口中定义的所有属性和方法时才能匹配接口
• 同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性
• 示例

(function (){
   	// 描述一个对象的类型	type myType = {
   		name: string,		age: number	};	// 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法	// 	同时接口也可以当成类型声明去使用	interface myInterface{
   		name: string;		age: number;	}		interface myInterface{
   		gender: string;	}	const obj: myInterface = {
   		name: 'sss';		age: 111,		gender: '男'	}	// 接口可以在定义类的时候去限制类的结构	// 接口中的所有的属性都不能有实际的值	// 接口只定义对象的结构，而不考虑实际值	// 在接口中所有的方法都是抽象方法	interface myInter {
   		name: string;		sayHello(): void;	}	// 定义类时，可以使类去实现一个接口	// 实现接口就是使类满足接口的要求	class MyClass implements myInterface {
   		name: string;		constructor(name: string) {
   			this.name = name;		}		sayHello() {
   			console.log('xxx')		}	}	})();

8. TypeScript 泛型

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

// test 函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的// 由于类型不确定所以参数和返回值均使用了 any，但是很明显这样做是不合适的// 首先使用 any 会关闭 TS 的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型function test(arg: any): any{
       return arg;}// 在定义函数或是类时，如果遇到类型不明确就可以使用泛型

8.1 泛型函数

8.1.1 创建泛型函数

function test
   
    (arg: T): T{
       return arg;}
   

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

8.1.2 使用泛型函数

• 方式一（直接使用）

test(10)// 使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式

• 方式二（指定类型）

test
   
    (10)// 也可以在函数后手动指定泛型
   

• 函数中声明多个泛型
  • 可以同时指定多个泛型，泛型间使用逗号隔开

function test
   
    (a: T, b: K): K{
     return b;}test
    
     (10, "hello");// 使用泛型时，完全可以将泛型当成是一个普通的类去使用
    
   

8.2 泛型类

• 类中同样可以使用泛型

class MyClass
   
    {
     prop: T;  constructor(prop: T){
         this.prop = prop;  }}
   

8.3 泛型继承

• 除此之外，也可以对泛型的范围进行约束

interface MyInter{
     length: number;}function test
   
    (arg: T): number{
     return arg.length;}// 使用T extends MyInter表示泛型T必须是MyInter的子类，不一定非要使用接口类和抽象类同样适用
   

9. 总结

• 看了李立超老师的 TypeScript 教程，做个笔记，总结一下

转载地址：http://ujqwi.baihongyu.com/