TypeScript 上手教程

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

无疑，对于大型项目来说，Vanilla Js 无法满足工程需求。早在 2016 年 Anuglar 在项目中引入 TypeScript 时，大概也是考虑到强类型约束对于大型工程的必要性，具体选型考虑可参考这篇文章。然后可以看到 TypeScript 在社区中逐渐升温。但凡社区中举足轻重的库，如果不是原生使用 TypeScript 编写，那么也是通过声明文件的方式对 TypeScript 提供支持，比如 React（虽然不是包含在官方仓库中，而是通过 @types/react），同时官方脚手架工具（v2.1.0 之后）也开始提供开箱即用的 TypeScript 支持，通过 --typescript 参数开启。

所以 TypeScript 绝对是趋势。它所带来的工程效率上的提升，是在使用 Vanilla Js 时无法体会到的。可能前期反而会因为类型约束而变得束手束脚影响效率，但这是个学习成本的问题，对于任何一门技术而言都会存在。

如果你有 Java 或 C# 的基础，那 TypeScript 学起来几乎没什么成本。

安装与配置

安装

$ npm install -g typescript
# or
$ yarn global add typescript

安装成功后，其 CLI 命令为 tsc，比如查看版本，

$ tsc --version
Version 3.3.3333

常用的命令：

编译文件

$ tsc main.ts

编译时传递编译参数：

$ tsc --target es3 main.ts

完整的编译参数可在官网 Compiler Options 文档中查阅。

初始化配置文件

除了通过 CLI 传递编译参数控制编译的行为，也可通过创建 tsconfig.json 文件指定编译参数。对于项目中使用来说，肯定是使用配置文件比较方便，而且，有些参数只支持通过配置文件来设置，比如 path，rootDirs。

$ tsc --init
message TS6071: Successfully created a tsconfig.json file.

该命令在当前目录创建一个 tsconfig.json 文件，每个配置都包含注释。完整的配置项也可在官网Compiler Options 文档中查阅，根据自己需要和项目需求进行合理配置。大部分情况下你只会因为有某个需求才会去刻意研究如何配置，比如要改变输出类型设置 target，写码过程中发现 Object.assign 不可用发现需要添加 lib 插件。所以不必被庞大的配置参数惊吓到，只用的时候再搜索即可。

tsconfig.json

{
"compilerOptions": {
/* Basic Options */
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
// "lib": [], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
// "outDir": "./", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

/* Strict Type-Checking Options */ "strict": true /* Enable all strict type-checking options. */, // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. *//* Additional Checks */ // "noUnusedLocals": true, /* Report errors on unused locals. */ // "noUnusedParameters": true, /* Report errors on unused parameters. */ // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. *//* Module Resolution Options */ // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /* List of folders to include type definitions from. */ // "types": [], /* Type declaration files to be included in compilation. */ // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. *//* Source Map Options */ // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. *//* Experimental Options */ // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */

}

}

VS Code 上手

TS 带来的一大好处是其静态类型检查能跟编辑器很好地结合，智能健全的自动提示自不必说。推荐 VS Code 作为编辑，其对 TypeScript 有原生的支持。

用好这几个快捷键，更是提升效率的关键。

重命名

通过 F2 对标识符重重命名。这里标识符可以是变量名，方法函数名，类名或者其他字面量。如果写代码过程中发现命名不合理想重命名，一定使用这个快捷键来操作，它的好处是，只需改一处，其他与该标识符有关的地方，将自动被批量替换成新的，甚至该标识符使用的地方不在同一个文件中，也能被正确地自动应用上变更后的名称。省去了人工替换和检查代码的麻烦。关键人工容易出错，搜索加替换的方式只是根据字符串来进行的，而该命令是通过分析代码的语法树进行的。

F2 进行变量重命名的展示" style="max-width:100%;">

使用 F2 进行变量重命名的展示

快速跳转

F12 跳转到定义。这应该是使用最为频繁的了。

跳转到定义

F7 当前文件中相同的标识符间循环切换。

标识符间的跳转切换

F8 在错误处循环切换。这个跳转可让你在修正代码中的错误时变得非常快捷。它直接将光标定位到错误处，修改好本处的错误后，继续 F8 跳转到下一处。一个很好的应用场景是对 js 代码的迁移，将文件扩展名由 .js 改为 .ts，大概率你会看到满屏飘红的错误提示，通过不断地 F8 来由上往下定位修改简直再顺畅不过了。