Hur man deklarerar en typ globalt i ett projekt (typescript)

I ett TypeScript-projekt, finns det något sätt att deklarera en typ och dela den över alla filer, på samma sätt som vi har tillgång till typer som definieras globalt i node.d.ts?

Till exempel, låt oss säga att i mitt projekt är en IUser något sådant som

interface IUser {
   name: string,
   mail: string
 }

Okej, jag kan skapa det gränssnittet i en common/interfaces.ts-fil och importera det varje gång jag behöver det... men det vore så trevligt att kunna deklarera sådana gränssnitt globalt för hela projektet och ha snabb åtkomst till dem utan att importera någon fil

Svar #1

Du kan skapa en definitionsfil, som slutar med .d.ts-ändelsen, och placera den i ditt projekt där du vill:

user.d.ts

interface IUser {
    name: string,
    mail: string
}

Detta är också ett bra sätt att fylla i saknade globala typer. Jag har en lib/global-mapp per projekt för att placera dessa filer.

Detta fungerar endast med typdefinitioner, inte med verklig kod, eftersom (1) den verkliga koden skulle behöva importeras på något sätt, (2) .d.ts är ambient. Dessutom, för att typer som definieras på detta sätt ska vara globalt synliga, bör motsvarande deklarationsfil inte innehålla top-level exports (annars kommer deklarationsfilen att anses vara ett modul, vilket kräver en import för att få åtkomst till dess typer).

Du kan också deklarera moduler:

declare module "my-module" {
    export declare class Something {
        public something: number;
    }
}

Och sedan kommer TypeScript att tillåta följande:

import { Something } from "my-module";

Svar #2

Skapa global.d.ts i din projektrot.

Här är ett exempel på hur man deklarerar globala typer, konstanter och gränssnitt som kommer att förstås globalt

//example import for externally loaded library
//this will not form part of the bundle but will allow typescript to understand external libraries throughout the project
import _ from 'lodash'; 

declare global { 
    //Example global constant for libraries served via webpack externals. example webpack config:: externals: { _: 'lodash' }
    //This assumes lodash was already load in DOM for example in <head> via CDN link before main.js is loaded.
    const _: typeof _; 

    //example of custom types
    type JSONPrimitive = string | number | boolean | null;
    type JSONValue = JSONPrimitive | JSONObject | JSONArray;
    type JSONObject = { [member: string]: JSONValue };

    //example of custom interface
    interface JSONArray extends Array<JSONValue> {}
}

Relaterade artiklar