Typescript配置文件(tsconfig.json)详解系列五：allowArbitraryExtensions

最新推荐文章于 2024-10-27 03:40:12 发布

爱文Irwin

最新推荐文章于 2024-10-27 03:40:12 发布

阅读量765

点赞数 14

分类专栏： typescript 文章标签： typescript javascript

本文链接：https://blog.csdn.net/zzyp1927314/article/details/140780464

版权

typescript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

本文使用的Typescript版本为5.5.2

配置

{
    compilerOptions: {
        "allowArbitraryExtensions": true
    }
}

说明

allowArbitraryExtensions是typescript@5.x后加入的字段，允许我们可以导入任何后缀名的文件。

并且我们必须要有一个和这个文件配套的类型声明文件。（这是一个官方的问题回复：https://github.com/microsoft/TypeScript/issues/55507）

比如如下：

// demo.css
.demo {
    color: #FFF;
}

那么我们要为他定义一个声明文件{file basename}.d.{extension}.ts(必须叫这个名字)。

declare const css: {
  demo: string;
};
export default css;

当 allowArbitraryExtensions为false会抛出如下错误：

ts/index.ts:1:23 - error TS6263: Module './demo.css' was resolved to 'C:/Users/86159/ts/demo.d.css.ts', but '--allowArbitraryExtensions' is not set.

1 import demoStyle from './demo.css';
                        ~~~~~~~~~~~~


Found 1 error in ts/index.ts:1

其他

如何针对非js或非ts提供类型

如果我们不太关注导入文件的类型。我们可以如下声明

declare module "*.css";
declare module "*.sass";
declare module "*.less";
declare module "*.log";

如果我们想作为变量去使用也很简单。

比如typescript编译只是编译器（webpack等）其中一环，他最终输出的js文件会经过其他处理器去处理（有可能会转化为一个js变量），所以他的类型定义为和这个输出变量的类型一样就可以了。

后记

这个字段感觉有点鸡肋，原因如下：

一般不会为*.css等文件定义类型，定义大概率会使用declare module "*.css"; 这种方式去定义。
实际上只有类型声明文件的文件名为{file basename}.d.{extension}.ts才需要这个参数去控制，如果文件名为{file basename}.{extension}.d.ts的话不管allowArbitraryExtensions设置成什么都不会报错。

// demo.d.css.ts：必须设置allowArbitraryExtensions为true，引入demo.css才能正常编译。
// demo.css.d.ts: 不需要设置allowArbitraryExtensions，引入demo.css也能正常编译。