TypeScript¶

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript 区分大写和小写字符。
分号是可选的 : 每行指令都是一段语句，你可以使用分号或不使用，分号在 TypeScript 中是可选的，建议使用。

开始¶

在正式开始了解 TypeScript 语法之前，我们需要先部署好环境以及如何创建 TypeScript 下项目，在这里以基于 webpack 的 TypeScript 为示例。

在这里，我们默认环境中已经配置好 node.js 和 npm 环境。

在此练习中，你可以全局安装 TypeScript 。在更大、更复杂的代码库中使用 TypeScript 时，建议切换到按项目安装，从而更好地控制项目的一致性。

为什么使用 webpack

ES2015 中的 import 和 export 语句已经被标准化。但是大多数浏览器还无法支持它们，但是 webpack 却能够提供开箱即用般的支持。

我们当然可以直接创建一个简单的 TypeScript 项目，但是在接触到模块的时候我们会发现，直接通过 tsc 命令产生的 Js 文件在浏览器中无法使用 import 和 export 语句。

安装 TypeScript¶

TypeScript 在 npm 注册表中以 typescript 包的形式提供。安装最新版本的 TypeScript：

在“命令提示符”窗口中，输入 npm install -g typescript。
输入 tsc 确认已安装 TypeScript 。如果已成功安装，则此命令应显示编译器命令和选项列表。

创建一个 TypeScript 项目¶

创建项目目录 mkdir typescript-dome && cd typescript-dome
进入文件夹，初始化 npm 环境： npm init
npm 安装项目环境 typescript/tslint/ts-loader/webpack/webpack-cli : npm install --save-dev typescript tslint webpack webpack-cli
初始化 tslint 、 webpack :
- ./node_modules/.bin/tslint --init 命令产生一个 tslint.json 文件

代码块 1 项目结构构成（左边加号的文件意为手动添加）¶

  typescript-demo
  |- package.json (npm init 后产生的文件)
+ |- tsconfig.json (tsc --init 后产生的文件，使用模板即可)
  |- tslint.json (tslint --init 后产生的文件)
+ |- webpack.config.js
  |- /dist (webpack 构建后产生的文件)
    |- bundle.js
+   |- index.html （新建作为一个 demo 的初始文件）
  |- /src
+   |- index.ts
  |- /node_modules (npm install 后的包)

webpack.config.js 模板¶

这会直接将 webpack 的入口起点指定为 ./index.ts，然后通过 ts-loader _加载所有的 .ts 和 .tsx 文件，并且在当前目录输出_一个 bundle.js 文件。

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

tsconfig.json 模板¶

这里我们设置一个基本的配置，来支持 JSX，并将 TypeScript 编译到 ES5……

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}