如何在 TypeScript 中解析 JSON 字符串
使用 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": "Zadmei", "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": "Zadmei", "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()); // 👉️ "ZADMEI"
}
我们使用问号将 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));
}
联合类型通过组合两个或多个其他类型而形成,并表示可以是任何指定类型的值。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。