TypeScript起步¶
TypeScript和JavaScript关系¶
TypeScript源码编译输出的是JavaScript源码,在编译阶段的AST(抽象句法树, abstract syntax tree, AST)会进行类型检查:
TypeScript源码 -> typeScript AST
类型检查器检查AST
TypeScript AST -> JavaScript源码
代码编辑器设置¶
案例使用 VS Code
初始化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 tslint@6.1.3: 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
在默认的配置文件中增加配置 outDir
指定TypeScript编译输出的 JavaScript Atlas 文件存放到独立的 dist
子目录,这样可以和源代码 src
目录区分开(如果没有这个配置默认ts和js在同一个目录并且只有文件名后缀区别):
{
"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
默认生成内容:
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}
创建源代码目录
src
,并在该目录下生成一个简单的 TypeScript 代码index.ts
:
mkdir src
cat << EOF > src/index.ts
console.log('Hello TypeScript!')
EOF
编译并运行TypeScript代码(
tsc
生成js代码,node
运行js代码 ):
# 使用tsc编译TypeScript生成JavaScript代码
./node_modules/.bin/tsc
# 使用node.js运行生成的JavaScript代码
node ./dist/index.js
一切正常的话,在终端会看到输出:
Hello TypeScript!
对比一下生成的 dist/index.js
:
"use strict";
console.log('Hello TypeScript!');
可以看出 TypeScript
不使用 JavaScript的 ;
结尾的语法
一些尝试¶
参考 O’REILLY 《TypeScript编程》的案例,可以将上文的
src/index.js
修改成:
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编程》