any
TypeScript 中提供了一个内置类型 any ,来表示所谓的任意类型。 有时候,这也是必要的,比如console.log(), 对于 log 函数,我们就可以使用 any 作为参数的类型
log(message?: any, ...optionalParams: any[]): void
// 我们可以使用任意参数类型来调用log方法
除了显式的标记一个变量或参数为 any,在某些情况下你的变量/参数也会被隐式地推导为 any。比如使用 let 声明一个变量但不提供初始值,以及不为函数参数提供类型标注:
// any
let foo;
// foo、bar 均为 any
function func(foo, bar) {}
上述代码,在 tsconfig 中启用了 noImplicitAny 时会报错,我们可以显式为这两个参数指定 any 类型,或者暂时关闭这一配置(不推荐)。
// 被标记为 any 类型的变量可以拥有任意类型的值
let anyVar: any = "linbudu";
anyVar = false;
anyVar = "linbudu";
anyVar = {
site: "juejin",
};
anyVar = () => {};
// 标记为具体类型的变量也可以接受任何 any 类型的值
const val1: string = anyVar;
const val2: number = anyVar;
const val3: () => {} = anyVar;
const val4: {} = anyVar;
对于 any 类型的变量标记,可以认为类型推导与检查是被完全禁用的:
let anyVar: any = null;
anyVar.foo.bar.baz();
anyVar[0][1][2].prop1;
// 不会报错
any 类型的主要意义,其实就是为了表示一个无拘无束的“任意类型”,它能兼容所有类型,也能够被所有类型兼容。这一作用其实也意味着类型世界给我们开了一个外挂,无论什么时候,我们都可以使用 any 类型跳过类型检查。 不建议乱用 any,导致 TypeScript 变成 AnyScript。
Tips
- 如果是类型不兼容报错导致使用 any,考虑用类型断言替代
- 如果想表达一个未知类型,更合理的方式是使用 unknown
unknown
一个 unknown 类型的变量可以再次赋值为任意其它类型,但只能赋值给 any 与 unknown 类型的变量:
let unknownVar: unknown = "linbudu";
unknownVar = false;
unknownVar = "linbudu";
unknownVar = {
site: "juejin",
};
unknownVar = () => {};
const val1: string = unknownVar; // Error
const val2: number = unknownVar; // Error
const val3: () => {} = unknownVar; // Error
const val4: {} = unknownVar; // Error
// unknown 只能赋值给any或者unknown
const val5: any = unknownVar;
const val6: unknown = unknownVar;
any 就像是 “我身化万千无处不在” ,所有类型都把它当自己人。
unknown 就像是 “我虽然身化万千,但我坚信我在未来的某一刻会得到一个确定的类型” ,只有 any 和 unknown 自己把它当自己人。
类型断言
要对 unknown 类型进行属性访问,需要进行类型断言,即“虽然这是一个未知的类型,但我跟你保证它在这里就是这个类型!”:
let unknownVar: unknown;
unknownVar.foo(); // 报错:对象类型为 unknown
// 断言
let unknownVar: unknown;
(unknownVar as { foo: () => {} }).foo();
在类型未知的情况下,更推荐使用 unknown 标注。eg:
function myFunc(param: unknown) {
param.forEach((element) => {}); // X “param”的类型为“未知”。
}
如果要将 unknown 类型的变量断言到数组类型,我们可以这么写:
function myFunc(param: unknown) {
(param as unknown[]).forEach((element) => {});
}
never
内置类型 never 描述一个“什么都没有”的类型。相比另一个“什么都没有”的类型,void。never 还要更加空白一些。
type UnionWithNever = "linbudu" | 599 | true | void | never;
将鼠标悬浮在类型别名之上,会发现这里显示的类型是"linbudu" | 599 | true | void。never 类型被直接无视掉了,而 void 仍然存在。这是因为,void 作为类型表示一个空类型,就像没有返回值的函数使用 void 来作为返回值类型标注一样,void 类型就像 JavaScript 中的 null 一样代表“这里有类型,但是个空类型”。 而 never 才是一个“什么都没有”的类型,它甚至不包括空的类型,严格来说,never 类型不携带任何的类型信息,因此会在联合类型中被直接移除,比如我们看 void 和 never 的类型兼容性:
declare let v1: never;
declare let v2: void;
v1 = v2; // X 类型 void 不能赋值给类型 never
v2 = v1;
在编程语言的类型系统中,never 类型被称为 Bottom Type,是整个类型系统层级中最底层的类型。和 null、undefined 一样,它是所有类型的子类型,但只有 never 类型的变量能够赋值给另一个 never 类型变量。 通常我们不会显式地声明一个 never 类型,它主要被类型检查所使用。但在某些情况下使用 never 确实是符合逻辑的,比如一个只负责抛出错误的函数:
function justThrow(): never {
throw new Error();
}
在类型流的分析中,一旦一个返回值类型为 never 的函数被调用,那么下方的代码都会被视为无效的代码(即无法执行到):
function justThrow(): never {
throw new Error();
}
function foo(input: number) {
if (input > 1) {
justThrow();
// 等同于 return 语句后的代码,即 Dead Code
const name = "linbudu";
}
}
显示利用做类型检测
假设,我们需要对一个联合类型的每个类型分支进行不同处理:
declare const strOrNumOrBool: string | number | boolean;
if (typeof strOrNumOrBool === "string") {
console.log("str!");
} else if (typeof strOrNumOrBool === "number") {
console.log("num!");
} else if (typeof strOrNumOrBool === "boolean") {
console.log("bool!");
} else {
throw new Error(`Unknown input type: ${strOrNumOrBool}`);
}
如果我们希望这个变量的每一种类型都需要得到妥善处理,在最后可以抛出一个错误,但这是运行时才会生效的措施,是否能在类型检查时就分析出来?
实际上,由于 TypeScript 强大的类型分析能力,每经过一个 if 语句处理,strOrNumOrBool 的类型分支就会减少一个(因为已经被对应的 typeof 处理过)。而在最后的 else 代码块中,它的类型只剩下了 never 类型,即一个无法再细分、本质上并不存在的虚空类型。在这里,我们可以利用只有 never 类型能赋值给 never 类型这一点,来巧妙地分支处理检查:
declare const strOrNumOrBool: string | number | boolean;
if (typeof strOrNumOrBool === "string") {
// 一定是字符串!
strOrNumOrBool.charAt(1);
} else if (typeof strOrNumOrBool === "number") {
strOrNumOrBool.toFixed();
} else if (typeof strOrNumOrBool === "boolean") {
strOrNumOrBool === true;
} else {
// 只能是never类型了,再利用never赋值给never
const _exhaustiveCheck: never = strOrNumOrBool;
throw new Error(`Unknown input type: ${_exhaustiveCheck}`);
}
TypeScript 中 Top Type(any / unknown) 与 Bottom Type(never)
类型断言
TypeScript 中的类型断言是一种手动指定变量或对象属性的类型的方法。它可以帮助我们在某些情况下规避类型检查器的限制,但需要谨慎使用,因为滥用类型断言会带来一些风险。
它其实就是一个将变量的已有类型更改为新指定类型的操作,它的基本语法是 as NewType,我们可以将 any / unknown 类型断言到一个具体的类型。
let unknownVar: unknown;
(unknownVar as { foo: () => {} }).foo();
还可以 as 到 any 来为所欲为,跳过所有的类型检查:
const str: string = "linbudu";
// 不要使用!!
(str as any).func().foo().prop;
也可以在联合类型中断言一个具体的分支:
function foo(union: string | number) {
if ((union as string).includes("linbudu")) {
}
if ((union as number).toFixed() === "599") {
}
}
但是类型断言的正确使用方式是,在 TypeScript 类型分析不正确或不符合预期时,将其断言为此处的正确类型:
interface IFoo {
name: string;
}
declare const obj: {
foo: IFoo;
};
const { foo = {} as IFoo } = obj;
// 这里,
// 通过类型断言 {} as IFoo 将一个空对象 {} 断言为 IFoo 类型,
// 作为 foo 属性的默认值。
这里从 {} 字面量类型断言为了 IFoo 类型,即为解构赋值默认值进行了预期的类型断言。当然,更严谨的方式应该是定义为 Partial<IFoo>
类型,即 IFoo 的属性均为可选的。 下面是使用 Partial<IFoo>
作为默认值类型的示例:
interface IFoo {
name: string;
age?: number; // 可选属性
}
declare const obj: { foo?: IFoo };
// 使用 Partial<IFoo> 作为默认值的类型
const { foo = {} as Partial<IFoo> } = obj;
// 现在 foo 被推导为 { name?: string, age?: number } 类型
console.log(foo.name); // 可选属性,不会报错
console.log(foo.age); // 同样不会报错
使用 Partial<IFoo>
作为默认值的类型,这意味着默认值 {}
被推导为一个所有属性都是可选的对象类型 { name?: string, age?: number }
。 使用 Partial 的好处是,我们不需要手动列出所有属性并将它们标记为可选,TypeScript 会自动为我们完成这个操作
语法
TypeScript 中有两种类型断言的语法形式:
// as 语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
// 尖括号语法
let someValue: any = "this is a string";
// 将someValue断言为string类型
let strLength: number = (<string>someValue).length;
尖括号语法虽然书写更简洁,但效果一致,只是在 TSX 中尖括号断言并不能很好地被分析出来。你也可以通过 TypeScript ESLint 提供的 consistent-type-assertions 规则来约束断言风格。
何时使用类型断言
- 当你比 TypeScript 更了解某个值的详细信息时
- 当你从一个第三方代码库中引用了一个类型很松散的值时
- 当你手动模拟一个从 JavaScript 中获取的值时
// 从 DOM 中获取的值默认为 any 类型
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
// 从 JSON 数据中获取的数据默认为 any 类型
const response = await fetch("/api/data.json");
const data = (await response.json()) as Data;
双重断言
如果在使用类型断言时,原类型与断言类型之间差异过大,也就是指鹿为马太过离谱,离谱到了指鹿为霸王龙的程度,TypeScript 会给我们一个类型报错:
const str: string = "hello world";
// 从 X 类型 到 Y 类型的断言可能是错误的,blabla
(str as { handler: () => {} }).handler();
此时它会提醒你先断言到 unknown 类型,再断言到预期类型,就像这样:
const str: string = "hello world";
(str as unknown as { handler: () => {} }).handler();
// 使用尖括号断言
(<{ handler: () => {} }>(<unknown>str)).handler();
这是因为你的断言类型和原类型的差异太大,需要先断言到一个通用的类,即 any / unknown。这一通用类型包含了所有可能的类型,因此断言到它和从它断言到另一个类型差异不大。
非空断言
非空断言其实是类型断言的简化,它使用 ! 语法,即 obj!.func!().prop 的形式标记前面的一个声明一定是非空的(实际上就是剔除了 null 和 undefined 类型),比如这个例子:
declare const foo: {
func?: () => {
prop?: number | null;
};
};
foo.func().prop.toFixed();
如果不管三七二十一地坚持调用,想要解决掉类型报错就可以使用非空断言:
foo.func!().prop!.toFixed();
// 注意如果是方法 ! 在 () 前面 => obj.func!().prop!.toFixed()
其应用位置类似于可选链:
foo.func?.().prop?.toFixed();
不同的是,非空断言的运行时仍然会保持调用链,因此在运行时可能会报错。而可选链则会在某一个部分收到 undefined 或 null 时直接短路掉,不会再发生后面的调用。
代码提示辅助
interface IStruct {
foo: string;
bar: {
barPropA: string;
barPropB: number;
barMethod: () => void;
baz: {
handler: () => Promise<void>;
};
};
}
如果我们想基于这个结构随便实现一个对象
const obj: IStruct = {};
这个时候等待你的是一堆类型报错,你必须规规矩矩地实现整个接口结构才可以。但如果使用类型断言,我们可以在保留类型提示的前提下,不那么完整地实现这个结构:
// 这个例子是不会报错的
const obj = <IStruct>{
bar: {
baz: {},
},
};
// Error
const obj = <IStruct>{
foo: 400, // 依然会有类型检测
};