如何在带有Webpack的AngularJS应用程序（1.x）上使用TypeScript

我在跟踪那个官员

我成功地将我的应用程序分解成组件，并使用带有模块加载程序的ES6（在我的Webpack中），但现在我不确定如何设置TypeScript

我想我需要安装TypeScript编译器并告诉Webpack使用它。我怎么做

源代码可在此处获得：

• 首先运行：

npm安装typescript awesome typescript加载器源映射加载器--保存开发人员

这将在package.json文件的devdependency列表中安装typescript、awesome typescript loader和source map loader

• 然后创建名为tsconfig.json的typescript编译器配置文件，其中包含基本配置：

您可以参考进一步定制ts编译器选项

• 此时，我们可以将所有

  *.js

  文件重命名为

  .ts

• 请注意，无论我们在何处使用以下方法导入angularjs：

从“角度”导入角度

我们需要通过以下方式进行更改：

import*作为“angular”的角度


最后，我们可以告诉WebPack使用ts编译器编译*.ts源文件

因此，编辑文件webpack.config.js，如下所示：

1） 编辑条目文件名（因为我们重命名了它并将其扩展名更改为.ts）

在我的例子中，之前是
/app/index.js
，现在改为：

entry: {
    app: './app/index.ts'
},

2） 然后在下面添加以下内容：

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
    rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
    rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
},