d3.js - Typescript och d3

Jag har en app som använder d3-biblioteket. I TypeScript-kod, för att kunna använda d3 framgångsrikt (dvs. utan kompilatorfel TS2686, d3 refererar till ett UMD-globalt objekt, men den aktuella filen är en modul), måste jag inkludera raden: import * as d3 from 'd3'; Problemet med det är att det genererar: require('d3'); i JavaScript. Det är inte där d3-biblioteket finns i vår applikation. Det ligger under roten av webbappen, i en katalog som heter 'd3'. Dessutom behöver jag det inte i JavaScript alls eftersom vår index.html laddar det som en global. Jag har svårt att lista ut hur jag ska få TypeScript-koden att tillåta mig att referera till d3 utan import.

Svar #1

Du har två möjliga alternativ:

Undertryck varningen

Från och med TypeScript 3.5 lades en --allowUmdGlobalAccess-flagga till för att tillåta dig att komma åt globala definitioner från modulfiler. I ditt fall kommer detta innebära att du kan använda d3 som ett globalt namnrymd utan att ha en import eller require-sats. Detta kommer självklart att gälla alla modulfiler i ditt projekt och för alla andra UMD-typdefinitioner (som React, till exempel), så var medveten om att det kanske inte är korrekt i alla sammanhang, beroende på din koduppsättning och de bibliotek som används.

Deklarera ett globalt namnrym

Tidigare i TS 3.5 och utan flaggan --allowUmdGlobalAccess kan UMD-typdefinitioner inte refereras som ett globalt namnrymd från en modulfil. (Det tillåter dig endast att referera till en global namnrymd från en icke-modulfil.) Detta är ett avsiktligt skydd mot att av misstag referera till ett globalt namnrymd som inte är tillgängligt i ett strikt modulbaserat projekt. Lösningen är att manuellt deklarera ett globalt namnrymd inom ditt projekt:

// global.d.ts
import * as _d3 from "d3";

declare global {
  const d3: typeof _d3;
}

Nu kan du referera till d3 från moduler utan att importera från "d3", och du bör fortfarande få all korrekt typkontroll på d3-objektet baserat på @types/d3.

Detta har fördelen jämfört med --allowUmdGlobalAccess att det är mycket tydligt med din specifika kodinställning. Med andra ord kommer det inte av misstag att låta dig kompilera andra UMD-moduler som din kodinställning inte tillhandahåller globalt.

Svar #2

Svaret ovan av Aaron Beall är perfekt för den mycket specifika situation som OP befinner sig i, men mer generellt, om du vill använda TypeScript med D3 nuförtiden, är DefinitelyTyped vägen att gå. Du kan bara

npm i d3
npm i -D @types/d3

och

import * as d3 from 'd3';

som med vilket annat @types-bibliotek som helst.

Relaterade artiklar