TypeScript完全解读入门进阶课程(26课时)

typescript playground可以实时编译

第一章. 环境搭建

1.npm init

2.npm install typescript tslint

3.tsc --init,生成tsconfig.json配置文件

4.nmp install webpack webpack-cli webpack-dev-server -D

5.build下写webpack.config.js

6.npm install ts-loader -D

7.npm install cross-env -D

8.npm install clean-webpack-plugin -D

9.npm install html-webpack-plugin -D

10.ts-lint --init

 

webpack-dev-server --config 【文件路径】 start运行，webpack --config 【文件路径】打包。通过cross-env设置环境变量为dev或者pro

 

第二章. 基础类型

boolean

number

string

数组，[]/Array<>/(string | number)[]

元组, [tpye1, type2]

枚举,enum, 枚举类型[值]打印枚举名

 

any

void

null/undefined，即是类型也是值，undfined可以赋值给void类型，是其他类型的子类型

never，不存在的值的类型，抛异常和死循环；任意类的子类

object

断言，类型转换，两种写法。<type>/as type。tsx只能用as

 

let 变量名：变量类型 = 值

 

`${变量名}`：字符串拼接，取得字符串

 

第三章. Symbol

独一无二的值

使用Symbol，在tsconfig.json里配置lib引入es6

创建Symbol，用函数Symbol()，可传字符串为参数

toString转为字符串，Boolean(symbol)转为布尔

作为对象的属性名，放中括号里。[symbol_var]

symbol值作为对象属性，无法用遍历key的方法获取，只能用Reflect.ownKeys获取

两个静态方法，一个是for，一个keyFor

for获取的是已有的Symbol对象，没找到返回新的

keyFor返回用for创建的对象的参数

 

11个内置的Symbol值

hasInstance：instanceof使用时调用的方法

isConcatSpreadable：设置数组和其他数组合并时是否会被扁平化

species：允许子类覆盖对象的默认构造函数

match：字符串上调用match方法时调用相应方法

replace：replace方法的回调函数

search：seaerch方法的回调函数

split：split方法的回调函数

iterator：数组的迭代器

toPrimitive：转为原始类型时调用

toStringTag：toString的回调

unscopables：with语句里无法获取的属性

 

第四章. 接口

interface关键字定义

里边的字段名最后加？代表可选属性，调用时可以不传参数

如果函数要求的参数个数与实际传入的对象不匹配，有三个办法：

1.传入的时候类型转换

2.索引签名，用[prop:string]:any来设置

3.类型兼容性，把参数付给一个变量

 

readonly限定为只读属性

 

函数用（参数）：返回类型的格式定义

 

索引类型：[key名：类型]值类型

 

接口继承：extends继承

 

混合类型：函数和字段都定义在接口里。定义一个函数，给他加属性，就可以转换为一个接口

 

第五章. 函数

函数类型

 

使用类型别名定义函数：type 函数名 = （参数列表）=》返回值

 

参数

可选参数

可选参数在必选参数后边，最后问好结尾

 

默认参数

参数列表里设置值

 

剩余参数

...args，参数放进数组里；反过来在函数体里是拆解

 

重载

函数不同类型参数可以有多个签名，但是有一个实现，参数是any。function定义函数签名，方便不同类型的函数对应一个实现

 

第六章. 泛型

泛型约束函数参数的类型

定义：<T>函数定义

调用：函数名<类型>（）

 

泛型约束：T具有某种特点，比如 extends， keyof（索引类型）

 

第七章. ES中的类

es6:

class{

constructor(){}

}

构造函数：constructor。函数的返回值是new关键字的返回值

创造类对象必须用new

set和get函数：set和get放在变量同名函数前，取值与赋值时自动调用

class表达式：定义类像给函数变量赋值一样，a = class{}

静态方法：static修饰，不能被对象调用，只能用类名调用

实例属性其他写法：除了用this调用，可以在constructor之外定义 属性

类默认没有静态属性，只能额外用Ponit.y来定义y这个静态属性

私有方法：默认没有。从名字约定上，__开头的是私有的；方法在类外部定义，对象就没办法继承了；通过Symbol定义函数

私有属性：#加在变量名前面

new.target属性：用new调用构造函数时被赋值为类名

 

继承：extends关键字

getPrototypeOf：获取原型对象

super：可以作为函数，也可以作为对象使用

函数：父类的constructor，子类必须调用一次，才能用this；super调用里this指向子类

对象：普通方法，父类原型对象；静态方法，父类

prototype和__proto__：

__proto__：指向构造函数的prototype属性

es6可以继承原生类型

 

第八章. TS中的类

修饰符

public

private

protected：子类可以调用父类方法不能访问属性，修饰constructor方法就只能被子类继承不能被new

 

readonly：修饰属性为只读的

 

参数属性：在构造函数上加修饰符，直接定义相应属性

 

静态属性：方法或者属性只能用类名调用

 

可选类属性：属性名后边加？

 

存取器：和es6没区别

 

抽象类：abstract修饰class或者函数（函数没有方法体），属性/存取器

 

实例类型：类即是对象也是类型。不同名字的类对象可以互相赋值，判断类型要用instanceOf之类的

 

类与接口：

接口属性之间可以用任意符号隔开

类用implements实现接口

接口检测的是类的实例

接口继承类的成员，不包括其实现，protected和private的成员也会继承，接口只能被这个类或者他的子类实现

泛型使用类类型：class的类型可以用在泛型里

// 类的泛型约束
function create<T>(c: {new():T}) {
  return new c();
}

上面new()代表的是构造函数，代表类类型 

 

第九章.枚举

数字，字符串两种枚举

 

