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'). */
<span class="pl-c"><span class="pl-c">/*</span> Strict Type-Checking Options <span class="pl-c">*/</span></span>
<span class="pl-s"><span class="pl-pds">"</span>strict<span class="pl-pds">"</span></span><span class="pl-k">:</span> <span class="pl-c1">true</span> <span class="pl-c"><span class="pl-c">/*</span> Enable all strict type-checking options. <span class="pl-c">*/</span></span>,
<span class="pl-c"><span class="pl-c">//</span> "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */</span>
<span class="pl-c"><span class="pl-c">//</span> "strictNullChecks": true,              /* Enable strict null checks. */</span>
<span class="pl-c"><span class="pl-c">//</span> "strictFunctionTypes": true,           /* Enable strict checking of function types. */</span>
<span class="pl-c"><span class="pl-c">//</span> "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */</span>
<span class="pl-c"><span class="pl-c">//</span> "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */</span>
<span class="pl-c"><span class="pl-c">//</span> "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */</span>
<span class="pl-c"><span class="pl-c">//</span> "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */</span>

<span class="pl-c"><span class="pl-c">/*</span> Additional Checks <span class="pl-c">*/</span></span>
<span class="pl-c"><span class="pl-c">//</span> "noUnusedLocals": true,                /* Report errors on unused locals. */</span>
<span class="pl-c"><span class="pl-c">//</span> "noUnusedParameters": true,            /* Report errors on unused parameters. */</span>
<span class="pl-c"><span class="pl-c">//</span> "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */</span>
<span class="pl-c"><span class="pl-c">//</span> "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */</span>

<span class="pl-c"><span class="pl-c">/*</span> Module Resolution Options <span class="pl-c">*/</span></span>
<span class="pl-c"><span class="pl-c">//</span> "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */</span>
<span class="pl-c"><span class="pl-c">//</span> "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */</span>
<span class="pl-c"><span class="pl-c">//</span> "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */</span>
<span class="pl-c"><span class="pl-c">//</span> "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */</span>
<span class="pl-c"><span class="pl-c">//</span> "typeRoots": [],                       /* List of folders to include type definitions from. */</span>
<span class="pl-c"><span class="pl-c">//</span> "types": [],                           /* Type declaration files to be included in compilation. */</span>
<span class="pl-c"><span class="pl-c">//</span> "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */</span>
<span class="pl-s"><span class="pl-pds">"</span>esModuleInterop<span class="pl-pds">"</span></span><span class="pl-k">:</span> <span class="pl-c1">true</span> <span class="pl-c"><span class="pl-c">/*</span> Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. <span class="pl-c">*/</span></span>
<span class="pl-c"><span class="pl-c">//</span> "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */</span>

<span class="pl-c"><span class="pl-c">/*</span> Source Map Options <span class="pl-c">*/</span></span>
<span class="pl-c"><span class="pl-c">//</span> "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */</span>
<span class="pl-c"><span class="pl-c">//</span> "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */</span>
<span class="pl-c"><span class="pl-c">//</span> "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */</span>
<span class="pl-c"><span class="pl-c">//</span> "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */</span>

<span class="pl-c"><span class="pl-c">/*</span> Experimental Options <span class="pl-c">*/</span></span>
<span class="pl-c"><span class="pl-c">//</span> "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */</span>
<span class="pl-c"><span class="pl-c">//</span> "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */</span>

}

}

VS Code 上手

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

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

重命名

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

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

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

快速跳转

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

跳转到定义

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

标识符间的跳转切换

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

在报错处循环切换

• control + -/= 在鼠标历史位置间来回切换。

光标位置的来回切换

命令面板

通过 command + shift + p 打开命令面板。几乎所有功能可以通过这里的命令来完成。

比如，

• 代码折叠与展开

代码折叠与展开

• 主题的切换

主题的切换

最后，你始终可通过搜索 keyboard shortcurt 来查看所有的快捷键。

快捷键列表

在线工具

如果本地没有环境，可通过 Playground ・ TypeScript 这个在线的编辑器，编辑 TypeScript 和时实查看输出。

类型声明

TypeScript 中，通过在变量后面添加冒号指定其类型。

let fruit: string;
//