ecmascript 6 - TypeScript importera från bibliotek skrivna i ES5 vs. ES6

Jag får konstiga fel när jag kör transpilerad TypeScript-kod som beror på externa bibliotek

Såsom Uncaught TypeError: es5_lib_1.default är inte en funktion

Vad är fel?

Svar #1

ES6-modulspecifikationen skiljer sig något från CommonJs, beskrivet här. Detta introducerar vissa kompatibilitetsproblem som är något förvärrade i TypeScript.

TypeScript försöker gissa rätt sätt att transpilerar import/require-satser baserat på två ingångar

  • Egenskapen module i tsconfig.json
  • Hur export-satsen skrivs i motsvarande .d.ts-fil

I tsconfig.json-filen kan vi ställa in modulformatet som den transpilerade utdata kommer att använda. Till exempel, module: 'es6'

Vad vi väljer här påverkar vilken typ av importsyntax TypeScript tillåter. Vilket också påverkas av hur de motsvarande .d.ts-formfilerna skrivs.

Om vi importerar från ett CommonJS-bibliotek och vår utdata-modul riktar sig mot CommonJS, måste vi använda

//tsconfig.json
module: "commonjs"

//.d.ts
declare module 'foo' {
    exports = Foo;
}

// App.ts
import Foo = require('foo');

Om vi importerar från ett CommonJS-bibliotek och vår utgångsmodul riktar sig mot ES6, måste vi använda:

//tsconfig.json
module: "es6"

//.d.ts
declare module 'foo' {
    exports default Foo;
}

// App.ts
import {default as Foo} from 'foo';

Om vi importerar Från ett ES6-bibliotek kan vi använda stilen import {default ... } oavsett vilket output-modulformat som är målet

//tsconfig.json
module: "es6|commonjs"

//.d.ts
declare module 'foo.es6' {
    exports default FooES6;
}

// App.ts
import {default as FooES6} from 'foo.es6';

Vad innebär detta för .d.ts-filer som vi hämtar från tsd install?

Beroende på vilken output vi siktar på kan vi behöva ändra .d.ts-filerna efter att de har installerats för att passa våra behov. De flesta .d.ts-filer är skrivna för commonjs-moduler och använder därför stilen export=<lib>. Men om du vill rikta in dig på ES6-output måste du redigera detta och ändra det till export default

Vänligen ge korrigeringar till detta svar vid behov

Relaterade artiklar