无法使用TypeScript导入本地字体

Question

我正在尝试使用TypeScript项目导入 React 上的字体文件，但它无法将其识别为字体文件，而是将其视为模块

文件夹结构:

在我的index.tsx文件中，我导入了我需要的字体，并导出了字体常量：

import helveticaNeueLightWoff from './HelveticaNeueW02-45Ligh.woff';
import helveticaNeueLightWoff2 from './HelveticaNeueW02-45Ligh.woff2';
import helveticaNeueMediumWoff from './HelveticaNeueW02-67MdCn.woff';
import helveticaNeueMediumWoff2 from './HelveticaNeueW02-67MdCn.woff2';
import helveticaNeueBoldWoff from './HelveticaNeueW02-75Bold.woff';
import helveticaNeueBoldWoff2 from './HelveticaNeueW02-75Bold.woff2';
import helveticaNeueBoldCnWoff from './HelveticaNeueW02-77BdCn.woff';
import helveticaNeueBoldCnWoff2 from './HelveticaNeueW02-77BdCn.woff2';

const Fonts = {
  helveticaNeueLightWoff,
  helveticaNeueLightWoff2,
  helveticaNeueMediumWoff,
  helveticaNeueMediumWoff2,
  helveticaNeueBoldWoff,
  helveticaNeueBoldWoff2,
  helveticaNeueBoldCnWoff,
  helveticaNeueBoldCnWoff2,
};

export default Fonts;

我使用url-loader（我也尝试使用file-loader）。这是我的webpack.config.ts

{
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          use: {
            loader: 'url-loader',
            options: {
              // Limit at 50k. Above that it emits separate files
              limit: 50000,
              // url-loader sets mimetype if it's passed.
              // Without this it derives it from the file extension
              mimetype: 'application/font-woff',
              // Output below fonts directory
              name: './fonts/[name].[ext]',
            },
          },
        },

这是我得到的错误： 找不到模块 “./海尔维蒂卡NeueW02-45Ligh.woff'

此问题的原因可能是什么？

Answer 1

对于将面临类似问题的expo用户，完成之前的答案：我遇到了同样的问题，并且声明模块足以导入字体，但不会实际加载这些字体。我使用的是曝光字体，而Typescript抱怨结果的类型。为了使它工作，我创建了包含以下内容的相同文件：

declare module "*.ttf" {
  const value: import("expo-font").FontSource;
  export default value;
}

这表明导入的模块将具有FontSource类型，该类型来自expo fontlibrary。然后我可以加载我的字体：）

Answer 2

您需要将字体文件格式声明为模块，以便TypeScript能够正确解析它们。

创建一个fonts.d.ts文件并添加以下内容

declare module '*.woff';
declare module '*.woff2';

它告诉类型脚本，字体文件类型是有效的导入模块。

“d.ts”文件格式用于提供关于用JavaScript编写的API的类型信息，或者第三方导入的形状。

请确保在 tsconfig.json 的包含部分中考虑了类型文件。一个不错的方法是在项目中有一个根键入目录，然后在包含上附加键入/**/*.d.ts。