吴声子夜歌的博客

webpack内置了JavaScript文件和JSON文件的加载器，若想要打包其他类型的文件，则必须安装和配置使用的加载器。在该配置文件中，​“entry”属性用来配置入口的模块文件，webpack将搜索该模块文件直接或间接依赖的其他模块文件，并将此依赖关系保存在一种称作“依赖图”的数据结构中。为了演示webpack的打包功能，我们新建两个模块文件。运行打包后的“bundle.js”文件能够输出数字3，因为我们在index.ts中使用了utils.ts提供的add函数来计算并打印“1+2”的值。

在“/// <reference types=“”/>”三斜线指令中，​“types”属性的值是声明文件安装包的名称，也就是安装到“node_modules/@types”目录下的文件夹的名字。在“index.ts”文件中，我们先声明了对“lib2.ts”文件的依赖，后声明了对“lib1.ts”文件的依赖。由于“index.ts”文件依赖于“lib.ts”文件，所以在编译“index.ts”文件时，编译器不但会将“index.ts”文件添加到编译文件列表，还会将“lib.ts”文件添加到编译文件列表。

在默认情况下，编译器只会将“.ts”和“.tsx”文件添加到编译文件列表，而不会将“.js”和“.jsx”文件添加到编译文件列表。此例中，编译器会对“index.js”文件进行类型检查。如果一个JavaScript文件中添加了“// @ts-check”注释指令，那么编译器将对该Java-Script文件进行类型检查，不论是否启用了“–checkJs”编译选项。在“C:\app”目录下，运行tsc命令来编译“index.js”文件，并启用“–checkJs”编译选项和“–allowJs”编译选项。

此外，必须将“files”和“include”属性设置为空数组，否则编译器将会重复编译“C:\app\src”工程和“C:\app\test”工程。假设自上一次编译完“C:\app\test”工程之后，没有对“C:\app\src”工程和“C:\app\test”工程做任何修改。在“C:\app\test”工程的“tsconfig.json”配置文件中设置对“C:\app\src”工程的依赖。接下来，我们将之前的“C:\app\src”工程和“C:\app\test”工程重构为“solution”模式。

​“exclude”属性也支持和“include”属性相同的通配符。在“tsconfig.base.json”配置文件中包含了共同的配置，而“tsconfig.app.json”配置文件和“tsconfig.spec.json”配置文件继承了“tsconfig.base.json”配置文件中的配置。如果工程中含有一个“tsconfig.json”配置文件，那么在默认情况下“tsconfig.json”配置文件所在目录及其子目录下的所有“.ts”​“.d.ts”​“.tsx”文件都会被添加到编译文件列表。

这样做有一个优点，那就是在TypeScript语言发布新版本时可能会引入新的严格类型检查编译选项，如果启用了“–strict”编译选项，那么就会自动应用新引入的严格类型检查编译选项。因此，上例中的代码在该编译选项下会产生编译错误。如果一个编译选项具有短名字形式，那么该短名字通常为其长名字的首字母，例如“–help”编译选项的短名字为“-h”​。在TypeScript中，不论是长名字风格的编译选项还是短名字风格的编译选项均不区分大小写，即“–help”​“–HELP”​“-h”​“-H”表示相同的含义。

若待合并的接口中存在同名的方法签名类型成员，那么同名的方法签名类型成员会被视为函数重载，并且靠后定义的方法签名具有更高的优先级。例如，下例中尽管第2行的方法签名f是先声明的，但在接口合并后仍具有更高的优先级，因为它的函数签名中带有字面量类型。例如，在“a.ts”模块中定义了一个接口A，在“b.ts”模块中可以对“a.ts”模块中定义的接口A进行扩展，为其增加新的属性。第4行定义的接口A将与“a.ts”模块中的接口A进行声明合并，合并后的结果仍为接口A，但是接口A增加了一个属性成员y。

在解析非相对模块导入“‘bar/b’”时，编译器会使用“–baseUrl”编译选项设置的基准路径“C:\app”计算出目标路径“C:\app\bar\b”​，然后根据上文列出的具体步骤去解析该模块。编译器在解析非相对模块导入“‘@bar/b’”时，发现存在匹配的paths路径映射，因此会使用路径映射后的地址“C:\app\bar\b”作为模块路径去解析模块b。当设置了“–baseUrl”编译选项时，相对模块导入的解析过程不受影响，将使用设置的Classic模块解析策略或Node模块解析策略来解析模块。

