ts

一、TS基础概念

1、什么是TS
TypeScript是js的一个超集，在原有的基础山，添加了可选的静态类型和基于类的面向对象编程

2、ts和js的区别

• 面向项目：
  TS解决大型复杂项目 架构以及难以维护等场景
  JS脚本化语言 面相单一小型项目
• 自主检测：
  TS编译期间主动发现错误并纠正
  JS运行时报错
• 类型检测：
  TS弱类型，支持动态和静态类型的检测
  JS弱类型，无检测
• 运行流程：
  TS依赖编译，依赖工程化体系
  JS浏览器运行
• 复杂特性：
  TS 模块化 泛型 接口
• 安装运行
  npm install -g typescript
  tsc -v
  tsc test.js

3、TS基础类型与写法

let isEnable : boolean = true;
let class:string = ‘zhaowa’
let classNum:number = 2
let u:undefined = undefined
let n:null = null
let classArr: string[] = [‘basic’, ‘excute’]
let classArr: Array = [‘basic’,‘excute’]

4、tuple - 元祖

let tupleType: [string, boolean]
tupleType = ['date', true]

5、enum - 枚举

// 数字类枚举
enum Score = {
	BAD,
	NG,
	GOOD,
	PERFECT
}
let sco:Score = Score.BAD
// 字符串类型枚举
enum Score {
	BAD = 'BAD',
	NG = 'NG',
	GOOD = 'GOOD',
	PERFECT = 'PERFECT'
}
// 反向映射
enum Score {
	BAD,
	NG,
	GOOD,
	PERFECT
}
let scoName = Score[0] // BAD
let scoValue = Score['BAD'] // 0
// 异构
enum Enum {
	A, // 0
	B, // 1
	c = 'C',
	d = 'D',
	E = 6,
	F // 7
}
// 问：写出异构的枚举值并将其转为js实现
let Enum
(function(Enum){
	Enum['A'] = 0;
	Enum['B'] = 1;
	Enum['C'] = 'C';
	Enum['D'] = 'D';
	Enum['E'] = 6;
	Enum['F'] = 7;
})(Enum || (Enum={}))

6、any unknown void

// any: 绕过所有类型检查 => 类型检测和编译筛查都全部失效
let anyVal: any = 123
anyVal = 'anyVal'
anyVal = false
// unknown: 绕过了赋值检查 => 禁止更改传递
// void: 声明函数的返回值 void 0 => 安全的undefined值
function voidFun(): void{
	console.log('void')
}
// never: 函数永不返回
function neverFun(msg: string): never{
	throw new Error('')
}

7、接口

// TS将js的object分成两个接口来定义
interface ObjectConstructor {
	create(o:object || null): any
}
interface Object {
	constructor: Function;
	toString: string;
	toLocalString: string;
	valueOf: Object;
	hasOwnProperty:(v:propertyKey): boolean;
	isPropertyOf: (v: Object): boolean
}

二、接口

对行为的抽象

interface class {
	name: string;
	time: number;
}
let zw: Class {
	name: 'ts',
	time: 1
}
// 只读:和js的区别 ts的存在于定义阶段第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候 js的存在于执行阶段
interface Class {
	readonly name: string;
	time: number;
}
// 任意
interface Class {
	readonly name: string;
	time: number;
	[propName: string]: any;
}

三、交叉类型

> 合并：
>  interface A {x: D}
>  interface B {x: E}
>  interface C {x: F}
>  interface D{d: boolean}
>  interface E{e: string}
>  interface F{f: number}
type ABC = A & B & C
let  ABC : abc = {
	x: {d: false,
	e: 'zhaowa',
	f: 5
}
// 合并冲突
interface A {
	a: string,
	c: string
}
interface B {
	c: number,
	d: string
}
type AB = A & B 
let AB = A & B {
	d: 'class',
	e: 'class'
}
// c : never

四、断言（类型声明 转换 -> 开发者和编译器的告知交流）

> 编译状态在产生作用
> // 尖括号形式声明
> let anyValue: any  = 'hi zw'
> let anyLength: number = (<string>anyValue).length
> 
> // as声明
> let anyValue: any = 'hi zw'
> let anyLength: number = (anyValue as string).length
> 非空： 只判断不为空
> type ClassTime = () => number
> const start = (classTime： ClassTime | undefined) => {
> 		let num = className!() // 具体类型待定 但是确定非空
> }
> // 使用场景
> const tsClass : number | undefined = undefined
> const zw: number = tsClass!
> // 底层实现后 上层应用：
> const tsClass = undefined
> const zw = tsClass
> // 肯定化保证
> let score: number
> startClass()
> console.log( 2 * score )
> function startlass() {
> 	score = 5
> }
> let score!:number  // 告知编辑器 运行时会被赋值的

五、类型守卫

多态：多重状态类

interface Teacher {
	name: string;
	courses: string[];
	score: number;
}
interface Student {
	name: string;
	startTime: Date;
	score: string
}
type Class = Teacher | Student;
// in - 是否包含某种特性
function startCourse(cls: Class) {
	if('courses' in cls){
		// 老师
	}
	if('startTime' in cls){
		// 学生
	}
}
// typeof / instanceof - 类型分类场景下的身份确认
function starCourse(cls: Class){
	if(typeof cls.score === 'number'){
		// 老师
	}
	if(cls instanceof Student){
		// 学生
	}
}
// 自定义类型
const isTeacher = function(cls: Teacher | Student): cls is Teacher{
	// 老师
}
const getInfo = (cls: Teacher | Student) => {
	if(isTeacher(cls)) {
			// 老师
	}
}

六、TS进阶方案

> 1. 函数重载
> 2. 泛型：重用 确定参数的类型
function startClass <T, U>(name: T, score: U): T {}
function startClass <T, U>(name: T, score: U): string {
        // 逻辑
    }
    function startClass <T, U>(name: T, score: T): T {
        return (name + score) as T;
    }
> 3. 装饰器：decorator 通用化处理 添加相应的能力

```typescript
function ZW(target: Function): void {
	target.prototype.startClass = function(): void {
		// 逻辑
	}
}
@ZW 
class Course {
	constructor(){
		// 业务逻辑	
	}
}
 // 属性方法装饰器
 functionnameWrapper(target: any, key: string): void{
	Object.defineProperty(target, key, {})
}
class Course {
	constructor() {
		// 业务逻辑
	}
	@nameWrapper
	public name: string;
}

七、TS原理流程

// 1. 源码
 		var a = 2;
// 2. scanner扫描器生成令牌流
	[
		'var': 'keuword',
		'a': 'identifier',
		'=': 'assignment',
		'2': 'imteger',
		';': 'eos',
	]	
// 3. parser 解析器
	{
		operation: '=',
		left: {
			keyword: 'var',
			right: 'a',
		}
		right: '2'
	}
// 4. binder 绑定器
	AST节点 node.symbol 
// 5. 
	校验器：
	ts节点语法检查 => 类型检查
	发射器：
	翻译完每个node节点的内容，翻译成js => 输出