在Javascript Webpack项目中过渡到Typescript（如何导出模块）

Question

I'm currently trying to begin the process of converting a Javascript Webpack project to work in Typescript, so that everything is nicely typed. My configuration as it is, however, seems to fail to recognize the one file that I've changed to Typescript.

The project compiles, but I get this error at runtime:

TypeError: Angle.cyclic3dAxis is not a function

Angle is the (previously Javascript) file I rewrote in Typescript, consisting of 2 small static functions, in this format:

export class Angle
{
    public static cyclic3dAxis(i: number): number{ /* function defined here */ }
    public static anotherFunction(): number{/*defined here*/}
}

Original Javascript file (that I didn't write, but works), which I replaced with the TS one:

define([],function()
{
var Angle = { };
Angle.cyclic3dAxis = function(i) { /* function defined here */ };
Angle.anotherFunction = function() { /* defined here */ };
return Angle;
});

The functions contain identical code.

Relevant parts of the webpack.config.json:

/* some vars declared here truncated for brevity */
module.exports = function(env)
{
/* more stuff here */

resolve : {
    alias: {
        Cesium: path.resolve(__dirname, "scripts/Cesium/Cesium.js")
    },
    extensions: [".ts", ".tsx", ".js", ".json"]
},
module:  {
    rules : [
        {
            test: /\.js$/,
            exclude: /(Cesium|node_modules)/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015'],

                    }
                }
            ]
        },
        {
            test: /\.tsx?$/,
            exclude: /(Cesium|node_modules)/,
            use: [
                {
                    loader: 'awesome-typescript-loader'
                }
            ]
        },
/* and more */

and my tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "sourceMap": true
    }
}

The entire project is quite large so if I set "allowJs" to true, I get an error about the Javascript heap being out of memory.

Angle is referenced by other Javascript files in the project, like this:

define([
    './Angle',
    ],
function(
    Angle
}
{
/* example function call */
functionName = function(i) {
    return Angle.cyclic3dAxis(i);
};
});

Please let me know if there is anything I'm doing wrong, or anything I need to add. Appreciate your help!

Answer 1

Structure of exports in converted file doesn't match exports in original JS file. Module should look like this:

export function cyclic3dAxis(i: number): number{ /* function defined here */ }

export function anotherFunction(): number{/*defined here*/}

Or if you need to have class with static methods it should be exported with export = Angle; :

class Angle
{
    public static cyclic3dAxis(i: number): number{ /* function defined here */ }
    public static anotherFunction(): number{/*defined here*/}
}

export = Angle;