TypeScript为JavaScript添加了额外的静态类型，与类型相关的代码在编译生成Java-Script代码时会被完全删除，因为JavaScript本身并不支持静态类型。例如，我们在Type-Script程序中定义了一个接口，那么该接口声明在编译生成JavaScript时会被直接删除。该规则同样适用于模块导入导出语句。模块导入或导出的标识符仅被用在类型的位置上。模块导入或导出的标识符没有被用在表达式的位置上，即没有作为一个值使用。y: number;

在ECMAScript 2015之前，JavaScript语言没有内置的模块支持。在JavaScript程序中，通常使用“命名空间”来组织并隔离代码以免产生命名冲突等问题。最为流行的实现命名空间的方法是使用立即执行的函数表达式。这是因为立即执行的函数表达式能够创建出一个新的作用域并且不会对外层作用域产生影响。下例中，使用立即执行的函数表达式定义了两个命名空间，在这两个命名空间中定义的变量x不会相互冲突。})();})();

除了内置的类型守卫之外，TypeScript允许自定义类型守卫函数。类型守卫函数是指在函数返回值类型中使用了类型谓词的函数。x is T在该语法中，x为类型守卫函数中的某个形式参数名；T表示任意的类型。从本质上讲，类型谓词相当于boolean类型。类型谓词表示一种类型判定，即判定x的类型是否为T。当在if语句中或者逻辑表达式中使用类型守卫函数时，编译器能够将x的类型细化为T类型。x;// Bx;// A。

X : Y在该语法中，extends是关键字；T、U、X和Y均表示一种类型。若类型T能够赋值给类型U，则条件类型的结果为类型X，否则条件类型的结果为类型Y。条件类型的结果类型只可能为类型X或者类型Y。例如，在下例的T0类型中，true类型能够赋值给boolean类型，因此T0类型的结果类型为string类型。// string// number此例中的条件类型实际意义很小，因为条件类型中的所有类型都是固定的，因此结果类型也是固定的。在实际应用中，条件类型通常与类型参数结合使用。

其中，true类型和false类型是boolean类型的子类型，因此可以将true类型和false类型从联合类型中消去。例如，下例中联合类型“Circle | Rectangle”具有属性签名area，其类型为Circle类型中area属性的类型和Rectangle类型中area属性的类型组成的联合类型，即“bigint | number”类型。如果联合类型中每个成员类型都包含相同参数列表的调用签名，那么联合类型也拥有了该调用签名，其返回值类型为每个成员类型中调用签名返回值类型的联合类型；

通过一个identity函数来介绍泛型的基本应用。identity函数也叫作恒等函数，它的返回值永远等于传入的参数。首先，我们定义一个非泛型版本的identity函数。我们将identity函数的参数类型和返回值类型都定义为number类型。return arg;此例中，identity函数的使用场景非常有限，它只能接受number类型的参数。如果想让identity函数能够接受任意类型的参数，那么就需要使用顶端类型。return arg;

虽然JavaScript语言支持了类，但其本质上仍是函数，类是一种语法糖。TypeScript语言对JavaScript中的类进行了扩展，为其添加了类型支持，如实现接口、泛型类等。定义一个类需要使用class关键字。类声明类表达式。

该语法中的T0、T1和Tn表示元组中元素的类型，针对元组中每一个位置上的元素都需要定义其数据类型。下例中，我们使用元组来表示二维坐标系中的一个点。该元组中包含两个number类型的元素，分别表示点的横坐标和纵坐标。元组中每个元素的类型不必相同。例如，可以定义一个表示考试成绩的元组，元组的第一个元素是string类型的科目名，第二个元素是number类型的分数。元组的值实际上是一个数组，在给元组类型赋值时，数组中每个元素的类型都要与元组类型的定义保持兼容。

简便数组类型表示法。泛型数组类型表示法。以上两种数组类型定义方式仅在编码风格上有所区别，两者在功能上没有任何差别。简便数组类型表示法借用了数组字面量的语法，通过在数组元素类型之后添加一对方括号“​[​]​”来定义数组类型。该语法中，TElement代表数组元素的类型，方括号“​[​]​”代表数组类型。在TElement与“​[​]​”之间不允许出现换行符号。

展开运算符的后面是一个表达式，表达式的求值结果为要展开的值。赋值运算符右侧为需要解构的数组，赋值运算符左侧是解构赋值的目标，在解构赋值的同时也支持声明新的变量。赋值运算符右侧为需要解构的对象，赋值运算符左侧是解构赋值的目标，在解构赋值的同时也支持声明新的变量。数组字面量中的展开运算符可以应用在任何可迭代对象上，它的作用是将迭代产生的每个值插入数组字面量的指定位置上。虽然BigInt类型的值可以与Number类型的值进行比较，但是BigInt类型的值不允许与Number类型的值一起进行混合数学运算。

【代码】TypeScript——VSCode搭建开发环境。