typescript笔记1 环境配置 数据类型

"target": "es5" // 编译目标的js版本

"strict": true, // 严格检查
"noImplicitAny": true, // 禁用any类型
"strictNullChecks": true, // 检查null/undefined类型赋值

let flag:boolean = true

let arr:number[] = [1,2,3]
let arr2:Array<number> = [4,5,6]
let arr3:any[] = [1,"abc",false]

let arr:[string,number,boolean]=["hello",3.14,true]

enum Flag {	success = 1, error = 0} // 如果不赋值，默认为索引值0，1，2...,前一个枚举值+1
let f:Flag = Flag.success

let box:any = document.getElementById("box") // 可用于保存对象

let num:number | null | undefined // 声明联合类型，值可以时多种类型
console.log(num) // 如果不指定undefined，未赋值变量会报错
num = null // 如果不指定null, 变量不可赋值为null

function func():void{
	console.log("run")
 	return // 如果包含返回值则报错
}
function func2():number{
	return 1 // 如果返回类型不是number则报错
}

function error(message: string): never {
    throw new Error(message);
}

type Point = {
	x: number
	y: number
}
type ID = number | string

const myCanvas = document.getElementById('canvas1') as HTMLCanvasElement
const myCanvas2 = <HTMLCanvasElement>document.getElementById('canvas1')

// 参数align只能传给定选项值
function print(s:string, align: 'left' | 'right' | 'center'){}
// 返回值只能时给定选项值
function compare(a:string, b:string): -1 | 0 | 1{}
// 混合使用不同类型值
function config(config: ConfigType | 'auto'){}

function doRequest(url:string, method: 'GET' | 'POST'){}
const req = {
	url: 'https://a.com',
	method: 'GET'
}
doRequest(req.url,req.method) // 编译报错

type Method = 'GET' | 'POST'
const req = {
	method: 'GET' as Method
}

const req = {
	method: 'GET'
} as const

doRequest(req.rul, req.method as Method)

function padLaft(padding: number | string, input: string) {
	// return new Array(padding + 1).join(" ") + input 编译报错
	if (typeof padding === "number") { // 类型守卫，作用域内类型缩小
		return new Array(padding + 1).join(" ") + input 
	}
	return padding + input
}

function printAll(strs: string | string[] | null){
	if( strs && typeof strs === 'object'){
		// 处理string[]
		// 如果不判断strs, 此分支strs类型为string[] | null
	} else if (typeof strs === 'string'){
		// 处理string
	} else {
	 	// 处理null
	}
}

type Fish = {swim: ()=>void}
type Bird = {fly: ()=>void}
function move(animal: Fish | Bird){
	if('swim' im animal){
		animal.swim()
	}
	else{
		animal.fly()
	}
}

let x = Math.random() < 0.5 ? 10 : 'hello' // x的类型为 number | string

type Fish = { swim: () => void }
type Bird = { fly: () => void }
function isFish(pet: Fish | Bird): pet is Fish { 
    return (pet as Fish).swim !== undefined
}

function getSmallPet(): Fish | Bird {
    let fish: Fish = {
        swim: () => {
            console.log('fish swim')
        }
    }
    let bird: Bird = {
        fly: () => {
            console.log('bird fly')
        }
    }
    return Math.random() < 0.5 ? fish : bird
}

let pet = getSmallPet()
if (isFish(pet)) { // 通过类型谓词缩小此作用域的类型范围
    pet.swim()
} else {
    pet.fly()
}

type Shape = Circle | Square | Triangle
function getArea(shape: Shape) {
	switch(shape.kind) {
		case 'circle':
			return ...
		case 'square':
			return ...
		default:
			const _exhaustiveCheck: never = shape // 没有处理到Triangle，此处将编译报错
			return _exhaustiveCheck
	}
}