webpack中使用typescript

概述

这是我学习webpack中使用typescript的记录，供以后开发时参考，相信对其他人也有用。

学习typescript建议直接看中文文档或英文文档，休闲之余可以看这篇TypeScript 总结博客。

安装

在命令行下输入如下内容即可：

npm install -g typescript

tsconfig

首先需要配置tsconfig.json文件，官方常用配置如下。

一般这个时候在命令行输入tsc，npm就会自动把src目录下的所有ts文件编译过来放在built文件夹里面，并且文件夹也会移过来，并且是在同一个命名空间下面(所以不能声明重复的变量方法等)。

{

    "compilerOptions": {

        //输出目录为build

        "outDir": "./built",

        //接受js作为输入

        "allowJs": true,

        //转换为es5

        "target": "es5"

        //下面为可选的

        //模块引用方式为commonjs

        "module": "commonjs",

        //用mode进行模块解析

        "moduleResolution": "node",

        //使用sourceMap

        "sourceMap": true,

        //启用实验性的metadata API

        "emitDecoratorMetadata": true,

        //启用实验性的装饰器

        "experimentalDecorators": true,

        //不删去注释

        "removeComments": false,

        //不启用严格检查

        "noImplicitAny": false

    },

    "include": [

        //读取src目录下的所有文件

        "./src/**/*"

    ]

}

Webpack

在webpack中使用要先安装相关loader，官方建议安装awesome-typescript-loader(因为它比ts-loader更快)：

npm install awesome-typescript-loader source-map-loader --save-dev

webpack.config.js设置如下(要把awesome-typescript-loader放在ts的所有loader之前)。

module.exports = {

    entry: "./src/index.ts",

    output: {

        filename: "./dist/bundle.js",

    },

    // Enable sourcemaps for debugging webpack's output.

    devtool: "source-map",

    resolve: {

        // Add '.ts' and '.tsx' as resolvable extensions.

        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]

    },

    module: {

        loaders: [

            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.

            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }

        ],

        preLoaders: [

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.

            { test: /\.js$/, loader: "source-map-loader" }

        ]

    },

    // Other options...

};

导入导出

官方不建议用module导入导出模块，因为会出现找不到module的报错。官方建议用如下导出导出模块的方式。

//导入

import foo = require("foo");

foo.doStuff();

//导出

function foo() {

    // ...

}

export = foo;

其它

连续添加参数

//官方不建议这么做

var options = {};

options.color = "red";

options.volume = 11;

//官方建议这么做

let options = {

    color: "red",

    volume: 11

};

如果非要按照第一种方法，就需要先添加一个接口(任何这种没有定义的error都可以通过添加类型断言和接口来解决)。

interface Options { color: string; volume: number }

let options = {} as Options;

options.color = "red";

options.volume = 11;

any，Object和{}

从适用范围上来讲，any > Object > {}。

所以一般使用any和{}。

严格检查

严格检查通过如下方法设置：

"compilerOptions": {

    //启用严格检查

    "noImplicitAny": true,

    //启用严格的null和undefined检查

    "strictNullChecks": true

  }

!可以在严格的null和undefined检查中忽略null和undefined检查。

foo.length;  // 报错 - 'foo' is possibly 'null'

foo!.length; // 不报错 - 'foo!' just has type 'string[]'

如果函数中的this报错，就在函数参数中给this加上类型断言(一般来说只有在noImplicitThis为true时才会出现这种情况)。

Point.prototype.distanceFromOrigin = function(this: Point, point: Point) {

    return this.getDistance({ x: 0, y: 0});

}

秒客网