theme: channing-cyan
TypeScript的特点：
- JavaScript的超集，满足所有的JS语法
- 含有面向对象的静态类型
起步安装：1、npm i typescript -g 2、tsc 文件名
一、TS的基本数据类型
基本数据类型：number、boolean、string、undefined、null、symbol、bigint、void
当中的类型有大小写的区分：大写的类型是给对象使用，小写的类型是原生类型
二、TS的任意类型
任意数据类型：any、unknown
any
any类型可以赋值给任意类型的，也可以被任意类型的赋值。
unknown
unknown类型的特点：
- unknown类型只能赋值给自身或者any
- unknown类型不能调用任何属性和方法
- unknown类型比any更加安全
额外知识
object、Object以及{}的三个区别：
- Object是跟原型链有关的，原型链顶层是Object，所以值的类型和引用类型都是指向Object，所以包含所有类型
- object是所有非值类型的类型
- {}是与第一个一样，但是字面量模式下不能修改值
三、接口类型
interface的作用：定义一种约束，让数据结构满足约束的格式
1、当interface重名的时候，会进行合并
ˋˋˋjs
ˋˋˋ
2、任意的索引，让接口属性动态化
3、可选属性
4、只读属性
5、接口的继承，可以继承多个接口，最后结果就是将多个接口进行合并，以逗号分隔
6、定义函数类型
四、数组类型
1、类型[]
最简单和最直观表示数组类型的方法，一维就是一个括号，二维就是两个括号，后面的以此类推
let arr: number[] = [1, 2, 3];
2、用接口表示数组
// 利用接口的任意索引属性来实现数组结构的类型的定义
interface NumArray {[index: number]: number;
}let arr: NumArray = [1, 2, 3];
3、对于arguments这个伪类数组的处理
1)采用TS的内置对象IArguments
IArguments内部实现:
interface IArguments {[index: number]: number;length: number;callee: Function;
}
五、函数类型
1、函数定义类型和返回值、箭头函数定义类型和返回值
// 定义普通函数类型
function add(num1: number, num2: number): number {return num1 + num2;
}
// 定义箭头函数的参数类型和返回值
const descrease = (num1: number, num2: number): number => {return num1 - num2;
};
2、函数重载
重载就是函数名一样，但是参数不一样，从而可以保证不同的时候调用不同的参数
3、接口定义函数
// 接口定义函数
interface Add {(num1: number, num2: number): number;
}const add: Add = (num1: number, num2: number): number => {return num1 + num2;
};add(1,2)
六、联合类型、交叉类型、类型断言
联合类型就是扩展某个变量的类型，让变量可以是这个当中任一个类型，通过‘|’
交叉类型就是扩张某个变量的类型，和extends类似，将合并信息，通过‘&’
类型断言可以对某个变量改成固定的类型，但是使用的时候需要注意，可能语法错误提示没有了，但是会导致一些语法错误
七、TS的内置对象
JavaScript当中有许多的内置对象，这些内置对象可以在TypeScript当做定义好的类型来使用
代码雨TS练习：
let canvas = document.querySelector('#canvas') as HTMLCanvasElement;// 获取canvas元素
let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;// 画布渲染内容
canvas.height = screen.availHeight;// 最大的窗口高度
canvas.width = screen.availWidth;// 最大的窗口宽度let str: string[] = 'XZSDASRWQJKHEWQKHEJLKQWHEKQWHE'.split('');
let Arr = Array(Math.ceil(canvas.width / 10)).fill(0);
console.log(Arr);
const rain = () => {ctx.fillStyle = 'rgba(0,0,0,0.5)';// 背景颜色ctx.fillRect(0, 0, canvas.width, canvas.height);// 背景的大小ctx.fillStyle = '#0f0';// 字体颜色Arr.forEach((item, index) => { // 数组用来实现代码雨高度的改变ctx.fillText(str[Math.floor(Math.random() * str.length)],index * 10,item + 10);Arr[index] =item >= canvas.height || item > 10000 * Math.random() ? 0 : item + 10;});
};setInterval(rain, 100);八、class类
1、定义一个简单的类
TypeScript的类的定义和java当中类的定义一样，需要先声明属性，但是JS中可以直接使用constructor中this去直接指向实例对象来添加属性
class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;}run() {}
}2、类的修饰符
- protected：定义的私有变量只能在内部和继承的子类中访问，不能在外部访问
- private：私有修饰符，只能在类的内部访问调用
- public：公开修饰符，都可以访问调用
- static：静态修饰符，只有通过这个类名才可以访问调用
虽然有这些关键字和java很类似，但是它的本身还是JS，TS只是做了类型校验，会有语法提示而已，并不会去约束语法
class Person {public name: string;private age: number;constructor(name: string, age?: number) {this.name = name;}static run() {}getName() {console.log(this.name);}
}
3、interface定义类
4、抽象类
九、TS元组类型
元组类型定义：是一个数量固定，元素可以类型不同的集合。
好处：可以将多个元素作为一个单元传递
基本语法：
// 当对arr数组进行重新赋值的时候如果超过了固定数量将会报语法提示，但是对于一些push方法都不会有语法错误提示
let arr: [string, boolean] = ['1', false];使用readonly关键字可以保证无法对这个元组进行任何操作，例如数组进行push方法也会提示语法错误
let arr: readonly [string, boolean] = ['1', false];arr = ['123', true];
十、枚举类型
1、数字枚举
数字枚举默认是从0开始不断递增，如果自己对定义了初始值将会自动递增
enum Color {Red,Green,Blue,
}console.log(Color.Green); // 1
2、字符串枚举
字符串没有自动增长的行为，因此字符串可以很好地序列化。字符串枚举必须保证每一个成员都要有字符串字面量
enum Color {Red = 'red',Green = 'green',Blue = 'bule',
}console.log(Color.Green); // green
3、异构枚举
异构枚举就是数字枚举和字符串枚举一起使用，混合在一起
enum Color {No = 'No',Yes = 1,
}
4、const枚举
- const声明的枚举会被编译完成常量
const enum Types{NO = 'No',Yes = 1
}
- 普通声明的枚举会被编译完成为一个对象
enum Color {Red = 'red',Green = 'green',Blue = 'bule',
}
5、反向映射
枚举成员都可以有正向映射和反向映射，正向映射就是name->value,value->name
注意：字符串枚举成员不会有反向映射
enum Enum {fall,
}let a = Enum.fall;
console.log(a); // 0
let nameEnum = Enum[a];
console.log(nameEnum); // fall十二、Never类型
作用：表示不应该存在的状态
它和void的差异：
- void它是没有返回值但不会出错，never它是没有返回值只会有异常
- never在联合类型当中会被直接移除
十四、泛型
作用：它就是提供一个动态的类型，你可以使用不同的泛型参数名，只要在数量和使用方式上对应就行
function showArray<T>(a:T,b:T):Array<T>{return [a,b]
}showArray(1,2)
1、泛型约束
作用：对泛型进行类型的约束，保证它具有一定的属性，能够提供语法提示
interface Len {length:number
}function showArrayLength<T extends Len>(arg:T){arg.length
}showArrayLength([1,2])
使用keyof约束对象
function prop<T,K extends keyof T>(obj:T,key:K){return obj[key]
}let obj = {a:'1',b:'2'}prop(obj,'c') //Argument of type '"c"' is not assignable to parameter of type '"a" | "b"'
prop(obj,'a')
2、泛型类
它的定义和定义函数方式一致，在类名后面加<类型>
十五、tsconfig.json
生成tsconfig.json文件：通tsc --init生成
详细的ts的配置文件：
"compilerOptions": {"incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度"tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置"diagnostics": true, // 打印诊断信息 "target": "ES5", // 目标语言的版本"module": "CommonJS", // 生成代码的模板标准"outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD","lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array","allowJS": true, // 允许编译器编译JS，JSX文件"checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用"outDir": "./dist", // 指定输出目录"rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构"declaration": true, // 生成声明文件，开启后会自动生成声明文件"declarationDir": "./file", // 指定生成声明文件存放目录"emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件"sourceMap": true, // 生成目标文件的sourceMap文件"inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中"declarationMap": true, // 为声明文件生成sourceMap"typeRoots": [], // 声明文件目录，默认时node_modules/@types"types": [], // 加载的声明文件包"removeComments":true, // 删除注释 "noEmit": true, // 不输出文件,即编译后不会生成任何js文件"noEmitOnError": true, // 发送错误时不输出任何文件"noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用"importHelpers": true, // 通过tslib引入helper函数，文件必须是模块"downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现"strict": true, // 开启所有严格的类型检查"alwaysStrict": true, // 在代码中注入'use strict'"noImplicitAny": true, // 不允许隐式的any类型"strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量"strictFunctionTypes": true, // 不允许函数参数双向协变"strictPropertyInitialization": true, // 类的实例属性必须初始化"strictBindCallApply": true, // 严格的bind/call/apply检查"noImplicitThis": true, // 不允许this有隐式的any类型"noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)"noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)"noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)"noImplicitReturns": true, //每个分支都会有返回值"esModuleInterop": true, // 允许export=导出，由import from 导入"allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块"moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { // 路径映射，相对于baseUrl// 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置"jquery": ["node_modules/jquery/dist/jquery.min.js"]},"rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错"listEmittedFiles": true, // 打印输出文件"listFiles": true// 打印编译的文件(包括引用的声明文件)
}// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
"include": ["src/**/*"
],
// 指定一个排除列表（include的反向操作）"exclude": ["demo.ts"
],
// 指定哪些文件使用该配置（属于手动一个个指定文件）"files": ["demo.ts"
]
十六、namespace命名空间
作用：避免全局变量造成污染
- 通过export暴露
- 通过namespace关键字定义
当两个命名空间重名的时候会进行合并
十八、声明文件declare
作用：提供语法提示和代码补全等功能
使用：通过.d.ts文件去写declare声明
Ts写发布订阅模式
interface EventFace {on: (name: string, callback: Function) => void;emit: (name: string, ...args: Array<any>) => void;off: (name: string, fn: Function) => void;once: (name: string, fn: Function) => void;
}interface List {[key: string]: Array<Function>;
}class Dispatch implements EventFace {list: List;constructor() {this.list = {};}on(name: string, callback: Function) {const callbackList: Array<Function> = this.list[name] || [];callbackList.push(callback);this.list[name] = callbackList;}emit(name: string, ...args: Array<any>) {let eventName = this.list[name];if (eventName) {eventName.forEach((fn) => {fn.apply(this, args);});} else {console.error('该事件未被监听');}}off(name: string, fn: Function) {let eventName = this.list[name];if (eventName) {let index = eventName.findIndex((fns) => fns === fn);eventName.splice(index, 1);} else {console.error('该事件未被注册');}}once(name: string, fn: Function) {let decor = (...args: Array<any>) => {fn.apply(this, args);this.off(name, decor);};this.on(name, decor);}
}let myEvent = new Dispatch();myEvent.on('show', () => {console.log('展示');
});
myEvent.on('show', () => {console.log('展示1', arguments);
});
myEvent.once('show', () => {console.log('helloworld');
});
myEvent.emit('show', 'zjt', 'hello');二十四、partial和pick
- partial
作用：快速设置T中的所有属性为可选
type Person = {name:stringage:number
}
/*** type p = {name?: string;age?: number;
}*/
type p = Partial<Person>
源码：
// 通过遍历T类型的所有属性来实现可选
type MyPartial<T> = {[p in keyof T]?:T[p]
}
- pick
作用：在T中选取指定一组属性，返回一个新的类型定义
type Person = {name: string;age: number;text: string;address: string;
};type Ex = 'text' | 'age';type A = Pick<Person, Ex>;
源码：
// k被进行泛型约束，确保K类型一定在T里面，再通过遍历K来实现类型的选定
type MyPick<T, K extends keyof T> = {[P in K]: T[P];
};
二十五、readonly和record
- readonly
作用：将T类型的所有属性变为只读属性
type Person = {name:stringage:number
}
/*** type p = {readonly name: string;readonly age: number;
}*/
type p = Readonly<Person>
源码：
type MyReadonly<T> = {readonly [P in keyof T]:T[P]
}
- record
作用：根据类型参数来映射出一个key，value形式的类型出来
type petsGroup = 'dog' | 'cat' | 'fish'interface IPetInfo{name:string,age:number
}/*** type IPets = {dog: IPetInfo;cat: IPetInfo;fish: IPetInfo;
}*/
type IPets = Record<petsGroup,IPetInfo>
源码：
type MyRecord<T extends keyof any,K> = {[P in T]:K
}
二十七、infer关键字
作用：
- 定义关键字起占位效果
type zhanwei<T> = T extends Array<infer U> ? U : T;type A = zhanwei<(string | Symbol)[]>;
- 类型提取
type Arr = ['a','b','c']type First<T extends any[]> = T extends [infer First,...any[]] ? First : []type a = First<Arr>
- 递归
type Arr = ['a', 'b', 'c'];type Reverse<T extends any[]> = T extends [infer first, ...infer rest] ? [...Reverse<rest>,first] : [];type a = Reverse<Arr>;
二十八、extends关键字
作用：
- 继承/拓展
- 约束
- 分配
)