自我介绍:大家好,我是吉帅振的网络日志(其他平台账号名字相同),互联网前端开发工程师,工作5年,去过上海和北京,经历创业公司,加入过阿里本地生活团队,现在郑州北游教育从事编程培训。
前言
在 TypeScript 中预留了一个增强类型的口子,使得我们可以方便地扩展原来的类型系统,以兼容 JavaScript 的代码。增强类型系统,顾名思义就是对 TypeScript 类型系统的增强。在 npm 中,有很多历史悠久的库都是使用 JavaScript 编写的,而 TypeScript 作为 JavaScript 的超集,设计目标之一就是能在 TypeScript 中安全、方便地使用 JavaScript 库。
声明
那么,我们如何在 TypeScript 中安全地使用 JavaScript 的库呢?关键的步骤就是使用 TypeScript 中的一个 declare 关键字。通过使用 declare 关键字,我们可以声明全局的变量、方法、类、对象。下面我们先说一下如何声明全局的变量。
declare 变量
在运行时,前端代码
declare var val1: string;
declare let val2: number;
declare const val3: boolean;
val1 = '1';
val1 = '2';
val2 = 1;
val2 = '2'; // TS2322: Type 'string' is not assignable to type 'number'.
val3 = true; // TS2588: Cannot assign to 'val3' because it is a constant.
在上面的代码示例中,我们分别使用 var、let、const 声明了 3 种不同类型的变量。其中,使用 var、let 声明的变量是可以更改变量赋值的,而使用 const 声明的变量则不可以。同时,对于变量类型不正确的错误,TypeScript 也可以正常检测出来。当然, declare 关键字还可以用来声明函数、类、枚举类型,下面我们一起来看看。
声明函数
声明函数的语法与声明变量类型的语法相同,不同的是 declare 关键字后需要跟 function 关键字,如下示例:
declare function toString(x: number): string;
const x = toString(1); // => string
需要注意:使用 declare关键字时,我们不需要编写声明的变量、函数、类的具体实现(因为变量、函数、类在其他库中已经实现了),只需要声明其类型即可,如下示例:
// TS1183: An implementation cannot be declared in ambient contexts.
declare function toString(x: number) {
return String(x);
};
在上面的例子中,TypeScript 的报错信息提示:环境声明的上下文不需要实现。也就是说 declare 声明的所有类型只需要表明类型,不需要实现。
声明类
声明类时,我们只需要声明类的属性、方法的类型即可。另外,关于类的可见性修饰符我们也可以在此进行声明,
declare class Person {
public name: string;
private age: number;
constructor(name: string);
getAge(): number;
}
const person = new Person('Mike');
person.name; // => string
person.age; // TS2341: Property 'age'