• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

webpack中使用typescript

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

概述

这是我学习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});
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript属性类型接口发布时间:2022-07-18
下一篇:
在Vue+TypeScript项目中,如何配置ESLint和Prettier发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap