• home > webfront > ECMAS > typescript >

    TypeScript与JavaScript 对比表格

    Author:zhoulujun Date:

    TypeScript 有一定的学习成本,比如:Interfaces、Generics、Enums 等前端工程师不是很熟悉的概念,短期内多少会增加一些开发成本,集成和构建一些库会有一定的工作量。但是对于老手,特别是有C Java开发经验的工程师

    看此篇《万物起源:从 JavaScript 到 TypeScript》,让我断绝了写《ECMAScript进化史(1):话说Web脚本语言王者JavaScript的加冕历史》,TypeScript篇的想法。

    TypeScript 有一定的学习成本,比如:Interfaces、Generics、Enums 等前端工程师不是很熟悉的概念,短期内多少会增加一些开发成本,集成和构建一些库会有一定的工作量。但是对于老手,特别是有C/Java开发经验的工程师,看下这个表格,基本对TS就了解各大概了。

    对比项目TypeScriptJavaScript注意
    基本类型boolean number string Array Tuple Enum any void null undefined never objectstring number boolean null undefined symbolTypeScript 中 object 表示的是不是 JavaScript 基本类型的类型
    变量声明let const varlet const var基本一致
    接口interfaceTypeScript 的核心是类型检查,因此接口充当了命名这些类型的角色
    class abstract class  readonly …class 无 abstract class基本一致,但不同的可能发生在未来,TypeScript 使用 private 来定义私有,而 JavaScript 未来极有可能将 #.xx 来定义私有写入标准。TypeScript  支持抽象类,只读等等。
    函数NN基本一致,参数赋默认值,剩余参数等等,唯一不同的是 TypeScript 支持?可选参数
    泛型Generics泛型是一个特别灵活的可重用指定不同类型来控制具体类型的类型,TypeScript 支持
    枚举EnumsTypeScript 支持的枚举不仅可以默认从 0 开始,也可以赋值具体的字符串,它的操作空间非常大
    类型推断支持let x = 3; TypeScript 可以通过 3 来推断 x 的类型是 number
    高阶类型& typeof  instanceof …TypeScript 独有
    SymbolsNNSymbol 一样
    迭代器NN如果实现了 Symbol.iterator ,那么就被视为可迭代的,术语上和 JavaScript 定义的一样
    GeneratorsNN一样
    模块系统Nexport import事实上 TypeScript 支持多种多样的模块系统,既有 ESModule 也有 Commonjs 规范,甚至还有 AMD UMD 等
    其他NN由于 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