TypeScript 详解

TypeScript 详解

一.TS基础概念

1.什么是TS

a.对比原理

它是 JS 的一个超集，在原有的语法基础上，添加了可选静态类型和基于类的面相对象编程

• 面相项目：
  TS - 面相解决大型项目中，架构以及代码，共建等复杂维护场景
  JS - 用于面相简单页面场景，脚本化语言

• 自主检测：
  TS - 编译期间，主动发现并且纠正错误
  JS - 运行时报错

• 类型检测：
  TS - 弱类型，支持动态，静态的类型检测
  JS - 弱类型，无类型选项检测

• 运行流程
  TS - 依赖编译
  =>.ts —> .js —> 浏览器

b.安装运行

	npm install -g typescript
	tsc -v

2.TS的基础类型与写法

• boolean | string | number | array | null | undefined

	//es
	let isEnabled = true
	let classs = 'baidu'
	let classNum = 2
	let	u = undefined
	let n = null
	let classArr = ['basic']

	//ts
	let isEnabled:boolean = true
	let classs:string = 'baidu'
	let classNum:number = 2
	let	u:undefined = undefined
	let n:null = null
	let classArr:Array<string> = ['basic']

• tuple - 元祖

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

• enum - 枚举

	//数字类枚举 - 可无赋值，默认从零开始，依次递增
	enum Score {
		BAD,	//0
		NG,		//1
		GOOD,	//2
		PERFECT	//3
	}
	let score: Score = Score.BAD

	//字符串类型枚举
	enum Score {
		BAD = 'BAD',	
		NG = 'NG',		
		GOOD = 'GOOD',	
		PERFECT = 'PERFECT'	
	}

	//反向映射
	enum Score {
		BAD,	//0
		NG,		//1
		GOOD,
		PERFECT	
	}
	let scoName = Score[0]  	//BAD
	let scoVal = Score['BAD']   //0

	//异构
	enum Enum {
		A,			// 0
		B,			// 1
		C = 'C',	// C
		D = 'D'		// D
		E = 6,		// 6
		F,			// 7
	}

• any | unknown | void

	// any  - 绕过所有类型检查 => 类型检查和编译筛查全部失效
	let anyValue: any = 'anyValue'
	anyValue = false
	anyValue = 123
	let value1:number = anyValue

	// unknown - 仅仅是绕过赋值检查 => 禁止更改传递
	let unknownValue:unknown
	unknownValue = true
	unknownValue = 123
	unknownValue = 'unknownValue'
	let value1:unknown = unknownValue  //OK
	let value1:boolean = unknownValue  //NOK
	let value3:any = unknownValue  //OK

	// void - 声明函数返回值为空
	function voidFunction():void{
		console.log("no return")
	}

	//never - 用不返回
	function error(msg: string):never {
		throw new Error(msg)
	}

• Object | object | { } - 对象

	interface Object {
		constructor :Function;
		toString():string;
		hasOwnProperty(v: PropertyKey): boolean;
	}

	interface ObjectConstructor {
		new(value?: any): Object;
	}


	//Object 包含原始类型
	function course(courseName: Object){
		// ...
	}
	course('baidu')  //ok


	//object 
	function course(courseName: object){
		// ...
	}
	course('baidu')  //error


	// {} - 描述一个没有成员的对象
	const obj = {}
	obj.prop = 'baidu' // Error

二.接口 - interface

• 对行为的抽象，具体行为由类来实现

	interface Class {
		name: string;
		time: number;
	}
	let baidu: Class = {
		name: 'ts',
		time: 18
	}

	//只读 & 任意
	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 { d: string }
	interface F { d: number }

	type ABC = A & B & C

	let abc: ABC = {
		x: {
			d: false,
			e: 'class',
			f: 5
		}
	}

	//合并冲突
	interface A {
		c: string;
		d: string;
	}
	interface B {
		c: number;
		e: string;
	}
	type AB = A & B;
	let ab: AB = {
		d: 'baidu',
		e: 'baidu'
	}
	//合并 => c: never

四. 断言 - 类型的中间执行时声明，转换（过程中和编译器的交流）

	//尖括号形式
	let anyValue: any = 'baidu';
	let anyLength: number = (<string>anyValue).length; //阶段性类型

	// as声明
	let anyValue: any = 'baidu';
	let anyLength: number = (anyValue as string).length;

五.类型守卫 - 保障在语法规定范围做进一步确认业务逻辑

	interface Teacher {
		name: string;
		courses: string[];
	}
	interface Student {
		name: string;
		startTime: Date;
	}

	type Class = Teacher | Student;

	// in - 定义属性场景下内容确定
	function startCourse(cls: Class){
		if('courses' in cls){
			//
		}
		if('startTime' in cls){
			//
		}
	}

	// typeof | instanceof - 类型分类场景下的身份确认
	function class(name: string, score: string | number){
		if(typeof score === 'number'){
			//
		}
		if(typeof score === 'string'){
			//
		}
	}

六. TS 进阶

1.泛型

• 让模块可以支持多种类型的数据 - 让类型和值一样，可以被传递赋值

	function startClass<T, U>(name: T, score: U): U{
		return name + score
	}
	
	function startClass<T, U>(name: T, score: U): String {
		return `${name}${score}`
	}
	
	function startClass<T, U>(name: T, score: U): String {
		return (name + String(score)) as any as T
	}
	

2. 装饰器

	{
		"compilerOptions": {
			"experimentalDecorators":true
		}
	}
	
	function baidu(target: Function): void{
		target.prototype.startClass = function ():void {
			//拓展方法
		}
	}
	
	@baidu
	class Class {
		constructor (){
			//业务逻辑
		}
	}
	

	//属性装饰器 | 方法 
	function nameWrapper(target: any, key: string){
		//属性加工
	}

TS的原理
编译 => 运行