TypeScript与JavaScript 对比表格
Author：zhoulujun Date：
看此篇《万物起源：从 JavaScript 到 TypeScript》，让我断绝了写《ECMAScript进化史(1):话说Web脚本语言王者JavaScript的加冕历史》，TypeScript篇的想法。
TypeScript 有一定的学习成本，比如：Interfaces、Generics、Enums 等前端工程师不是很熟悉的概念，短期内多少会增加一些开发成本，集成和构建一些库会有一定的工作量。但是对于老手，特别是有C/Java开发经验的工程师，看下这个表格，基本对TS就了解各大概了。
| 对比项目 | TypeScript | JavaScript | 注意 |
|---|---|---|---|
| 基本类型 | boolean number string Array Tuple Enum any void null undefined never object | string number boolean null undefined symbol | TypeScript 中 object 表示的是不是 JavaScript 基本类型的类型 |
| 变量声明 | let const var | let const var | 基本一致 |
| 接口 | interface | 无 | TypeScript 的核心是类型检查，因此接口充当了命名这些类型的角色 |
| 类 | class abstract class readonly … | class 无 abstract class | 基本一致，但不同的可能发生在未来，TypeScript 使用 private 来定义私有，而 JavaScript 未来极有可能将 #.xx 来定义私有写入标准。TypeScript 支持抽象类，只读等等。 |
| 函数 | N | N | 基本一致，参数赋默认值，剩余参数等等，唯一不同的是 TypeScript 支持?可选参数 |
| 泛型 | Generics | 无 | 泛型是一个特别灵活的可重用指定不同类型来控制具体类型的类型，TypeScript 支持 |
| 枚举 | Enums | 无 | TypeScript 支持的枚举不仅可以默认从 0 开始，也可以赋值具体的字符串，它的操作空间非常大 |
| 类型推断 | 支持 | 无 | let x = 3; TypeScript 可以通过 3 来推断 x 的类型是 number |
| 高阶类型 | & typeof instanceof … | 无 | TypeScript 独有 |
| Symbols | N | N | Symbol 一样 |
| 迭代器 | N | N | 如果实现了 Symbol.iterator ，那么就被视为可迭代的，术语上和 JavaScript 定义的一样 |
| Generators | N | N | 一样 |
| 模块系统 | N | export import | 事实上 TypeScript 支持多种多样的模块系统，既有 ESModule 也有 Commonjs 规范，甚至还有 AMD UMD 等 |
| 其他 | N | N | 由于 TypeScript 是 JavaScript 的超集，因此 ES2016 之后以及 ESNext 定义的 api 都可以直接在 TypeScript 中使用 并不需要语言支持，至于其他一些比如 JSX Mixins 等等，由于这些不属于 JavaScript 标准因此这里不再复述 。 |
然后再去看下官方文档，个人觉得基本无啥问题
tsconfig.json
tsconfig.json 文件可以指定编译 TypeScript 项目所需的根目录以及编译器选项，如果你的工程中存在 tsconfig.json 则表示 tsconfig.json 所在的目录为你 TypeScript 工程的根目录。
使用 tsconfig.json 的规则：
如果你直接运行
tsc在这种情况下，编译器将从当前目录开始搜索tsconfig.json并向上查找；你也可以直接运行
tsc -p xxx在这种情况下，xxx 目录上必须存在tsconfig.json文件；如果在命令行中直接输出文件
tsc helloworld.ts编译器将忽略tsconfig.json文件。
当然你可以直接使用 tsc --init 在当前运行的目录中创建一个 tsconfig.json。
官方配置：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
编译器选项
这些编译器选项也是
tsconfig.json中的配置项
当你不想通过 tsconfig.json 来配置编译器的话，也可以使用如下的编译器选项通过命令行来运行编译器执行编译任务，这里只介绍几个常用的，其他的配置请参考 Compiler Options 表格。
--watch 或 -w监视输入文件的更改并触发重新编译--version 或 -v查看编译器的版本--types=["字符串"]类型描述文件的名称列表--target=""指定编译的 ECMAScript 的版本，默认版本是 ES3--strict启用所有严格类型检查--sourceMap生成对应的 .map 文件--outFile输出到单个文件--outDir输出到目录--module 或 -m指定使用哪种模块标准来输出代码，选项有 "None", "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015" or "ESNext"--lib要包含在编译中的库文件列表，比如 ES2015.Promise--jsx在.tsx文件中支持JSX可指定要编译输出的JSX类型
与Webpack集成
事实上我们不可能只单独的使用 TypeScript 而是要将它融入到现有的技术栈中和工具结合起来，至少目前为止多数的前端工程都将 Webpack 视为标准配置，因此 TypeScript 编译器和 Webpack 集成在一起，这非常有用。
awesome-typescript-loader 是 TypeScript 提供的在 Webpack 中使用的 loader，因此我们只需要：
$ yarn add typescript awesome-typescript-loader source-map-loader --dev
然后在你的 webpack.config.json 文件中配置即可：
var fs = require('fs')
var path = require('path')
var webpack = require('webpack')
const { CheckerPlugin } = require('awesome-typescript-loader')
var ROOT = path.resolve(__dirname)
module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map',
output: {
path: ROOT + '/dist',
filename: '[name].bundle.js',
sourceMapFilename: '[name].bundle.map.js',
publicPath: '//localhost:8889/dist/',
},
devServer: { inline: true, quiet: true, contentBase: './', port: 8889 },
module: {
rules: [{
test: /\.ts[x]?$/,
loader: 'awesome-typescript-loader'
}, { enforce: 'pre', test: /\.ts[x]$/, loader: 'source-map-loader' },]
},
resolve: {
extensions: ['.ts', '.tsx'],
alias: { '@': path.resolve(ROOT, 'src') }
},
plugins: [new CheckerPlugin(),]
}结语
这篇文章简单介绍了 JavaScript 的历史和 TypeScript 所获取的收益，有一句古话：了解历史才能真正了解这些故事，时代变化 JavaScript 可以说是目前为止唯一实现了 Write Once Run Anywhere 的脚本语言（当然 C 语言才是），它的热度和趋势长久不衰，但 JavaScript 本身也有其语言的缺陷，也许在未来新的标准会慢慢补齐它，至少现在让我们用 TypeScript 来解决你可能面临的问题吧。
转载本站文章《TypeScript与JavaScript 对比表格》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/typescript/2020_0413_8381.html