迹忆客 专注技术分享

使用 JSON.parse() 方法解析 TypeScript 中的 JSON 字符串，例如 const result: Person = JSON.parse(jsonStr)。

该方法解析 JSON 字符串并返回相应的值。 确保显式键入结果，这会隐式获得任何类型。

const jsonStr = '{"id": 1, "name": "迹忆客", "salary": 100}';

type Person = {
  id: number;
  name: string;
  salary: number;
};

// 👇️ const result: Person
const result: Person = JSON.parse(jsonStr);

// 👇️ {id: 1, name: '迹忆客', salary: 100}
console.log(result);

我们使用 JSON.parse 方法来解析 JSON 字符串。

确保明确输入结果

如果我们没有显式键入结果，它会被指定为 any 类型，这会有效地关闭类型检查。

const jsonStr = '{"id": 1, "name": "迹忆客", "salary": 100}';


// ⛔️ const result: any (BAD)
const result = JSON.parse(jsonStr);

使用类型断言来键入结果

我们还可以使用类型断言来设置解析值的类型。

const jsonStr = '{"id": 1, "name": "迹忆客", "salary": 100}';

type Person = {
  id: number;
  name: string;
  salary: number;
};

// 👇️ const result: Person
const result = JSON.parse(jsonStr) as Person; // 👈️ type assertion

正确输入数组

如果我们正在解析的值是一个数组，请将其键入为 Type[]，例如 {id: number; name: string;}[]。

const jsonStr = `
[
  {"id": 1, "name": "Jiyik", "salary": 100},
  {"id": 2, "name": "Alice", "salary": 200}

]`;

type Person = {
  id: number;
  name: string;
  salary: number;
};

// 👇️ const result: Person
const result = JSON.parse(jsonStr) as Person[];

console.log(result);

将可能不存在的属性标记为可选

如果我们不确定对象上是否存在特定属性，请将其标记为可选。

const jsonStr = '{"id": 1, "name": "Jiyik", "salary": 100}';

type Person = {
  id: number;
  name?: string; // 👈️ optional property
  salary?: number; // 👈️ optional property
};

// 👇️ const result: Person
const result = JSON.parse(jsonStr) as Person;

// result.name is string or undefined here

if (typeof result.name === 'string') {
  // 👇️ result.name is string here
  console.log(result.name.toUpperCase()); // 👉️ "JIYIK"
}

我们使用问号将 name 和 salary 属性设置为可选。

如果属性设置为可选，则它可以是指定类型或具有未定义的值。

由于 name 属性的值可能为 undefined，我们不能直接调用 toUpperCase() 方法，因为这可能会导致运行时错误。

在这种情况下，我们应该使用类型保护来缩小您正在使用的类型。

if 语句检查 result.name 是否为字符串类型。

我们能够在 if 块中使用特定于字符串的内置方法，因为 TypeScript 知道该值是一个字符串。

我们无法在运行时验证您定义的类型或接口是否与解析的 JSON 值匹配。

这是因为类型别名和接口在运行时不存在。 TypeScript 仅帮助我们在开发过程中捕获错误。

出于这个原因，我们应该尽可能准确（严格）地使用我们的类型定义。

如果属性可能有多种类型，请使用联合

例如，如果特定属性可能有多种不同类型，请使用联合类型。

const jsonStr = '{"id": 1, "name": "迹忆客", "salary": 100}';

type Person = {
  id: number;
  name: string;
  salary: number | null; // 👈️ number OR null
};

// 👇️ const result: Person
const result = JSON.parse(jsonStr) as Person;

// 👇️ result.salary 在这里是一个 `number` 或 `null`

if (typeof result.salary === 'number') {
  // 👇️ result.salary 在这里是一个数字
  // 👇️ "100.00"
  console.log(result.salary.toFixed(2));
}

联合类型通过组合两个或多个其他类型而形成，并表示可以是任何指定类型的值。