Visual Studio Code - TypeScript: wie man Definitionen in separate Dateien aufteilt

Ich verwende eine einzelne Definitionsdatei für ein ganzes TS-Projekt, und es funktioniert einwandfrei.

Ich würde gerne wissen, ob es möglich ist, die TS-Definitionen nach Funktion/Komponente in separate Dateien zu unterteilen. Auf diese Weise hätte jede Komponente ihre eigenen Definitionen, die den Hauptdefinitionsbereich erweitern, genau wie es @types in Bezug auf Angular und seine Plugins (animate, ui.router und so weiter) tut. Aber ich bin mir nicht sicher, wie man das macht.

Meine Ordnerstruktur:

index.ts
index.d.ts
app
    shared
        shared.ts
        shared.d.ts
        user.ts
        config.ts
    login
        login.ts
        login.d.ts
        login.component.ts
        login.component.html

Meine Definitionsdateien:

// shared.d.ts
export namespace shared {
    interface IConfig {
        url: string;
    }
}

// login.d.ts
export namespace login {
    interface ILogin {
        logIn(): Promise<any>;
        logOut(): Promise<any>;
    }
}

// index.d.ts
import * as sharedModule from './app/shared/shared';
import * as loginModule from './app/login/login';

declare module App {
    // extend the App module with the imported definitions. How?   
}

Meine tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": ["node_modules/@types/", "src/"]
  },
  "compileOnSave": false,
  "filesGlob": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "!node_modules/**"
  ]
}

Ist es möglich? Wie kann ich das tun?

Antwort #1

Eine Möglichkeit ist, reference path zu verwenden und Namespaces zu deklarieren, anstatt sie zu exportieren.

geteilt.d.ts

declare namespace shared {
    interface IConfig {
        url: string;
    }
}

login.d.ts

declare namespace login {
    interface ILogin {
        logIn(): Promise<any>;
        logOut(): Promise<any>;
    }
}

index.d.ts

/// <reference path="shared.d.ts" />
/// <reference path="login.d.ts" />

declare module "App" {
    // we now have access to the `shared` namespace.
    const config: shared.IConfig;
}

Hier ist ein Screenshot des oben in VSCode funktionierenden.