typescript 中的数据 URI 导入

Question

在纯 JS 中，我们可以使用带有数据 uri 的 import 语句，例如：

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 关于模块分辨率的文档没有提及数据：...据我所见。 有没有办法让它在 typescript 中工作？

Answer 1

请参阅 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属性（返回一个字符串）。 根据需要调整模块声明以适合您的导入器语义。