这一次,彻底掌握TypeScript(九)工程化实践

lxf2023-03-15 18:43:01

开启AdminJS成长之旅!这是我参与「AdminJS日新计划 · 12 月更文挑战」的第9天,点击查看活动详情

这是我彻底掌握 TypeScript 的第九篇,这次我们主要分享 TypeScript 中的工程化实践。

点击下面链接可以查看之前文章。

往期文章:

这一次,彻底掌握TypeScript(一)基本类型&语法

这一次,彻底掌握TypeScript(二)接口与类

这一次,彻底掌握TypeScript(三)断言与类型别名

这一次,彻底掌握TypeScript(四)函数

这一次,彻底掌握TypeScript(五)泛型

这一次,彻底掌握TypeScript(六)装饰器及相关应

这一次,彻底掌握TypeScript(七)类型检查机制

# 这一次,彻底掌握TypeScript(八)高级类型

TypeScript 作为 JavaScript 的超集,由于其静态类型系统的引入,使得前端开发大型项目更容易实现团队内代码规范限制及接口数据约定,同时使得代码更容易阅读和理解,但是当我们在基于 TypeScript 实现大型项目的过程中同样要注意如下内容:

声明空间

在 TypeScript 里存在两种声明空间:类型声明空间与变量声明空间:

一、类型声明空间

类型声明空间包含用来当做类型注解的内容,例如下面的类型声明:

class Foo {}
interface Bar {}
type Bas = {};

你可以将 Foo, Bar, Bas 作为类型注解使用,示例如下:

let foo: Foo;
let bar: Bar;
let bas: Bas;

注意,尽管你定义了 interface Bar,却并不能够把它作为一个变量来使用,因为它没有定义在变量声明空间中。

interface Bar {}
const bar = Bar; // Error: "cannot find name 'Bar'"

出现错误提示提示: cannot find name 'Bar' 的原因是名称 Bar 并未定义在变量声明空间。这将带领我们进入下一个主题 -- 变量声明空间。

二、变量声明空间

变量声明空间包含可用作变量的内容,在上文中 Class Foo 提供了一个类型 Foo 到类型声明空间,此外它同样提供了一个变量 Foo 到变量声明空间,如下所示:

class Foo {}
const someVar = Foo;
const someOtherVar = 123;

因此当我们想把一个类来当做变量传递时这显得极为便捷,但是我们并不能把一些如 interface 定义的内容当作变量使用。与此相似,一些用 var 声明的变量,也只能在变量声明空间使用,不能用作类型注解。举个