typescript编译成js命令
tsc 文件.js
自动编译
tsc --init
ts数据类型
原有类型:string、null、boolean、Array、null、undefined、symobol、object、bigint
新增类型:tuple(元祖)、enum(枚举)、any(任何类型)、void(用于标识方法返回值的类型,表示该方法没有返回值。)、never (never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值)、unknown(任意 类型更安全)
数组语法
方式一:let 数组名:类型[] = [值1,值2] let arrHeros:string[] = ['贾维斯','维托妮卡'] 方式二:let 数组名:Array<类型>=[值1,值2] let arrHeros:Array<string> = ['贾维斯','维托妮卡']
特点:元素类型固定
长度不限制
数据类型|元组
语法 let 元祖名:[类型1,类型2,类型3]=[值1,值2,值3]
枚举
enum 枚举名{枚举项=枚举值} enum Guntype{k=1,v=2} enum 枚举名{枚举项} enum Guntype{k,b}
新增数据类型
tulp元祖 enmu枚举 any任意类型
安装ts
Vue add @vue/typescript
降级编译
tsconfig.js target:'版本号'
严格模式
strict:true 全局严格模式
类型别名
type 类型名字=类型
接口
interface 名字{}
类型守卫
tyepof 案例 function printAll(strs:string|string[]|null){ if(strs){ if(typeof strs === 'object'){ for(let s of strs){ console.log(s) } }else if(typeof strs ==='string'){ console.log(strs) }else{ } } }
类型断言
let 变量名=赋值类型 as 类型 案例 const myCavas1=<HTMLCanvasElement>document.getElementById("main")
只读属性
readonly
类型创建
typeof操作符 案例 let s= '贾维斯' let n:typeof s n='星期五' type Predicate=(x:unknown)=>boolean type k =ReturnType<Predicate> function f(){ return { x:10, y:3 } } type P=ReturnType<typeof f>
联合类型
keyof操作符 案例 type Point={ x:number, y:number } type P= keyof Point const P1:P='x' const P2:P='y'
类型内推理
infer 对比类型 案例 type GetRturntype<Type> = Type extends (...ags: never[]) => infer Return ? Return : never; type Num=GetRturntype<()=>number> let num:Num=100 type Str=GetRturntype<(x:string)=>string> let str:Str='' type bools=GetRturntype<(a:boolean,b:boolean)=>boolean[]> let bol:bools=[true,false] type Never=GetRturntype<string> let nev:Never='errp' as never function stringOrNum(x:string):number function stringOrNum(x:number):string function stringOrNum(x:string|number):string|number function stringOrNum(x:string|number):string|number{ return Math.random()>0.5?'hello':23 } type T1=GetRturntype<typeof stringOrNum> let t1:T1=100 let t2:T1='贾维斯'
类型的继承
implements 接口名字 例子 interface Point { ping(): void } class Song implements Point { ping() { console.log('实现了接口') } }
成员可见性
public 公开的,默认值。任何对象都可以访问 protected 受保护,只能在当前类或者子类访问 private 私有的,只能在当前访问
静态成员
static 关键字 案例 class Myclass{ static x=100 static print(){ console.log(Myclass.x) } } console.log(Myclass.x) Myclass.print()
基于类型守卫的this
this is 数据类型
抽象类和成员
abstract 关键字 案例 abstract class Base { abstract getName():string constructor() { } printName(){ console.log(this.getName()) } } class Derive extends Base{ getName(){ return '星期五' } } let d=new Derive() d.getName() d.printName()