- 使用联合类型
联合类型保证传入的是联合中的某一个类型的值即可
function setId(id: number | string) {
console.log(typeof id);
}
-可选类型补充
可选类型可以看作是 类型 和 undefined 的联合类型：
function print(message?: string) {
console.log(message);
}
print();
print("message");
print(undefined);
-类型别名
针对对象，可以给对象类型起一个别名：
type Info = {
name: string,
age: number,
address: string
}
function printInfo(info: Info) {
console.log(info.name, info.age, info.address);
}
-类型断言as
有的时候ts无法获取到具体的类型信息，这时候需要我们去使用类型断言(as)
常见的应用场景：获取document的元素
const myEl = document.getElementById('img') as HTMLImageElement
myEl.src = '.....'
ts只允许断言转换为更具体或者不是很具体的类型版本，主要用于防止不可能的强制转换。
const data = 10 as string; // error
const data = (10 as unknown) as string;
-非空类型断言
某个方法传入的message可能存在undefined的时候，因此，这时候是会报错的。
function print(message?: string) {
console.log(message.toUpperCase());
}
print("test");
非空断言使用的是!，表示可以确定某个标识符是有值的，可以跳过ts在编译阶段对它的监测。
function print(message?: string) {
console.log(message!.toUpperCase());
}
-可选链的使用
当对象的属性不存在时，会短路，直接返回undefined，如果存在，便会继续执行。
type ParentInfo = {
name: string,
sonInfo?: {
name: string,
age?: number
}
}
const info: ParentInfo = {
name: "test1",
sonInfo: {
name: "test2",
age: 20
}
}
console.log(info.sonInfo?.name);
-??和!!的作用
!!操作符：
将一个其他类型转换为boolean类型;
??操作符：
空值合并操作符(??)是一个逻辑操作符，当操作符的左侧是null或者undefined时，返回其右侧操作符，否则返回左侧操作符。
const message = " ";
let flag1 = Boolean(message);
let flag2 = !!message;
const message = 'message';
const result = message ?? 'test';
console.log(result);
-字面量类型
可以将多个类型联合在一起
type Alignment = 'left' | 'right' | 'center';
function changeAlign(align: Alignment) {
console.log(align);
}
changeAlign('left');
-字面量推理
image.png
在进行字面量推理的过程中，info的参数实际上就是一个{label: string, send: string}的过程，因此，我们无法将string赋值到函数行参的字面量上去。
1、解决方法
const info = {
label: 'test',
send: 'B'
} as const
function getInfo(label: string, send: 'A' | 'B') {
console.log(label, send);
}
getInfo(info.label, info.send);
const info = {
label: 'test',
send: 'B'
}
function getInfo(label: string, send: 'A' | 'B') {
console.log(label, send);
}
getInfo(info.label, info.send as 'B');
