React中导入JSON文件并对其元素进行类型转换的方法

你可以通过以下几种方式给JSON元素指定明确类型，避免使用any：

1. 先定义对应JSON结构的类型 #

首先创建一个与JSON元素结构完全匹配的TypeScript接口：

interface StringItem {
  type: number;
  text: string;
  during: number;
}

2. 方式一：给导入的JSON数组指定类型 #

直接给导入的JSON变量声明类型，后续使用数组元素时TypeScript会自动推断其类型：

import myStrings from './date.json';

// 声明数组类型为StringItem[]
const stringItems: StringItem[] = myStrings;
const ret = myFunction(stringItems[0]);

// 函数参数指定为StringItem类型
const myFunction = (astringParameter: StringItem): string => {
  // 这里可以安全访问type、text、during属性
  return astringParameter.text;
};

3. 方式二：使用类型断言转换单个元素 #

如果只需要转换单个数组元素，直接用as关键字做类型断言：

import myStrings from './date.json';

// 对单个元素进行类型断言
const ret = myFunction(myStrings[0] as StringItem);

const myFunction = (astringParameter: StringItem): string => {
  return astringParameter.text;
};

4. 方式三：严格类型守卫（可选，用于验证JSON结构） #

如果需要确保外部JSON数据确实符合预期结构（比如避免JSON格式错误导致的问题），可以写一个类型守卫函数做校验：

interface StringItem {
  type: number;
  text: string;
  during: number;
}

// 类型守卫函数，验证元素是否符合StringItem类型
function isStringItem(item: unknown): item is StringItem {
  return (
    typeof item === 'object' &&
    item !== null &&
    'type' in item && typeof (item as StringItem).type === 'number' &&
    'text' in item && typeof (item as StringItem).text === 'string' &&
    'during' in item && typeof (item as StringItem).during === 'number'
  );
}

import myStrings from './date.json';

const firstItem = myStrings[0];
// 先校验结构再使用
if (isStringItem(firstItem)) {
  const ret = myFunction(firstItem);
} else {
  console.error('JSON元素结构不符合预期');
}

const myFunction = (astringParameter: StringItem): string => {
  return astringParameter.text;
};

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