语言基础

2023-03-23 23:29| 来源: 网络整理| 查看: 265

后续//概述编译器过程工具类型系统分类TS VS JS代码编辑器设置tsconfig.jsontslint.jsonindex.ts编译运行类型全解anyunknown类型字面量constbooleannumberbigintstringsymbol对象结构化类型对象字面量句法属性可选属性只读声明对象的四种方式类型别名，并集，交集别名交集并集数组，元组，只读数组数组 Array元组 Tupenull undefined，void never枚举函数声明函数和调用函数5种函数什么方式剩余参数函数的其他调用方式注解this类型迭代器上下文类型推导多态泛型参数自动推导与显示注解泛型别名受限的多态泛型默认类型类型驱动开发类和接口类和继承接口与别名的区别声明合并实现实现接口还是扩展抽象类类是结构化类型类既声明值也声明类型多态混入装饰器模拟final类类型进阶处理错误异步编程，并发并行前后端框架命名空间和模块与javascirpt 互操作构建和运行

后续//

概述

编译器

过程 Typescirpt源码 -> TS AST类型检查器检查ASTTS AST->js源码js源码->js ASTAST->字节码

运行时计算字节码

工具

TSC 操作上面前三个步骤

后三步由浏览器 NodeJS 或其他的js引擎中的js运行时操作

类型系统

分类

显示声明

自动推导

TS VS JS

类型绑定

js动态，运行时才知道类型ts是静态，在编译前能捕获部分错误是否自动类型转换 js 会ts 多数不会何时检查类型 js不在乎使用类型，会尽所能把你提供类型转换成预期类型ts在编译时做类型检查，会做静态分析

何时报告错误

js在运行时抛出异常或执行隐式转换，ts在编译时报告句法或语法错误//实际在编辑输入代码后立刻就有反馈代码编辑器设置

tsc

tslint

@types/node

tsconfig.json

tsc —init 可以生产tsconfig.json

tslint.json

tslint —init 可以生成

index.ts

编译

运行

类型全解

any

unknown的子类型

如果想用any，最好使用显示注解，

noImplicitAny 和strict启用都可针对隐式any类型报错

unknown

必须显示注解

可以比较

不会推导unknown类型为某种特定类型必须先证明一个值是某种类型

let a: unknown = 30if(typeof a === 'number'){let d = a+10}

类型字面量

表示一个值的类型

const

常量

const c = true //这里推导出的c就是一个true类型“类型字面量”

boolean

any的子类

两个值，true false

number

整数，浮点，正负数，Infinity，NaN

bigint

新引入

处理较大整数时不用担心舍入误差

let a = 123n // 后面跟一个n

string

symbol

新建一个符号，不与其他任何符号相等，即使用相同名称创建一个也是这样

unique symbol 一定是const的，不能用let

对象

结构化类型

一种编程设计风格，只关心对象有哪些属性，不管属性使用什么名称，鸭子类型

对象字面量句法let a:{b:number} = {b: 12}

属性可选let a:{b:numberc?:string[key: number]: boolean // 任意多个数字属性}//a={b:1,10:true}

属性只读

readonly

声明对象的四种方式

字面量表示法

空对象字面量表示object类型

Object类型

类型别名，并集，交集

别名type Age = numbertype Person = {name: stringage: Age}

交集并集type Cat = {name:string,purrs:boolean}type Dog = {name:string,barks:boolean,wags:boolean}type CatOrDog = Cat | Dogtype CatAndDog = Cat & Dog

数组，元组，只读数组

数组 Arrayfunction buildArray(){let a = []a.push(1)a.push('x')return a}let myArray = buildArray()myArray.push(true) //这里会报错，当数组离开定义时所在的作用域后确定类型不在扩张

元组 Tupe

数组子类型，定义数组的一种特殊方式

声明时必须显示注解类型长度固定，各索引位上的值具有固定已知类型所以比数组安全 ```typescript let trainFares:[numbers,number?][]=[ [3.75], [8.23,7.7] ]

let list:[number,boolean, …string[]] = [1,false,’a’,’b’]

#### 只读数组```typescripttype A = readonly string[]type B = ReadonlyArraytype C = Readonly

null undefined，void never null是缺少值undefined是尚未赋值的变量void 是函数没有显示返回任何值never是函数不返回（抛出异常，永远运行下去）unknown是其他每个类型的父类型，never是其他每个类的子类型

枚举const enum Language{ English, Spanish, Russian}// 枚举不安全，如果坚持使用，可以制定一些TSLint规则，如发现数值枚举，和非const枚举发出提醒函数声明函数和调用函数5种函数什么方式```typescript //具名函数 function gree(name: string){ return ‘hello ‘+ name } //函数表达式 let greet2 = function(name: string){ return ‘hello ‘+ name

} //箭头函数表达式 let greet3 =(name: string) => { return ‘hello ‘+ name } //箭头函数简写 let greet4 =(name: string) => return ‘hello ‘+ name //函数构造法

let greet5 = new Function(‘name’,’return “hello “ + name’)

#### 可选参数和默认参数```typescriptfunction log(message:string,userId?: string){ //...}function log(message:string,userId='not signed in'){ //...}

剩余参数数组实现arguments实现//不安全类型是any

使用 …

函数的其他调用方式

call

apply

bind

注解this类型

this的值取决于调用方式，

可以指定this ，防止这种混淆 ```typescript function fancyDate(this:Date){ return ${this.getDate()}/${this.getMonth()}/${this.getFullYear()} } #### 生成器函数- 生成一系列值的便利方式- 惰性的```typescriptfunction* createFibonaciiGenerator(){ let a = 0 let b = 1 while(true){ yield a; //调用next 把这个给调用方，然后停止执行 [a,b] = [b,a+b] }}// 显示注解生成器function* createNumbers(): IterableIterator{ //....}

迭代器可迭代对象有Symbol.iterator的属性对象，该属性的值为一个函数，返回迭代器迭代器有next方法的对象，该方法返回一个具有 value 和done属性的对象 ```typescript let numbers = { *Symbol.iterator{ for(let n=1;n numbertype Log = (message: string, userId?: string) => voidlet log: Log = ( message, userId = 'not signed in') => { let time = new Date().toISOString() console.log(time,message,userId)}

上下文类型推导行内声明，无需显式注解函数类型 ```velocity function times( f:(index: number)=>void, n:number ){…}

times(n=>console.log(n),4) //可以

function f(n){…} times(f,4) //不可以

#### 函数类型重载- 使用完整型调用签名，声明多个- 自己动手组合多个签名实现声明的签名```javascripttype Reserve = { (from:Date,to:Date, destination: string):Reservation (from:Date,destination:String):Reservation}let reserve: Reserve=( from:Date, toOrDestination:Date|string, destination?:string) => { //... if(toOrDestination instanceof Date&&destination !== undefined){ //... }else if(typeof toOrdestination === 'string'){ }}

多态

泛型参数type Filter = { (array:T[],f:(item: T)) => boolean):T[]}let filter:Filter = (array,f) => //...type Filter = { (array:T[],f:(item: T)) => boolean):T[]}let filter:Filter = (array,f) => //...type Filter = (array:T[],f:(item: T)) => boolean) => T[]let filter:Filter = //...type Filter = (array:T[],f:(item: T)) => boolean) => T[]let filter:Filter = //...fuction filter(array:T[],f:(item: T)) => boolean):T[]{...}

自动推导与显示注解

泛型别名type MyEvent = { target: T type: string}function triggerEvent(event: MyEvent):void{//...}triggerEvent({//T是 Element｜null target:document.querySelector('#myButton'), type:'mouseover'})

受限的多态function mapNode( node: T, f:(value: string)=>string):T{ return{ ...node, value:f(node.value) }}/// 多个约束type HasSides = {numberOfSides: number}type SidesHaveLength = {sideLength: number}function logPerimeter(s: Shape){ console.log(s.numberOfSides*s.sideLength) return s}// 模拟变长参数function call( f:(...args:T)=>R, ...args:T):R{ return f(...args)}

泛型默认类型type MyEvent = { target: T type: string}

类型驱动开发

先规划类型，再填充细节

类和接口

类和继承

class extends

abstractprivate protected publicreadonly 属性 ```typescript class Postion{ constructor( private file: File, //自动赋值给 this.file 并设置为私有 private rank: Rank){} } abstract class Piece{ //不能new protected position: Position constructor( private readonly color:Color, //自动赋值,并设为私有 file:File, rank:Rank ){ this.position = new Position(file,rank) } abstract canMoveTo(position: Position):boolean //子类必须实现

}

class King extends Piece{ canMoveTo(postion:Position){ //… } }

#### super- 方法调用 super.take- 构造方法调用 super()- 只能访问父方法，不能访问父属性### 以this为返回类型```typescriptlet set = new Setset.add(1).add(2)class Set{ add(value:number):Set{ //这里的Set 改为 this，下面子类的实现就可以删除 //... }}class MutableSet extends Set{ add(value:number):MutableSet{ //... }}

接口类经常当做接口使用与类型别名相似，接口是一种命名类型的方式 ```typescript type Food = { calories: number tasty:boolean } type Sushi = Food&{ salty: boolean }

interface Food { calories: number tasty:boolean }

interface Sushi extends Food{ salty: boolean } ```

与别名的区别别名更为通用，右边可以是任何类型，包括类型表达式扩展接口时，会检查扩展接口是不是可以赋值给被扩展的接口

同名接口自动合并，同名类型别名将导致编译错误

声明合并

合并的接口声明方式的方式必须一样

实现

implements

可以声明属性，不能使用可见性修饰符，不能用static，可以用readonly

实现接口还是扩展抽象类

类是结构化类型

两个不用名称的类，实现了同样的方法或有同样的属性，可以替换使用

有private 或 protect 时，情况就不一样了

类既声明值也声明类型

多态

混入

装饰器

实验特性，需要在tsconfig中开启

模拟final类

类型进阶

处理错误

异步编程，并发并行

前后端框架

命名空间和模块

与javascirpt 互操作

构建和运行

【本文地址】

语言基础

语言基础

今日新闻

推荐新闻