如何在 TypeScript 中解析 JSON 字符串

作者

在 TypeScript 中解析 JSON 字符串

How to parse a JSON string in TypeScript

使用该JSON.parse()方法解析 TypeScript 中的 JSON 字符串，例如
const result: Person = JSON.parse(jsonStr). 该方法解析 JSON 字符串并返回相应的值。确保显式键入结果，这会隐式获得any.

索引.ts
const jsonStr = '{"id": 1, "name": "James", "salary": 100}';

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

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

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

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

如果您没有显式输入结果，它会被分配一个类型
any，这会有效地关闭类型检查。

索引.ts
const jsonStr = '{"id": 1, "name": "James", "salary": 100}';


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

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

索引.ts

const jsonStr = '{"id": 1, "name": "James", "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;}[]。

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

索引.ts
const jsonStr = '{"id": 1, "name": "James", "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()); // 👉️ "JAMES"
}

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

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

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

在这种情况下，你应该使用
type guards，它可以帮助你缩小你正在使用的类型。

在我们的if语句中，我们检查是否result.name有字符串类型，这意味着该属性在if语句中保证是一个字符串，我们可以使用特定于字符串的内置方法。

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

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

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

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

索引.ts
const jsonStr = '{"id": 1, "name": "James", "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 is a `number` or `null` here

if (typeof result.salary === 'number') {
  // 👇️ result.salary is a number here
  // 👇️ "100.00"
  console.log(result.salary.toFixed(2));
}

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

–

发表评论