定义：

enum 枚举名{

常量列表

}

访问：枚举名.枚举常量；枚举名[‘枚举常量’]

枚举用表达式赋值后，后面的值必须初始化

异构枚举：枚举列表里既包含数字又包含字符串

枚举成员类型：枚举里的常量用来作为类型定义变量，枚举常量要是数字或者字符串或者自增

联合枚举：变量被枚举类型修饰，只能是枚举常量里的一个

运行时枚举：枚举是一个对象，在转换之后仍然可以使用枚举对象

const枚举：const修饰enum，枚举对象直接被编译为常量而不是对象的属性

 

第十章. 类型推论和兼容性

类型推论：

根据值，不指定类型也给变量一个类型

 

多类型联合：数组可以多种类型数据，类型为numbr | string这样的

 

上下文类型：根据函数签名推断出回调函数参数

 

兼容性：

如果赋值对象可以满足被赋值对象的字段，那就可以部分赋值或者类型转换后赋值，支持递归赋值

 

函数兼容性：

参数个数：右边函数参数个数必须小于等于左边函数的参数个数，可以省略参数

参数类型：要匹配

可选参数和剩余参数：多个参数与…兼容，可有可选参数

参数协变：参数联合类型与单个类型兼容

返回值类型：单个返回类型的函数可以赋值给联合类型返回值的函数

函数重载：不同函数声明，一个函数体用any代替类型。函数重载要一模一样才能兼容

 

类：比较的是实例的成员；private和protected影响兼容性，不能兼容，除非派生

 

枚举：数字枚举，字符串枚举和数值/字符串互相兼容，枚举之间不兼容

 

泛型：类型参数影响使用了类型参数的部分，不影响整体类

 

第十一章. 高级类型

 

第十二章. 模块和命名空间

es6:

export：导出变量，单个导出或者{}里一起导出，export 名 as 别名，不能导出常量，不能在块级作用域，定义的时候就要加

import：import { 变量 as 别名} from 文件名，引入的非对象是只读的。import可以直接引入一个js文件，并且提升到文件头部；*引入所有export的；用逗号隔开单个变量和{}，引入default和其他的

export default：只能有一个，导出的东西不需要准确命名引入，可以先定义后导出，导出的是一个叫default的；不可以接一个变量定义而已直接一个值

export和import的复合写法：先引入后导出，export的是default然后import；export其他模块的内容

动态import：import（）函数，返回Promise

 

nodejs：

exports：export.变量名，导出一个对象

module.exports：不用导出对象，直接获取变量后者函数

require方法：导入，获得对象

 

ts：

模块：外部模块。

export，可以先定义后导出，可以as命名别名

import：导入可以as 别名，是个对象；直接imort一个文件，无法用，只能执行代码

export=和import xx = require（）可以连用

 

命名空间：之前叫内部模块。

namespace：定义命名空间，里边的东西不export无法使用

引入：///<reference path="文件路径"/>

拆分为多个文件：相同namespce定义在不同文件

 

别名：给namespace重命名， import 新名 = 命名空间.命名空间

 

不推荐使用命名空间

 

模块解析：

相对和非相对模块：非相对模块是baseUrl，相对是/,./,../

模块解析策略：node和classical，modeResolution来设置，没设根据module来看

模块解析配置项：baseUrl：编译后所有文件放一个路径里；paths：默认查找路径，一般设置第三方type文件；rootDirs：构建路径列表，为根目录；--noResolve：不要将命令行没有加入的文件编译

 

第十三章. 声明合并

声明类型，可以创建三种东西，命名空间，类型，值

合并接口：

同名接口合并，内容类型重复不能不一样；同名函数重载

 

合并命名空间：

不expert，同名空间里定义的内容互相不能访问

 

不同类型合并：

命名空间和类：同名类定义在前面，结果是包含命名空间导出内容作为静态属性的类

 

命名空间和函数：

类似类

 

命名空间和枚举：

类似类

 

第十四章. 装饰器

打开tsconfig里的experimentalDecorators为true

装饰器：@名字，名字必须是个函数或者调用函数求值后是个函数

多个装饰器可以应用于同一个实体，先调用装饰器工厂，再从下往上调用

 

不同实体装饰器执行顺序：对象，静态，构造，类

 

类装饰器：装饰器参数是类，在构造对象的时候执行。返回值如果是个类，替换掉原来的类

 

方法装饰器：三个参数，第一个参数是原型对象（实例函数）或构造函数（静态函数），第二个参数是成员名字，第三个参数是成员属性描述符；返回的值是属性描述符对象

 

访问器装饰器：不能同时装饰get set，参数和方法装饰器一模一样

 

属性装饰器：两个参数，第一个参数是原型对象（实例函数）或构造函数（静态函数），第二个参数是成员名字；判断是否有某个名字的属性

 

参数装饰器：三个参数，第一个参数是原型对象（实例函数）或构造函数（静态函数），第二个参数是成员名字，第三个参数是参数索引位置

 

第十五. Mixins混入

两个类或者对象的内容混合在一起，js用Object.assign

对象的混入：

Object.assign生成交叉类型，A & B

 

类的混入：

getOwnPropertyNames获取自有属性，赋值给目标类prototype

目标类可以把源类当成接口继承

 

第十六章. 其他重要更新

 

第十七章. 声明文件

已有的js库类型：

全局库：

模块化库：

UMD库：

 

处理库声明文件：

模块插件/UMD插件：

修改全局的模块：

使用依赖：

快捷外部模块声明：

 

第十八章. tsconfig.json配置详解

 

第十九章. 封装并发布一个库

 

第二十章. 写声明文件