typescript基础

• 原理
  他是javascript的一个超集,在原有语法基础上,添加可选的静态类型和基于类的面向对象编程
• 和js的区别

-- 面向项目:
ts: 面向解决大型复杂项目,架构以及代码维护复杂场景
js: 脚本化语言,用于面向简单场景
-- 自助检查:
ts: 编译期间,主动发现并纠正错误
js: 运行时报错
-- 类型检测:
ts: 弱类型,支持对动态和静态数据类型的检测
js: 弱类型,无静态类型
-- 运行流程
ts: 依赖编译,依赖工程化体系
js: 直接在浏览器中运行
-- 复杂程度
ts: 模块化,泛型,接口

• 安装
  npm i -g typescript
• 编译
  tsc test.ts
所有的类型检测和语法检测都是在编译时报错
• ts基础类型豫写法
  boolean,string,number,array,null,undefined

// js语法
let isEnabled = true;
let class = "xiaoyuan"
let classNumber = 2
let u = undefined
let n = null
let classArr = ['base','execute']
// ts语法
let isEnabled:boolean = true;
let class:string = "xiaoyuan"
let classNumber:number = 2
let u:undefined = undefined
let n:null = null
let classArr:string[] = ['base','execute']
let classArr:Array<string> = ['base','execute']

• 元组:(tuple) 数组中想定义不同的类型

let tupleType = [string,boolean]
tupleType = ['xiaoyuan',true]

• 枚举:(enum)

// 数字类型
enum Score{
	BAD,
	NG,
	GOOD,
	PERFECT
}
// 默认从0开始,从上往下一次递增
let sco: Score = Score.BAD;
// 字符串类型
enum Score{
	BAD='bad',
	NG="ng",
	GOOD="good",
	PERFECT="perfect"
}
// 没有赋值的字符串默认从0开始,只有不是字符串就加一
let scoName = Score[0] // BAD  正向
let scoVal = Score['bad'] // 反向
// 异构
enum Enum{
	A, // 0
	B, // 1
	C="C",
	D="D",
	E=6,
	F // 7
}
// 写出相关枚举值

• any unknown void

// any: 绕过所有类型检查,类型检测和编译筛查都失效
// any可以赋值为任何值,也可以赋值给其他类型
let anyVal = 1 //ok
let anyVal = "xiaoyuan" //ok
let anyVal = true //ok
let numberVal:number = anyVal //ok
// unknown: 绕过赋值检查,禁止更改传递
let unkonwnVal:unknown;
// 可以赋值给任何值,类型只能赋值unknown , any
unkonwnVal= 1 //ok 
unkonwnVal= "xiaoyuan" //ok
unkonwnVal= true //ok
let val:unknown = unkonwnVal; //ok
let val:any = unkonwnVal; //ok
let val:boolean = unkonwnVal; // 错误的

// void: 用来声明函数的返回值
function voidFn():void{
} // 没有返回值的函数

// never: 函数永不返回
function error(msg:string):never{
}

• object / {}

  // ts将js的obj分为两个接口来定义
  // 新增属性
  interface objConstructor{
  	create(o:object|null):any
  }
  // 原型上的属性: obj.prototype
  interface object{
	   constructor:Function;
	   toString():string;
	   toLocaleString():string;
	   valueOf(): Object;
	   hasOwnProperty(v:PropertyKey):boolean;
	   isPropertypeOf(v:Object):boolean;
  }
  // {} 空对象
  const obj= {}
  obj.prop = "xiaoyuan"; //Error
  // 可以使用原型上的方法
  obj.valueOf()

• 接口

// 对行为的一种抽象,具体行为由类实现
interface Class{
	name:string;
	tiem:number;
}
let classRoom:Class = {
	name:"ts",
	time:2
}
// 只读 & 任意
interface Class{
	readonly name:string;
	time:number
}
// readonly和js中const的区别
let arr:number[] = [1,2,3,4,5]
let ro: ReadonlyArray<number> = arr;
// 这时候对ro进行赋值,改变其属性都会报错
ro[0] = 12 //error
ro.push(5) //error
ro.length = 10 // error
arr = ro; // error

// 任意
interface Class{
	readonly name:string;
	time:number;
	[propName:string]:any;
}
const c1 = {name:"js",time:1}
const c2 = {name:"js",time:1,level:1}

• 交叉类型

// 合并
interface A{x:D}
interface B{x:E}
interface C{x:F}

interface D{d:number}
interface E{e:string}
interface F{f:boolean}

type ABC = A & B & C;
let abc:ABC = {
	x:{
		d:24,
		e:"xiaoyuan",
		f: true
	}
}
// 合并冲突
interface A{
	c:string;
	d:string;
}
interface B{
	c:number;
	e:string;
}
type AB = A & B
let ab:AB = {
	d:'xiaoyuan',
	e:'xiaoyuan'
}
// ⇒ 且的关系,此时c: never,将不存在

• 断言

// 编译状态产生作用
let anyVal:any = "hi zhaowa"
// 尖括号形式
let anyLength:number = (<string>anyVal).length;
// as
let anyLength:number = (anyVal as string).length;
// 非空
type ClassTime = () => number;
const start = (classTime:ClassTime | undefined)=>{
	let num = classTime!(); // 具体类型待定,但是非空
}
// 应用场景
let tsClass:number | undefined = undefined;
const age:number = tsClass!;

• 类型守卫
  保障语法规定范围内,额外的确认

interface Teacher{
	name:string;
	courses:string[];
}
interface Student{
	name:string;
	startTime:Date;
}
type Cls = Teacher | Student
function Course(cls:Cls){
	if('courses' in cls){
	  // 表示老师
	}
}
// typeof / instanceof 分类场景下判断
// typeof 判断类型
typeof cls.score == "number"
// instanceof 判断是否包含
cls instanceof Teacher
// 自定义类型
const isTeacher = function(cls:Teacher|Student):cls is Teacher{
 // 老师的内容
}
const getName = (cls:Teacher | Student)=>{
	if(isTeacher(cls)){
		// 判断是老师类型执行
	}
}

• 函数重载

class Cls{
	start(name:number;score:number):number;
	start(name:string;score:string):string;
	start(name:string;score:number):number;
	start(name:Comnbinable;score:Comnbinable){
	 // 类型守卫
	}
}

• 泛型 - 重用

// 对重载的复用
function startClass<T,U>(name:T,score:U):T{}
// 利用as
function startClass<T,U>(name:T,score:U):T{
	return (name+String(score)) as any as T;
}

• 装饰器

function fn(target:Function):void{
	target.prototype.startClass = function():void{}
}
// 此时就相当于在Course上挂载了一个startClass方法
@fn
class Course{
}
// 装饰属性和方法

• ts原理流程

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