TypeScript基本入门
TypeScript 的介绍
官网：https://www.typescriptlang.org/zh/
中文网:https://www.tslang.cn/docs/handbook/basic-types.html
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。
2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript
TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。
TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。
TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持**，它由 Microsoft 开发，代码开源于 GitHub 上
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于 GitHub
TypeScript 的特点
TypeScript 主要有 3 大特点：
- 始于JavaScript，归于JavaScript
TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。
- 强大的类型系统
类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。
- 先进的 JavaScript
TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。
安装TypeScript
下载Node.js:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
安装typeScript，打开cmd全局安装
npm i -g typescript
#或者
cnpm i -g typescript
#查看是否安装成功
tsc -V
基础类型
布尔值
最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。
let isDone: boolean = false;
数字
和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
字符串
JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用 string表示文本数据类型。 和JavaScript一样，可以使用双引号（ "）或单引号（'）表示字符串。
let name: string = "bob";
name = "smith";
你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。
这种字符串是被反引号包围（ ```），并且以${ expr }这种形式嵌入表达式
let names: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ names }.
I'll be ${ age + 1 } years old next month.`;
```cpp
或者
```tsx
let sentence: string = "Hello, my name is " + name + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";
```cpp
### 数组
TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 `[]`，表示由此类型元素组成的一个数组：
```ts
let list: number[] = [1, 2, 3];
```cpp
第二种方式是使用数组泛型，`Array<元素类型>`：
```ts
let list: Array<number> = [1, 2, 3];
```cpp
### 元组(Tuple)
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 `string`和`number`类型的元组。
```ts
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
```cpp
当访问一个已知索引的元素，会得到正确的类型：
```ts
console.log(x[0].substr(1)); // OK
```cpp
当访问一个越界的元素，会使用联合类型替代：
```ts
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
```cpp
### 枚举
`enum`类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
```ts
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
```cpp
默认情况下，从`0`开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 `1`开始编号：
```ts
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
```cpp
或者，全部都采用手动赋值：
```ts
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
```cpp
枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：
```ts
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // 显示'Green'因为上面代码里它的值是2
```cpp
### Any(任意类型)
有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 `any`类型来标记这些变量：
```ts
//any表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
let d:any;
d="hello";
d=10;
d=true;
```cpp
当你只知道一部分数据的类型时，`any`类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据：
```ts
let list: any[] = [1, true, "free"];
list[1] = 100;
```cpp
### 联合类型
```tsx
//可以使用 | 来链接多个类型（联合类型）
let b: "male" | "female";
b="male"
b="female"
```cpp
### unknown(未知的类型)
````tsx
//未知的类型
let e:unknown;
e=10;
e="hello"
e=true
let s:string;
e="hello"
//unknown实际上就是一个类型安全的any
//unknown类型的变量，不能直接赋值给其他变量
if (typeof e==="string"){
s=e;
}
//类型断言
/**
* 语法
* 变量 as
* <类型> 变量
*/
s= e as string
s=<string> e;
Void(没有返回值)
某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：
function warnUser(): void {
console.log("This is my warning message");
}
```cpp
声明一个`void`类型的变量没有什么大用，因为你只能为它赋予`undefined`和`null`：
```ts
let unusable: void = undefined;
```cpp
### Null 和 Undefined
TypeScript里，`undefined`和`null`两者各自有自己的类型分别叫做`undefined`和`null`。 和 `void`相似，它们的本身的类型用处不是很大：
```ts
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;
```cpp
默认情况下`null`和`undefined`是所有类型的子类型。 就是说你可以把 `null`和`undefined`赋值给`number`类型的变量。
然而，当你指定了`--strictNullChecks`标记，`null`和`undefined`只能赋值给`void`和它们各自。 这能避免 *很多*常见的问题。 也许在某处你想传入一个 `string`或`null`或`undefined`，你可以使用联合类型`string | null | undefined`。 再次说明，稍后我们会介绍联合类型。
> 注意：我们鼓励尽可能地使用`--strictNullChecks`，但在本手册里我们假设这个标记是关闭的。
### Never(永远没用返结果)
`never`类型表示的是那些永不存在的值的类型。 例如， `never`类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 `never`类型，当它们被永不为真的类型保护所约束时。
`never`类型是任何类型的子类型，也可以赋值给任何类型；然而，*没有*类型是`never`的子类型或可以赋值给`never`类型（除了`never`本身之外）。 即使 `any`也不可以赋值给`never`。
下面是一些返回`never`类型的函数：
```ts
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}
```cpp
### Object
`object`表示非原始类型，也就是除`number`，`string`，`boolean`，`symbol`，`null`或`undefined`之外的类型。
使用`object`类型，就可以更好的表示像`Object.create`这样的API。例如：
```ts
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
```cpp
### 类型断言
有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
通过*类型断言*这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。
类型断言有两种形式。 其一是“尖括号”语法：
```ts
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
```cpp
另一个为`as`语法：
```ts
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
```cpp
两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 `as`语法断言是被允许的。
## TS基础类型
```tsx
//可以使用 | 来链接多个类型（联合类型）
let b: "male" | "female";
b="male"
b="female"
let c :boolean | string
c=true;
c="hello";
//any表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
let d:any;
d="hello";
d=10;
d=true;
//未知的类型
let e:unknown;
e=10;
e="hello"
e=true
let s:string;
e="hello"
//unknown实际上就是一个类型安全的any
//unknown类型的变量，不能直接赋值给其他变量
if (typeof e==="string"){
s=e;
}
//类型断言
/**
* 语法
* 变量 as
* <类型> 变量
*/
s= e as string
s=<string> e;
```cpp
```tsx
//定义对象类型的
//用来指定对象中可以包含哪些属性
// 语法:{属性名:属性值，属性名:属性值}
// 在属性名后边加上?，表示属性是可选的
let a:{name:string,age?:number}
a={name:"张三",age:18}
//[propName : string] : any表示任意类型的属性
let b:{name:string,[propName:string]:any}
b={name:"李四",age:19,gender:"男"}
//定义函数类型
/**
* 设置函数结构的类型声明:
* 语法:〔形参:类型，形参:类型...) =>返回值
*/
let c:(a:number,b:number)=>number;
c=function (number1,number2) {
number1=10;
number2=20
return number1+number2
}
/**
* 数据的类型声明
* 类型[]
* Array<类型>
*/
//数组
let d:string[];
d=["a","b","c"]
//或者
let e:Array<number>;
e=[1,2,3]
/**
* 元组（长度是固定的数据）
语法：[类型，类型，类型.....]
*/
let g:[string,number];
g=["hello",1223]
/**
*enum（枚举类型）
*/
enum Gender{
Male,
Female
}
let i:{name:string,gender:Gender}
i={
name:"张三",
gender:Gender.Male
}
console.log(i.gender===Gender.Male);
//& 表示同时
let j:{name:string} & {age:number};
j={name:"张三",age:18}
//类型的别名
type myType=1 | 2 | 3 | 4;
let k:myType;
let l:myType;
let m:myType;
k=2
```cpp
## 编译选项
| 选项 | 类型 | 默认值 | 描述 |
| :----------------------------------- | :--------- | :----------------------------------------------------------- | :----------------------------------------------------------- |
| `--allowJs` | `boolean` | `false` | 允许编译javascript文件。 |
| `--allowSyntheticDefaultImports` | `boolean` | `module === "system"` 或设置了 `--esModuleInterop` 且 `module` 不为 `es2015` / `esnext` | 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。 |
| `--allowUnreachableCode` | `boolean` | `false` | 不报告执行不到的代码错误。 |
| `--allowUnusedLabels` | `boolean` | `false` | 不报告未使用的标签错误。 |
| `--alwaysStrict` | `boolean` | `false` | 以严格模式解析并为每个源文件生成 `"use strict"`语句 |
| `--baseUrl` | `string` | | 解析非相对模块名的基准目录。查看 [模块解析文档](https://www.tslang.cn/docs/handbook/module-resolution.html#base-url)了解详情。 |
| `--charset` | `string` | `"utf8"` | 输入文件的字符集。 |
| `--checkJs` | `boolean` | `false` | 在 `.js`文件中报告错误。与 `--allowJs`配合使用。 |
| `--declaration` `-d` | `boolean` | `false` | 生成相应的 `.d.ts`文件。 |
| `--declarationDir` | `string` | | 生成声明文件的输出路径。 |
| `--diagnostics` | `boolean` | `false` | 显示诊断信息。 |
| `--disableSizeLimit` | `boolean` | `false` | 禁用JavaScript工程体积大小的限制 |
| `--emitBOM` | `boolean` | `false` | 在输出文件的开头加入BOM头（UTF-8 Byte Order Mark）。 |
| `--emitDecoratorMetadata` [1] | `boolean` | `false` | 给源码里的装饰器声明加上设计类型元数据。查看 [issue #2577](https://github.com/Microsoft/TypeScript/issues/2577)了解更多信息。 |
| `--experimentalDecorators` [1] | `boolean` | `false` | 启用实验性的ES装饰器。 |
| `--extendedDiagnostics` | `boolean` | `false` | 显示详细的诊段信息。 |
| `--forceConsistentCasingInFileNames` | `boolean` | `false` | 禁止对同一个文件的不一致的引用。 |
| `--help` `-h` | | | 打印帮助信息。 |
| `--importHelpers` | `string` | | 从 [`tslib` ](https://www.npmjs.com/package/tslib)导入辅助工具函数（比如 `__extends`， `__rest`等） |
| `--inlineSourceMap` | `boolean` | `false` | 生成单个sourcemaps文件，而不是将每sourcemaps生成不同的文件。 |
| `--inlineSources` | `boolean` | `false` | 将代码与sourcemaps生成到一个文件中，要求同时设置了 `--inlineSourceMap`或 `--sourceMap`属性。 |
| `--init` | | | 初始化TypeScript项目并创建一个 `tsconfig.json`文件。 |
| `--isolatedModules` | `boolean` | `false` | 将每个文件作为单独的模块（与“ts.transpileModule”类似）。 |
| `--jsx` | `string` | `"Preserve"` | 在 `.tsx`文件里支持JSX： `"React"`或 `"Preserve"`。查看 [JSX](https://www.tslang.cn/docs/handbook/jsx.html)。 |
| `--jsxFactory` | `string` | `"React.createElement"` | 指定生成目标为react JSX时，使用的JSX工厂函数，比如 `React.createElement`或 `h`。 |
| `--lib` | `string[]` | | 编译过程中需要引入的库文件的列表。 可能的值为： ► `ES5` ► `ES6` ► `ES2015` ► `ES7` ► `ES2016` ► `ES2017` ► `ES2018` ► `ESNext` ► `DOM` ► `DOM.Iterable` ► `WebWorker` ► `ScriptHost` ► `ES2015.Core` ► `ES2015.Collection` ► `ES2015.Generator` ► `ES2015.Iterable` ► `ES2015.Promise` ► `ES2015.Proxy` ► `ES2015.Reflect` ► `ES2015.Symbol` ► `ES2015.Symbol.WellKnown` ► `ES2016.Array.Include` ► `ES2017.object` ► `ES2017.Intl` ► `ES2017.SharedMemory` ► `ES2017.String` ► `ES2017.TypedArrays` ► `ES2018.Intl` ► `ES2018.Promise` ► `ES2018.RegExp` ► `ESNext.AsyncIterable` ► `ESNext.Array` ► `ESNext.Intl` ► `ESNext.Symbol` 注意：如果`--lib`没有指定默认注入的库的列表。默认注入的库为： ► 针对于`--target ES5`：`DOM，ES5，ScriptHost` ► 针对于`--target ES6`：`DOM，ES6，DOM.Iterable，ScriptHost` |
| `--listEmittedFiles` | `boolean` | `false` | 打印出编译后生成文件的名字。 |
| `--listFiles` | `boolean` | `false` | 编译过程中打印文件名。 |
| `--locale` | `string` | *(platform specific)* | 显示错误信息时使用的语言，比如：en-us。 |
| `--mapRoot` | `string` | | 为调试器指定指定sourcemap文件的路径，而不是使用生成时的路径。当 `.map`文件是在运行时指定的，并不同于 `js`文件的地址时使用这个标记。指定的路径会嵌入到 `sourceMap`里告诉调试器到哪里去找它们。 |
| `--maxNodeModuleJsDepth` | `number` | `0` | node_modules依赖的最大搜索深度并加载JavaScript文件。仅适用于 `--allowJs`。 |
| `--module` `-m` | `string` | `target === "ES6" ? "ES6" : "commonjs"` | 指定生成哪个模块系统代码： `"None"`， `"CommonJS"`， `"AMD"`， `"System"`， `"UMD"`， `"ES6"`或 `"ES2015"`。 ► 只有 `"AMD"`和 `"System"`能和 `--outFile`一起使用。 ► `"ES6"`和 `"ES2015"`可使用在目标输出为 `"ES5"`或更低的情况下。 |
| `--moduleResolution` | `string` | `module === "AMD" or "System" or "ES6" ? "Classic" : "Node"` | 决定如何处理模块。或者是`"Node"`对于Node.js/io.js，或者是`"Classic"`（默认）。查看[模块解析](https://www.tslang.cn/docs/handbook/module-resolution.html)了解详情。 |
| `--newLine` | `string` | *(platform specific)* | 当生成文件时指定行结束符： `"crlf"`（windows）或 `"lf"`（unix）。 |
| `--noEmit` | `boolean` | `false` | 不生成输出文件。 |
| `--noEmitHelpers` | `boolean` | `false` | 不在输出文件中生成用户自定义的帮助函数代码，如 `__extends`。 |
| `--noEmitOnError` | `boolean` | `false` | 报错时不生成输出文件。 |
| `--noErrorTruncation` | `boolean` | `false` | 不截短错误消息。 |
| `--noFallthroughCasesInSwitch` | `boolean` | `false` | 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿） |
| `--noImplicitAny` | `boolean` | `false` | 在表达式和声明上有隐含的 `any`类型时报错。 |
| `--noImplicitReturns` | `boolean` | `false` | 不是函数的所有返回路径都有返回值时报错。 |
| `--noImplicitThis` | `boolean` | `false` | 当 `this`表达式的值为 `any`类型的时候，生成一个错误。 |
| `--noImplicitUseStrict` | `boolean` | `false` | 模块输出中不包含 `"use strict"`指令。 |
| `--noLib` | `boolean` | `false` | 不包含默认的库文件（ `lib.d.ts`）。 |
| `--noResolve` | `boolean` | `false` | 不把 `/// <reference``>`或模块导入的文件加到编译文件列表。 |
| `--noStrictGenericChecks` | `boolean` | `false` | 禁用在函数类型里对泛型签名进行严格检查。 |
| `--noUnusedLocals` | `boolean` | `false` | 若有未使用的局部变量则抛错。 |
| `--noUnusedParameters` | `boolean` | `false` | 若有未使用的参数则抛错。 |
| `--out` | `string` | | 弃用。使用 `--outFile` 代替。 |
| `--outDir` | `string` | | 重定向输出目录。 |
| `--outFile` | `string` | | 将输出文件合并为一个文件。合并的顺序是根据传入编译器的文件顺序和 `///<reference``>`和 `import`的文件顺序决定的。查看输出文件顺序文件了解详情。 |
| `paths` [2] | `Object` | | 模块名到基于 `baseUrl`的路径映射的列表。查看 [模块解析文档](https://www.tslang.cn/docs/handbook/module-resolution.html#path-mapping)了解详情。 |
| `--preserveConstEnums` | `boolean` | `false` | 保留 `const`和 `enum`声明。查看 [const enums documentation](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#94-constant-enum-declarations)了解详情。 |
| `--preserveSymlinks` | `boolean` | `false` | 不把符号链接解析为其真实路径；将符号链接文件视为真正的文件。 |
| `--preserveWatchOutput` | `boolean` | `false` | 保留watch模式下过时的控制台输出。 |
| `--pretty` [1] | `boolean` | `false` | 给错误和消息设置样式，使用颜色和上下文。 |
| `--project` `-p` | `string` | | 编译指定目录下的项目。这个目录应该包含一个 `tsconfig.json`文件来管理编译。查看 [tsconfig.json](https://www.tslang.cn/docs/handbook/tsconfig-json.html)文档了解更多信息。 |
| `--reactNamespace` | `string` | `"React"` | 当目标为生成 `"react"` JSX时，指定 `createElement`和 `__spread`的调用对象 |
| `--removeComments` | `boolean` | `false` | 删除所有注释，除了以 `/!*`开头的版权信息。 |
| `--rootDir` | `string` | *(common root directory is computed from the list of input files)* | 仅用来控制输出的目录结构 `--outDir`。 |
| `rootDirs` [2] | `string[]` | | *根（root）*文件夹列表，表示运行时组合工程结构的内容。查看 [模块解析文档](https://www.tslang.cn/docs/handbook/module-resolution.html#virtual-directories-with-rootdirs)了解详情。 |
| `--skipDefaultLibCheck` | `boolean` | `false` | 忽略 [库的默认声明文件](https://www.tslang.cn/docs/handbook/triple-slash-directives.html#-reference-no-default-libtrue)的类型检查。 |
| `--skipLibCheck` | `boolean` | `false` | 忽略所有的声明文件（ `*.d.ts`）的类型检查。 |
| `--sourceMap` | `boolean` | `false` | 生成相应的 `.map`文件。 |
| `--sourceRoot` | `string` | | 指定TypeScript源文件的路径，以便调试器定位。当TypeScript文件的位置是在运行时指定时使用此标记。路径信息会被加到 `sourceMap`里。 |
| `--strict` | `boolean` | `false` | 启用所有严格类型检查选项。 启用 `--strict`相当于启用 `--noImplicitAny`, `--noImplicitThis`, `--alwaysStrict`， `--strictNullChecks`和 `--strictFunctionTypes`和`--strictPropertyInitialization`。 |
| `--strictFunctionTypes` | `boolean` | `false` | 禁用函数参数双向协变检查。 |
| `--strictPropertyInitialization` | `boolean` | `false` | 确保类的非`undefined`属性已经在构造函数里初始化。若要令此选项生效，需要同时启用`--strictNullChecks`。 |
| `--strictNullChecks` | `boolean` | `false` | 在严格的 `null`检查模式下， `null`和 `undefined`值不包含在任何类型里，只允许用它们自己和 `any`来赋值（有个例外， `undefined`可以赋值到 `void`）。 |
| `--stripInternal` [1] | `boolean` | `false` | 不对具有 `/** @internal */` JSDoc注解的代码生成代码。 |
| `--suppressExcessPropertyErrors` [1] | `boolean` | `false` | 阻止对对象字面量的额外属性检查。 |
| `--suppressImplicitAnyIndexErrors` | `boolean` | `false` | 阻止 `--noImplicitAny`对缺少索引签名的索引对象报错。查看 [issue #1232](https://github.com/Microsoft/TypeScript/issues/1232#issuecomment-64510362)了解详情。 |
| `--target` `-t` | `string` | `"ES3"` | 指定ECMAScript目标版本 `"ES3"`（默认）， `"ES5"`， `"ES6"`/ `"ES2015"`， `"ES2016"`， `"ES2017"`或 `"ESNext"`。 注意： `"ESNext"`最新的生成目标列表为 [ES proposed features](https://github.com/tc39/proposals) |
| `--traceResolution` | `boolean` | `false` | 生成模块解析日志信息 |
| `--types` | `string[]` | | 要包含的类型声明文件名列表。查看 [@types，--typeRoots和--types](https://www.tslang.cn/docs/handbook/tsconfig-json.html#types-typeroots-and-types)章节了解详细信息。 |
| `--typeRoots` | `string[]` | | 要包含的类型声明文件路径列表。查看 [@types，--typeRoots和--types](https://www.tslang.cn/docs/handbook/tsconfig-json.html#types-typeroots-and-types)章节了解详细信息。 |
| `--version` `-v` | | | 打印编译器版本号。 |
| `--watch` `-w` | | | 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。监视文件和目录的具体实现可以通过环境变量进行配置。详情请看[配置 Watch](https://www.tslang.cn/docs/handbook/configuring-watch.html)。 |
可以使用tsc ts文件 -w 监视编译，缺点：只能跟踪一个文件
```tsx
tsc app.ts -w
```cpp
**自动编译整个项目**
如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
但是能直接使用tsc命令的前提时，要先在项目根目录下个ts件tsconfig.json
tsconfig.json是一个JSON文件，添加配置文件后，只需只需tsc命令即可完成对整个项目的编译
> include
"include”用来指定哪些ts文件需要被编译
定义希望被编译文件所在的目录
默认值:["**/*""]
路径：**表示任意目录 *表示任意文件
```ts
//./src/**/* 编译src下的所有目录和文件
"include": [
"./src/**/*"
],
```cpp
> exclude
"exclude”不需要被编译的文件目录
默认值:[ "node_modules" , "bower_components", "jspm_packages"]
```ts
//不编译src目录下的hello目录下的所有文件
"exclude": [
".src/hello/**/*"
]
```cpp
> extendes
定义被继承的配置文件
```ts
"extends": "./configs/base"
```cpp
上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息
> files
指定被编译文件的列表，只有需要编译的文件少时才会用到
```ts
"files": [
"a.ts",
"b.ts",
"c.td"
]
```cpp
列表中的会被编译器编译
> compilerOptions
编译选项是配置文件中非常重要也比较复杂的配置选项
在compilerOptions中包含多个子选项，用来完成对编译的配置
```tsx
"compilerOptions": {
//target:指定编译器被编译的ES版本
//支持的类型：'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'.
"target": "ES6",
//module指定要使用的模块化的规范
//支持的类型'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node12', 'nodenext'
"module": "ES6",
//lib用来指定项目中要使用的库,一般用不到
//"lib": [""]
// outDir用来指定编译后文件所在的目录
"outDir": "./dis",
//将代码合并为一个文件,
//设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
"outFile": "./dis/he.js"
}
}
```cpp
**其他编译选项**
```ts
//是否对js文件进行编译，默认是false
"allowJs": false,
//是否检查js代码是否符合语法规范，默认是false
"checkJs": false,
//是否移除注释,默认是false
"removeComments": false,
//不生成编译后的文件,默认是false
"noEmit": false,
//当有错误是不编译文件,默认是false
"noEmitOnError": false
```cpp
**语法检查相关选项**
```tsx
//所有严格检查的总开关
"strict": false,
//用来设置编译后的文件是否使用严格模式，默认false,
"alwaysStrict": false,
//不允许隐式的any类型
"noImplicitAny": false,
//不允许不明类型的this
"noImplicitThis": false,
//严格的检查类型
"strictNullChecks": false
```cpp
## 使用Webpack打包TS代码
**使用npm init -y下载package.json的依赖**
````tsx
npm init -y
安装一些基本的依赖
cnpm i -D webpack webpack-cli typescript ts-loader
通过npm run build进行编译
npm run build
```cpp
**安装自动编译生成html文件插件**
```tsx
cnpm i -D html-webpack-plugin
```cpp
**安装服务插件**
```tsx
cnpm i -D webpack-dev-server
```cpp
**安装执行清除目录原来目录的文件**
```tsx
cnpm i -D clean-webpack-plugin
```cpp
**安装babel加载器所需要的一些依赖**
````tsx
cnpm i -D @babel/core @babel/preset-env babel-loader core-js
webpack.config.js
//引入一个包
const path=require("path")
//引入html插件
const HTMLWebpackPlugin=require('html-webpack-plugin');
//引入clear插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//webpack中的所有配置信息都应该在module.exports中
module.exports={
//不指定模块
mode: "none",
//指定入口文件,需要手动创建
entry: "./src/index.ts",
//指定打包文件所在的目录
output: {
//指定打包文件的目录
path: path.resolve(__dirname,"dist"),
//打包后文件的文件
filename: "bundle.js",
//告诉webpack不使用箭头函数
// environment:{
// arrowFunction:false
// }
},
//指定webpack打包是要使用的模块
module: {
//指定要加载的规则
rules: [
{
//test指定是规则生效的文件
test: /\.ts$/,
//指定要使用的loader,从后往前执行
use: [
//配置babel
{
//指定加载器
loader: "babel-loader",
//设置babel
options: {
//设置预定的环境
presets:[
[
//指定环境插件
"@babel/preset-env",
//配置信息
{
//要兼容目标的浏览器
targets:{
"chrome":"88",
"ie":"11"
},
//指定core js的版本
"corejs":"3",
//使用corejs的方式 "usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
"ts-loader"
],
//要排除的文件
exclude: /node_modules/
}
]
},
//配置Webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
//title: "自定义标题",
template: "./src/index.html"//指定生成html文件的模板,改目录下需要有index.html
}),
],
//用来设置应用模块，哪些可以被直接模块使用
resolve: {
extensions: [".ts",".js"]
}
}
```cpp
**tsconfig.json**
```tsx
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
```cpp
**package.json**
```tsx
{
"name": "webpack01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"babel-loader": "^8.2.4",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.21.1",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.2.8",
"typescript": "^4.6.3",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4",
"webpack-plugin": "^1.0.5"
}
}