手工操作

结构如下

| - tsconfig.json
| - [package.json]
| - src/
|    | - index.ts
|    | - tsconfig.json
|    | - utils
|    | - logMessage.ts

1. 创建工程

mkdir scripts
npm init -y
npm install typescript
npm install ts-node -D

2.添加代码

添加index.ts和utuils/message.ts代码

index.ts

import { LogMessage } from "./utils/logMessage";

export class Index {
    id: string;
    name: string;

    constructor(_id: string, _name: string) {
        this.id = _id;
        this.name = _name;
    }

    Say() {
        LogMessage.ShowLog(" the name is: " + this.name + ", the id is" + this.id + ".");
    }
}

utils/logMessage.ts

export class LogMessage {
    static ShowLog(text: string) {
        console.log(text);
    }

    static ShowAlert(text: string) {
        window.alert(text);
    }

3. 在文件下创建一个tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "./dist",
    "rootDir": "./src",
    "module":  "commonjs"
  },
  "files": ["./src/index.ts"],
  "compileOnSave": true
}

说明：

• target：ES版本越高越好，如果要兼容IE11及以下的浏览器，用es5便好。
• outDir：编译生成js的输出目录
• files：编译的代码ts文件清单，把页面引用的入口文件index.ts添加上来就好了，index中引用的logMessage.ts可没用加入，编译时会检测他们之间的引用关系同步去编译的。如果嫌麻烦还可以用include/exclude来配置，这样就不用在开发过程中改files配置了
• compileOnSave：顾名思义“保存文件立即编译”
• module：模块化引入方式，我用seajs因素选commonjs，如果是requirejs则是amd,还可以有es6,cmd规范

4. 编译

编译ts三要素

1. ts源代码
2. ts编译器：tsc
3. ts编译配置：tsconfig.json

tsc

输出文件如下

commonjs规范输出的index.js

4. 进阶

1. 为了方便命令操作可添加 package.json，内容如下

{
  ... 
+ "scripts": {
+  "build": "tsc"
+ },
  ...
}

运行

npm run build

2. 关于规范

对于index.js的内容，熟悉js模块化规范的小伙伴应该很容易看出这是commonjs的规范：给exports对象上添加属性字段，exports对象会作为模块导出，被其他模块使用。

{
  "compilerOptions": {
    ...
-   "module": "commonjs",
+   "module": "es6",
    ...
  }
}

再一次编译以后，会看到编译后的js代码则是符合es6模块规范的代码：