TS常用特性总结

1. 常用类型

1.1 交叉类型

交叉类型就是通过**&**符号，将多个类型合并为一个类型。

interface T1{
	name: string
}

interface T2{
	age: number
}

type T3 = T2 & t1

const a:T3 {
	name: 'xm',
	age: 20
}

1.2 联合类型

联合类型就是通过**|**类型，表示一个值可以是几种类型之一。

const a: string|number = 1

1.3 字面量类型

字面类类型就是通过一个字符串或者数字或者布尔类型作为变量的类型。

// 字符串
type BtnType = 'default'|'primary'|'ghost';

const btn:BtnType = 'primay'

// 数字
const a:1 = 1

// 布尔
const a: true = true

1.4 字符串模板类型

字符串模板类型就是通过ES6的模板字符串语法，对类型进行约束。

type https = 'https://${string}'
const a:https = 'https://www.baidu.com'

2. 运算符

1. 非空断言运算符

非空断言运算符 **!**用于强调元素是非null非undefined，告诉typescript该属性会被明确的赋值。

// 你可以使用类型断言将其指定为一个更具体的类型：
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

// 也可以使用尖括号语法（注意尽量不要在 .tsx 文件内使用，会产生冲突），是等价的：
const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");


// 当你明确的知道这个值不可能是 null 或者 undefined 时才使用 ! 
function liveDangerously(x?: number | null) {
  console.log(x!.toFixed());
}        

2.2 可选运算符

可选链运算符 ?. 用于判断左侧表达式的值是否是null或者undefined，如果是将停止表达式运算。

const name = object?.name

2.3 空值合并运算符

空值合并运算符**??**用于判断左侧表达式的值是否是null或者undefined，如果是则返回右侧的值。

const a = b ?? 0

3. 操作符

3.1 keyof

keyof 用于获取某种类型的所有键，其返回值为联合类型。

const person:keyof{
	name: string,
	age: number
} = 'name' // const person: 'name' | 'age' = 'name'

3.2 typeof

typeof 用于获取对象或者函数的结构类型。

const a2 = {
	name: 'xm'
}

type T1 = typeof a2 // {name: string}

function fn1(x: number):number {
	return x * 10 
}

type T2 = typeof fn1 // (x: number) => number

3.3 in

in用于遍历联合类型

const obj = {
	name: 'xm',
	age: 20,
	sex: '男'
}

type T5 = {
	[p in keyof typeof obj]: string
}

/*
{
	name: string,
	age: string,
	sex: string
}
*/

3.4 T[K]

**T[K]**用于访问索引，得到索引所对应的值的联合类型。

interface T3{
	name: string,
	age: number
}

type T6 = T3[keyof T3] // string | number

4. 类型别名

类型别名用来给一个类型起个新名字。类型别名常用于联合类型。类型别名只是给类型起了个新名字，而不是创建了一个新的类型。

type Message = string | string []
let greet = (message: Message) => {
	// ...
}

5. 类型断言

类型断言就是告诉浏览器我非常确定的类型。

// 尖括号 语法
let someValue: any = 'this is a string'
let strLenth: number = (<string>someValue).length

// as 语法
let someValue: any = 'this is a string'
let strLenth: number = (someValue as string).length

6. 类型缩小

可以通过某些操作将变量的类型由一个较为宽泛的集合缩小到相对较小，较明确的集合。

let func = (anything: string | number) => {
	if(typeof anything === 'string'){
		return anything // 类型是 string
	}else{
		return anything // 类型是number
	}
}