介绍

TypeScript 是JavaScript的一个超集，支持ES6标准，由微软开发的自由和开源的编程语言，TypeScript的设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上

安装

我是使用npm命令安装，命令如下：

1
npm install -g typescript

查看是否安装成功，输入下面命令查看版本号，出现版本号说明安装成功

1
tsc -v

测试

首先新建一个名为test.ts的文件，内容如下：

1
2
let message: string = "Hello World!!";
console.log(message);

在上面ts文件所在文件夹打开cmd命令窗口，输入下面命令编译这个ts文件，会在该文件所在文件夹生成一个test.js的文件（用来运行，而不是运行ts文件，ts文件只是用来编译生成js文件的）

1
tsc test.ts

使用Node.js的命令运行js文件，会输出Hello World!!

1
node test.js

image-20230115112252147

配置

TypeScript是有一个名为tsconfig.json的配置文件的（这个配置文件只对自动编译有用），这个配置文件放在项目根目录下，可以自己手动新建，也可以使用下面命令自动生成，建议使用命令自动生成

1
tsc --init

自动生成的配置文件内容如下（中文是我使用谷歌翻译翻译的），rootDir（ts文件所在目录的路径）和outDir（编译生成的js文件存放的目录路径）两个配置默认是注释掉的，我们把它们的注释删掉并改成自己的路径，（.表示当前目录，..表示上一级目录）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* 保存 .tsbuildinfo 文件以允许对项目进行增量编译。 */
    // "composite": true,                                /* 启用允许 TypeScript 项目与项目引用一起使用的约束。 */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* 指定 .tsbuildinfo 增量编译文件的路径。 */
    // "disableSourceOfProjectReferenceRedirect": true,  /* 在引用复合项目时禁用首选源文件而不是声明文件。 */
    // "disableSolutionSearching": true,                 /* 编辑时从多项目参考检查中选择一个项目。 */
    // "disableReferencedProjectLoad": true,             /* 减少 TypeScript 自动加载的项目数量。 */

    /* Language and Environment */
    "target": "es2016",                                  /* 为发出的 JavaScript 设置 JavaScript 语言版本并包含兼容的库声明。 */
    // "lib": [],                                        /* 指定一组描述目标运行时环境的捆绑库声明文件。 */
    // "jsx": "preserve",                                /* 指定生成的 JSX 代码。 */
    // "experimentalDecorators": true,                   /* 启用对 TC39 阶段 2 草案装饰器的实验性支持。 */
    // "emitDecoratorMetadata": true,                    /* 为源文件中的修饰声明发出设计类型元数据。 */
    // "jsxFactory": "",                                 /* 指定在以 React JSX emit 为目标时使用的 JSX 工厂函数，例如'React.createElement' 或 'h'。 */
    // "jsxFragmentFactory": "",                         /* 在定位 React JSX emit 时指定用于片段的 JSX 片段引用，例如'React.Fragment' 或 'Fragment'。 */
    // "jsxImportSource": "",                            /* 指定模块说明符，用于在使用“jsx: react-jsx*”时导入 JSX 工厂函数。 */
    // "reactNamespace": "",                             /* 指定为“createElement”调用的对象。这仅适用于针对“反应”JSX 发出的情况。 */
    // "noLib": true,                                    /* 禁用包括任何库文件，包括默认的 lib.d.ts。 */
    // "useDefineForClassFields": true,                  /* 发出符合 ECMAScript 标准的类字段。 */
    // "moduleDetection": "auto",                        /* 控制使用什么方法来检测模块格式的 JS 文件。 */

    /* Modules */
    "module": "commonjs",                                /* 指定生成的模块代码。 */
    "rootDir": "./ts",                                   /* 在源文件中指定根文件夹。 */
    // "moduleResolution": "node",                       /* 指定 TypeScript 如何从给定的模块说明符查找文件。 */
    // "baseUrl": "./",                                  /* 指定基本目录以解析非相对模块名称。 */
    // "paths": {},                                      /* 指定一组将导入重新映射到其他查找位置的条目。 */
    // "rootDirs": [],                                   /* 解析模块时允许将多个文件夹视为一个文件夹。 */
    // "typeRoots": [],                                  /* 指定多个文件夹，其行为类似于“./node_modules/@types”。 */
    // "types": [],                                      /* 指定要包含的类型包名称而不在源文件中引用。 */
    // "allowUmdGlobalAccess": true,                     /* 允许从模块访问 UMD 全局变量。 */
    // "moduleSuffixes": [],                             /* 解析模块时要搜索的文件名后缀列表。 */
    // "resolveJsonModule": true,                        /* 启用导入 .json 文件。 */
    // "noResolve": true,                                /* 禁止“import”、“require”或“<reference>”扩展 TypeScript 应添加到项目中的文件数量。 */

    /* JavaScript Support */
    // "allowJs": true,                                  /* 允许 JavaScript 文件成为您程序的一部分。使用“checkJS”选项从这些文件中获取错误。 */
    // "checkJs": true,                                  /* 在类型检查的 JavaScript 文件中启用错误报告。 */
    // "maxNodeModuleJsDepth": 1,                        /* 指定用于检查“node_modules”中的 JavaScript 文件的最大文件夹深度。仅适用于“allowJs”。 */

    /* Emit */
    // "declaration": true,                              /* 从项目中的 TypeScript 和 JavaScript 文件生成 .d.ts 文件。 */
    // "declarationMap": true,                           /* 为 d.ts 文件创建源映射。 */
    // "emitDeclarationOnly": true,                      /* 只输出 d.ts 文件，不输出 JavaScript 文件。 */
    // "sourceMap": true,                                /* 为发出的 JavaScript 文件创建源映射文件。 */
    // "outFile": "./",                                  /* 指定一个将所有输出捆绑到一个 JavaScript 文件中的文件。如果 'declaration' 为真，则还指定一个捆绑所有 .d.ts 输出的文件。 */
    "outDir": "./js",                                    /* 为所有发出的文件指定一个输出文件夹。 */
    // "removeComments": true,                           /* 禁止发表评论。 */
    // "noEmit": true,                                   /* 禁止从编译中发出文件。 */
    // "importHelpers": true,                            /* 允许每个项目从 tslib 导入一次辅助函数，而不是每个文件都包含它们。 */
    // "importsNotUsedAsValues": "remove",               /* 为仅用于类型的导入指定发出/检查行为。 */
    // "downlevelIteration": true,                       /* 为迭代发出更合规但冗长且性能较低的 JavaScript。 */
    // "sourceRoot": "",                                 /* 指定调试器查找参考源代码的根路径。 */
    // "mapRoot": "",                                    /* 指定调试器应该定位映射文件而不是生成位置的位置。 */
    // "inlineSourceMap": true,                          /* 在发出的 JavaScript 中包含 sourcemap 文件。 */
    // "inlineSources": true,                            /* 在发出的 JavaScript 中的 sourcemaps 中包含源代码。 */
    // "emitBOM": true,                                  /* 在输出文件的开头发出 UTF-8 字节顺序标记 (BOM)。 */
    // "newLine": "crlf",                                /* 设置发出文件的换行符。 */
    // "stripInternal": true,                            /* 禁用发出在其 JSDoc 注释中具有“@internal”的声明。 */
    // "noEmitHelpers": true,                            /* 禁止在编译输出中生成自定义辅助函数，如“__extends”。 */
    // "noEmitOnError": true,                            /* 如果报告任何类型检查错误，则禁用发出文件。 */
    // "preserveConstEnums": true,                       /* 禁止擦除生成代码中的“const enum”声明。 */
    // "declarationDir": "./",                           /* 指定生成的声明文件的输出目录。 */
    // "preserveValueImports": true,                     /* 在 JavaScript 输出中保留未使用的导入值，否则这些值将被删除。 */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* 确保每个文件都可以安全地转译而不依赖于其他导入。 */
    // "allowSyntheticDefaultImports": true,             /* 当模块没有默认导出时，允许“从 y 导入 x”。 */
    "esModuleInterop": true,                             /* 发出额外的 JavaScript 以简化对导入 CommonJS 模块的支持。这会启用“allowSyntheticDefaultImports”以实现类型兼容性。 */
    // "preserveSymlinks": true,                         /* 禁用将符号链接解析为其真实路径。这与节点中的相同标志相关。 */
    "forceConsistentCasingInFileNames": true,            /* 确保外壳在进口中是正确的。 */

    /* Type Checking */
    "strict": true,                                      /* 启用所有严格的类型检查选项。 */
    // "noImplicitAny": true,                            /* 为具有隐含“任何”类型的表达式和声明启用错误报告。 */
    // "strictNullChecks": true,                         /* 进行类型检查时，请考虑“null”和“undefined”。 */
    // "strictFunctionTypes": true,                      /* 分配函数时，检查以确保参数和返回值是子类型兼容的。 */
    // "strictBindCallApply": true,                      /* 检查“绑定”、“调用”和“应用”方法的参数是否与原始函数匹配。 */
    // "strictPropertyInitialization": true,             /* 检查已声明但未在构造函数中设置的类属性。 */
    // "noImplicitThis": true,                           /* 当“this”的类型为“any”时启用错误报告。 */
    // "useUnknownInCatchVariables": true,               /* 默认 catch 子句变量为“未知”而不是“任何”。 */
    // "alwaysStrict": true,                             /* 确保始终发出“使用严格”。 */
    // "noUnusedLocals": true,                           /* 未读取局部变量时启用错误报告。 */
    // "noUnusedParameters": true,                       /* 未读取函数参数时引发错误。 */
    // "exactOptionalPropertyTypes": true,               /* 按照书面解释可选属性类型，而不是添加“未定义”。 */
    // "noImplicitReturns": true,                        /* 为未在函数中显式返回的代码路径启用错误报告。 */
    // "noFallthroughCasesInSwitch": true,               /* 在 switch 语句中为 fallthrough cases 启用错误报告。 */
    // "noUncheckedIndexedAccess": true,                 /* 使用索引访问时，将“未定义”添加到类型。 */
    // "noImplicitOverride": true,                       /* 确保派生类中的覆盖成员标有覆盖修饰符。 */
    // "noPropertyAccessFromIndexSignature": true,       /* 强制对使用索引类型声明的键使用索引访问器。 */
    // "allowUnusedLabels": true,                        /* 禁用未使用标签的错误报告。 */
    // "allowUnreachableCode": true,                     /* 禁用无法访问代码的错误报告。 */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* 跳过类型检查 TypeScript 附带的 .d.ts 文件。 */
    "skipLibCheck": true                                 /* 跳过类型检查所有 .d.ts 文件。 */
  }
}

然后我们就可以使用下面命令让ts文件自动编译了，而不是像上面那样手动编译

1
tsc --w

引用

如果要使用ts文件中的函数，则引入它编译后生成的js文件，然后就可以使用了

1
<script src="../js/test.js"></script>

使用export关键字

如果使用了export关键字以供其它ts文件引用，需要在引用js文件的代码上面加上<script>exports = {}</script>，不然会报错，报错信息为Uncaught ReferenceError: exports is not defined，示例代码如下

1
2
3
4
<!-- 加上的代码 -->
<script>exports = {}</script>
<!-- 引入js -->
<script src="../js/test.js"></script>