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()
