类型别名
方便较长的类型使用,方便类型复用。类型首字母一般大写。
// 起别名
type Str = string | string[];
let str: Str = "hello";
str = ["1", "2", "3"];
交叉类型
交叉类型是将多个类型叠加合并组成新的类型,新类型包含了所有被合并类型的所有属性。
type Draggable = {
drag: () => void;
};
type Resizeable = {
resize: () => void;
};
// 定义交叉类型
type UIWidget = Draggable & Resizeable;
// 重写交叉类型中所有的方法
let textBox: UIWidget = {
drag: () => {},
resize: () => {},
};
字面量类型
紫米那里类型既可以设置变量的类型,又可以限制变量的取值范围。
字面量值的类型就是变量的类型,字面量值就是变量的取值范围。
type MyType = 1 | 2 | 3 | 4 | 5;
let a: MyType;
a = 1;
可空类型
在
TypeScript
中,undefined
和null
这两个值本身也可以作为类型使用。
undefined
一般为意料之外的空(接口没有值返回 undefined);
null
一般是意料之内的空(传递的是 null)。
// undefined
let nothing: undefined = undefined;
// null
let nothingMuch: null = null;
可选链操作符
允许开发者通过链式方式访问一个对象上可能为
null
或undefined
的属性,并且不用检查中间的属性是否为空。
简单理解:判断内容是否存在,避免元素不存在时获取其属性报错问题。
let str: number[] | null = [ 1, 2, 3 ];
// 如果str存在,则获取下标0的值
str?.[0];
空值合并运算符
空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
实质上是三元运算符的简写。
let speed: number | null = 10;
// 如果speed存在,则输出30
speed ?? 30; // 相当于 speed !== null ? speed : 30;
类型断言
通过类型断言可以覆盖 TypeScript 编译器的推断,当开发者比 TypeScript 更加清楚它的类型时使用。
可以用来告诉解析器变量的实际类型。
// 语法格式
变量 = <类型>变量;
变量 = 变量 as 类型;
// 获取dom元素
const phone = document.getElementById("phone"); // TypeScript提示的类型 HTMLElement | null
// phone.value 点不出来报错,需要类型断言
(<HTMLInputElement>phone).value;
(phone as HTMLInputElement).value;
unknown 类型
unknown 是更加严格的 any 类型,在对 unknown 类型的变量执行操作之前必须先确定它的类型。
let anything: unknown = "hello";
anything.length; // 会报错,不能直接使用,要先指定类型
if (typeof anything === "string") {
anything.toUpperCase();
} else if (typeof anything === "function") {
anything();
};
never 类型
never 表示永远不会发生的类型,即永远不能有值。比如用于抛出错误的函数,用于执行无限循环的函数,它们的返回值就是
never
,再比如never[]
数组中不会有值。
const throwError = (message: string): never => {
throw new Error(message);
// return undefined; 执行不了,没有任何返回值
};