如何在 Typescript 中导入自定义文件类型

Question

作为一个有趣的项目，我正在制作一个 "framework" 用于创建本机 Web 组件。我创建了一个 webpack 加载器，它解析自定义 .comp 文件中的一些 XML 并导出 es2015 class。不幸的是，我找不到在我的打字稿文件中导入这些 .comp 文件的方法。

我已经尝试将我的自定义文件导入到常规 javascript 文件中，并且一切正常；我可以看到我创建的加载程序运行，并且我得到了预期的输出。但是当我尝试导入打字稿文件时，我只收到错误 Cannot find module 'test/test.comp'。我尝试创建一个空的声明文件并注意到错误消息更改为 File '[path]/test/test.d.ts' is not a module

这是我的 webpack 配置：

mode: 'development',
watch: true,
entry: './test/main.js',
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
},
module: {
    rules: [
        {
            test: /\.ts/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.comp/,
            use: path.resolve(__dirname, 'core/compose-loader.js'),
            exclude: /node_modules/
        }
    ]
},
resolve: {
    extensions: ['.js', '.ts', '.comp'],
    alias: {
        'core': path.resolve(__dirname, "core/"),
        'test': path.resolve(__dirname, "test/")
    }
}

还有我的tsconfig.json

{
    "compilerOptions": {
        "outDir": "build",
        "baseUrl": ".",
        "paths": {
            "core": ["core/*"],
            "test": ["test/*"]
        },
        "target": "es2015",
        "typeRoots": ["./core"]

    },
    "include": [
        "test/*.ts"
    ],
    "exclude": [
        "core",
        "node_modules",
        "**/*.comp"
    ]
}

Answer 1

您可以在 declarations.d.ts 文件（或您选择的任何名称）中使用 *.comp 定义所有这些文件的类型。

declare module "*.comp" {
  const value: any; // Add better type definitions here if desired.
  export default value;
}

您可能还需要将此添加到 tsconfig.json

中的 typeRoots

{
    "compilerOptions": {
        // Other configuration...
        "typeRoots": [
            "./src/declarations.d.ts"
        ]
    }
}

现在，import value from "./test.comp" 应该按预期工作（至少是类型）。

注意：对于 VSCode，定义文件在文件夹结构中不应高于导入文件。

如何在 Typescript 中导入自定义文件类型

How to import custom file types in Typescript

javascript

typescript

webpack

webpack-loader

.d.ts