TypeScript起步

TypeScript和JavaScript关系

TypeScript源码编译输出的是JavaScript源码，在编译阶段的AST(抽象句法树, abstract syntax tree, AST)会进行类型检查:
- TypeScript源码 -> typeScript AST
- 类型检查器检查AST
- TypeScript AST -> JavaScript源码

代码编辑器设置

案例使用 VS Code

初始化NPM项目, 安装 TSC, TSLint 和 NodeJS的类型声明:

初始化NPM项目，安装 TSC, TSLint 和 NodeJS的类型声明

# 按照《TypeScript 编程》案例，创建NPM项目目录
mkdir chapter-2
cd chapter-2

# 初始化新的NPM项目
npm init

# 安装 TSC, TSLint 和 NodeJS的类型声明
npm install --save-dev typescript tslint @types/node

这里会有一个WARNING，原因是TSLint将被ESLint取代，不过我目前学习过程暂时忽略:

npm WARN deprecated [email protected]: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.

added 43 packages, and audited 44 packages in 13s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm init 和 npm install 之后，目录下有一个 package.json 文件包含了依赖组件版本信息；在 node_modules 子目录下包含了安装的所有软件包

在目录下创建一个 tsconfig.json 文件:

使用 ./node_modules/.bin/tsc --init 命令生成初始的 tsconfig.json

./node_modules/.bin/tsc --init

在默认的配置文件中增加配置 outDir 指定TypeScript编译输出的 JavaScript 文件存放到独立的 dist 子目录，这样可以和源代码 src 目录区分开(如果没有这个配置默认ts和js在同一个目录并且只有文件名后缀区别):

使用 ./node_modules/.bin/tsc --init 命令生成初始的 tsconfig.json的内容

{
  "compilerOptions": {

    /* Projects */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */

    /* JavaScript Support */

    /* Emit */
    "outDir": "dist",                                   /* Specify an output folder for all emitted files. */

    /* Interop Constraints */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */

    /* Completeness */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

这个 tsconfig.json 创建可以手工编辑，也可以直接使用 ./node_modules/.bin/tsc --init 生成，具体内容可以参考自动生成文件的注释

在目录下创建 tslint.json 文件:

使用 ./node_modules/.bin/tslint --init 命令生成初始的 tslint.json

./node_modules/.bin/tslint --init

默认生成内容:

使用 ./node_modules/.bin/tslint --init 命令生成初始的 tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}

创建源代码目录 src ，并在该目录下生成一个简单的 TypeScript 代码 index.ts :

创建源代码目录src并构建一个简单的初始代码 src/index.ts

mkdir src
cat << EOF > src/index.ts
console.log('Hello TypeScript!')
EOF

编译并运行TypeScript代码( tsc 生成js代码， node 运行js代码 ):

tsc编译生成js代码，node运行生成的js代码

# 使用tsc编译TypeScript生成JavaScript代码
./node_modules/.bin/tsc

# 使用node.js运行生成的JavaScript代码
node ./dist/index.js

一切正常的话，在终端会看到输出:

Hello TypeScript!

对比一下生成的 dist/index.js :

创建源代码目录src并构建一个简单的初始代码 src/index.ts

"use strict";
console.log('Hello TypeScript!');

可以看出 TypeScript 不使用 JavaScript的 ; 结尾的语法

一些尝试

参考 O'REILLY 《TypeScript编程》的案例，可以将上文的 src/index.js 修改成:

修改 src/index.ts 加一些计算功能

let a = 1 + 2
let b = a + 3
let c = {
    apple: a,
    banana: b
}
let d = c.apple * 4

console.log('Hello TypeScript!')
console.log(d)

参考

O'REILLY 《TypeScript编程》