Блог

В обычном JS мы можем использовать операторы импорта с uri данных, например:

 import { number, fn } from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';
  

Или динамически:

 import('data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==')
    .then(module => console.log(module)); 
  

Однако помещение того же кода в файл typescript приводит к ошибке «Не удается найти модуль».

Мой tsconfig.json выглядит следующим образом:

 {
    "compilerOptions": {
        "module": "esnext",
        "lib": [
            "esnext",
            "es6",
            "dom"
        ],
        "moduleResolution": "node",
        "outDir": "./build",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es6",
        "jsx": "react"
    },
    "include": [
        "src/**/*", "../addon/build/background.js"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}
  

В документах Typescript по разрешению модуля нет упоминания о data: … из того, что я вижу. Есть ли способ заставить это работать в typescript?

Смотрите Объявления модулей с подстановочными знаками в руководстве по Typescript.

Вы могли бы сделать что-то вроде этого:

 // types.d.ts
declare module "data:text/javascript;*" {
  export const number: number;
  export function fn(): string;
}

// index.ts

/// <reference path="types.d.ts"/>
import { number, fn } from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';

  

Это сообщает Typescript, что импорт, соответствующий data:text/javascript; префиксу, предоставит number свойство (в виде числового типа) и fn свойство (которое возвращает строку). Соответствующим образом настройте объявление модуля в соответствии с семантикой вашего импортера.