TS编译过程

ts-loader或者是asome-typescript-loader对于ts/tsx文件在编译期间。

Typescript的语法对于编译后生成的文件是pure的，是没有副作用的，不会增加额外的垫片。举一个例子。编译前：

interface Person {    firstName: string;    lastName: string;}function greeter(person: Person) {    return "Hello, " + person.firstName + " " + person.lastName;}var result = greeter({firstName: 'first', lastName: 'last'});console.log(result);

编译后：

/***/ 98:/***/ (function(module, exports) {function greeter(person) {    return "Hello, " + person.firstName + " " + person.lastName;}var result = greeter({ firstName: 'first', lastName: 'last' });console.log(result);/***/ })

从结果上看，非常的纯净！突然想起了一句广告语——“我们不生产代码，我们只是代码的搬运工”。

（有点黑，哈哈~）Typescript在编译的时候做了一件非常有趣的事，如果类型检测通过，那么就把ts语法过滤掉，生成纯净的js。所以经过ts-loader编译后的代码完全不用担心编译后的js里面加了一坨又一坨垫片进去了。

"ts-loder" VS "babel-loder"

• ts-loder

使用ts-loder编译前:

class Greeter {    private greeting: string;    constructor(message) {        this.greeting = message;    }    greet() {        return "Hello, " + this.greeting;    }}let greeter = new Greeter("world");

ts-loder编译后：（整个文件88行代码，2.91kb。文件中其他的代码来自于webpack）

/***/ 98:/***/ (function(module, exports) {var Greeter = (function () {    function Greeter(message) {        this.greeting = message;    }    Greeter.prototype.greet = function () {        return "Hello, " + this.greeting;    };    return Greeter;}());var greeter = new Greeter("world");/***/ })

• babel-loader

使用babel-loader编译前：

class Greeter {    constructor(message) {        this.greeting = message;    }    greet() {        return "Hello, " + this.greeting;    }}let greeter = new Greeter("world");

使用babel-loader编译后：(整个文件102行代码，3.77kb。文件中其他的代码来自于webpack)

/***/ 95:/***/ (function(module, exports, __webpack_require__) {"use strict";var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }var Greeter = function () {    function Greeter(message) {        _classCallCheck(this, Greeter);        this.greeting = message;    }    _createClass(Greeter, [{        key: "greet",        value: function greet() {            return "Hello, " + this.greeting;        }    }]);    return Greeter;}();var greeter = new Greeter("world");/***/ })

总结

ts-loder解析ts/tsx文件时不会有额外的代码生成，非常干净。相比于babel-loader差距比较大。

• 解析ES6->ES5: ts-loder明显优于babel-loader

分析的方向分为两个维度：

1、代码的干净程度和编译的正确度。

2、编译后代码所占空间的大小。

Typescript完胜。（当然对于babel-loader不公平，因为ts-loader毕竟解析了一个自创的Typescript的语法），所以使用Typescript编写代码在使用强语言类型检测的同时，并不会产生代码层面的副作用。