How to link (for browser) typescript external modules, generate d.ts and use in a client application?

I am working on a typescript environment to develop a one-page application on top of corners. As a development practice, each class within the structure is implemented as a separate file, which in turn becomes an external typescript module. The IDE development I'm working on is VS2015 with typescript 1.5.

square.ts

export class Square {
    constructor(color) {
    }
}

triangle.ts

export class Triangle {
    constructor(color: number) {
    }
}

rectangle.ts

export class Rectangle {
    constructor(color: number) {
    }
}

I would like to deploy the infrastructure as a single js file instead of different external modules. Therefore, I used the combination of grunt + browserify + tsify to combine the framework. For example, all of the above files were rewritten and combined into framework-production.js (CommonJS module), as shown below.

var config = {
    client: {
        outDir: './',
        out: 'framework-production.js',
        options: {
            browserify: {
                entries: './framework.ts',
                extensions: ['.ts'],
                debug: true
            },
            tsify: {
                target: 'ES5',
                removeComments: true
            }
        }
    }
};

(framework-production.js) typescript.

. , tsc, . , .d.ts , . framework-production.d.ts.

1. - d.ts?

2. angular2 d.ts. , angular2 ( angular 1.x) ?

/ d.ts framework.d.ts, .

3. d.ts?

declare module framework {
    class Rectangle {
        constructor(color: number);
    }

    class Triangle {
        constructor(color: number);
    }

    class Square {
        constructor(color: any);
    }
}

declare module "framework" {
    export = framework;
}

framework-production.js "", ;

<script src="framework-production.js"></script>
<script data-main="/app" src="/Scripts/require.js" type="text/javascript"></script>

app.ts

/// <reference path="framework-production.d.ts" />
new framework.Square(1);

, ;

Unhandled exception at line 20, column 1 in http://localhost:59182/app.js
0x800a1391 - JavaScript runtime error: 'framework' is undefined

4. , ?

+4

Source: https://habr.com/ru/post/1607430/


All Articles