ts、typescript基础笔记

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