如何为package.json的导入添加类型定义？

首先安装type-fest依赖：

npm install type-fest --save-dev

接下来有两种方式给导入的package.json指定类型：

方式一：直接在导入时断言类型 #

import packageJson from './package.json';
import type { PackageJson } from 'type-fest';

// 把导入的对象断言为PackageJson类型
const typedPackageJson = packageJson as PackageJson;

之后使用时，TypeScript就能识别package.json的所有字段（包括可选字段）：

'title' in typedPackageJson && <meta name="description" content={typedPackageJson.description} />

方式二：创建类型声明文件（更优雅） #

在项目根目录或@types文件夹下创建package-json.d.ts文件，内容如下：

declare module '*.json' {
  import type { PackageJson } from 'type-fest';
  const value: PackageJson;
  export default value;
}

这样所有.json文件的导入都会自动套用PackageJson类型，无需每次手动断言。

补充：解决可选字段的类型守卫问题 #

有时候即使指定了类型，'description' in packageJson仍无法让TypeScript完全确定字段存在，这时候可以用更明确的类型守卫函数：

function hasDescription(pkg: PackageJson): pkg is PackageJson & { description: string } {
  return typeof pkg.description === 'string';
}

使用时：

hasDescription(typedPackageJson) && <meta name="description" content={typedPackageJson.description} />

这样TypeScript就不会再抛出类型错误了。

内容的提问来源于stack exchange，提问作者Haobo Zhang