webpack - Hvordan finner typescript en .d.ts-fil?

Jeg er en ny TypeScript-utvikler, og jeg jobber med et prosjekt med TypeScript og Webpack. Noen biblioteker som er skrevet i JS trenger en .d.ts-fil, men jeg er forvirret over hvordan Webpack finner en .d.ts-fil med import * as PIXI from 'pixi.js'?

Her er mine gjetninger:

  1. webpack vil finne mappen som heter pixi.js i "node_modules", og finne package.json i den, og hvis den har types-egenskapen, velg bare filen som .d.ts-filen.

  2. hvis den ikke kan finne en .d.ts-fil på måte 1, går den til node_modules/@types (eller annen egendefinert mappe), ser om det finnes en mappe som har samme navn pixi.js, og velger index.d.ts-filen som .d.ts-fil.

  3. Forresten, jeg fant i index.d.ts at de bruker module, hvorfor? Jeg vet at den offisielle ikke anbefaler module-nøkkelordet (som er erstattet av namespace).

Svar #1

Filen .d.ts plasseres vanligvis ved siden av .ts-filen den gir typene for. Selv om ts-kompilatorene bare matcher filene med modulnavnene, gjør de det selv uten å plassere dem ved siden av.

Det bør fungere på samme måte med webpack, kompilatoren vet bare hvordan den finner typene, hvis du bare peker den til hvor de er.

Eksempel, jeg har en mappe kalt typings hvor jeg legger alle mine tilpassede typinger for min express-applikasjon. Og min tsconfig ser slik ut

{
    "compilerOptions": {
        "noImplicitAny": true,
        "esModuleInterop": true,
        "target": "es5"
    },
    "include": [
        "app/**/*"
    ]
}

Og siden mappen min for typings er i ./app, har ikke kompilatoren noen problemer med å finne mine .d.ts-filer, og gulpfile.js-en min ser slik ut

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('buildTS', () => {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest('build'));
});

gulp.task('ts:watch', function (cb) {
    gulp.watch('./app/**/*.ts', gulp.series(['buildTS', 'server']))
    cb(null);
});

Og jeg ønsket å bruke en pakke kalt custom-env som ikke har ts-typinger i @types-repoet. Så jeg laget bare en custom-env.d.ts med innholdet

declare module 'custom-env';
// This is a workaround. Always provide full and correct typings.

slik at jeg kan importere det og bruke det. Uten dette ville den avhengige filen ikke kompilere. Håper dette hjelper.

Relaterte artikler