TS有JavaScript运行时

Typescript有JavaScript运行时，因为它被编译成JS。这意味着作为语言一部分内置的JS对象，如JSON、Object和Math，也可以在TS中使用。因此，我们可以只使用JSON。parse方法来解析JSON字符串。

例子:

const JSONStr = '{"name": "Bob", "error": false}'

// The JSON object is part of the runtime
const parsedObj = JSON.parse(JSONStr);

console.log(parsedObj);
// [LOG]: {
//   "name": "Bob",
//   "error": false
// } 

// The Object object is also part of the runtime so we can use it in TS
const objKeys = Object.keys(parsedObj);

console.log(objKeys);
// [LOG]: ["name", "error"] 

现在唯一的问题是parsedObj是any类型，这在TS中通常是一个不好的做法。如果我们使用类型守卫，我们可以类型对象。这里有一个例子:

const JSONStr = '{"name": "Bob", "error": false}'
const parsedObj = JSON.parse(JSONStr);

interface nameErr {
  name: string;
  error: boolean;
}

function isNameErr(arg: any): arg is nameErr {
  if (typeof arg.name === 'string' && typeof arg.error === 'boolean') {
    return true;
  } else {
    return false;
  }
}

if (isNameErr(parsedObj)) {
  // Within this if statement parsedObj is type nameErr;
  parsedObj
}

JSON。parse在TypeScript中是可用的，所以你可以直接使用它:

JSON.parse('{"name": "Bob", "error": false}') // Returns a value of type 'any'

但是，您经常希望在解析JSON对象时确保它匹配某个类型，而不是处理any类型的值。在这种情况下，您可以定义如下函数:

function parse_json<TargetType extends Object>(
  json: string,
  type_definitions: { [Key in keyof TargetType]: (raw_value: any) => TargetType[Key] }
): TargetType {
  const raw = JSON.parse(json); 
  const result: any = {};
  for (const key in type_definitions) result[key] = type_definitions[key](raw[key]);
  return result;
}

这个函数接受一个JSON字符串和一个包含加载所创建对象的每个字段的单独函数的对象。你可以这样使用它:

const value = parse_json(
  '{"name": "Bob", "error": false}',
  { name: String, error: Boolean, }
);

Typescript是javascript的超集，所以你只需要使用JSON。像在javascript中那样解析:

let obj = JSON.parse(jsonString);

只有在typescript中，你才能有结果对象的类型:

interface MyObj {
    myString: string;
    myNumber: number;
}

let obj: MyObj = JSON.parse('{ "myString": "string", "myNumber": 4 }');
console.log(obj.myString);
console.log(obj.myNumber);

(操场上的代码)

嘿，如果你对json对象进行typeof，结果是typescript类型的字符串。你可以在这里阅读更多:Typescript:字符串和字符串的区别

所以试试这个方法，它会起作用的

JSON.parse(String({"name": "Bob", "error": false}))

类型安全JSON.parse

您可以继续使用JSON。解析，因为TypeScript是JavaScript的超集:

这意味着你可以把任何可用的JavaScript代码放到TypeScript文件中，而不用担心它到底是如何编写的。

还有一个问题:JSON。Parse返回any，这会破坏类型安全(不要使用any)。

以下是针对较强类型的三种解决方案，按复杂度升序排列:

1. 用户定义类型保护

操场上

// For example, you expect to parse a given value with `MyType` shape
type MyType = { name: string; description: string; }

// Validate this value with a custom type guard (extend to your needs)
function isMyType(o: any): o is MyType {
  return "name" in o && "description" in o
}

const json = '{ "name": "Foo", "description": "Bar" }';
const parsed = JSON.parse(json);
if (isMyType(parsed)) {
  // do something with now correctly typed object
  parsed.description
} else { 
// error handling; invalid JSON format 
}

isMyType被称为类型保护。它的优点是，您可以在true if分支中获得一个完全类型的对象。

2. 通用的JSON。解析包装

操场上

围绕JSON创建一个通用包装器。Parse，它接受一个类型保护作为输入，并返回已解析、类型化的值或错误结果:

const safeJsonParse = <T>(guard: (o: any) => o is T) => 
  (text: string): ParseResult<T> => {
    const parsed = JSON.parse(text)
    return guard(parsed) ? { parsed, hasError: false } : { hasError: true }
  }

type ParseResult<T> =
  | { parsed: T; hasError: false; error?: undefined }
  | { parsed?: undefined; hasError: true; error?: unknown }

使用的例子:

const json = '{ "name": "Foo", "description": "Bar" }';
const result = safeJsonParse(isMyType)(json) // result: ParseResult<MyType>
if (result.hasError) {
  console.log("error :/")  // further error handling here
} else {
  console.log(result.parsed.description) // result.parsed now has type `MyType`
}

safeJsonParse可以扩展为快速失败或尝试/捕获JSON。解析错误。

3.外部库

如果需要验证许多不同的值，那么手动编写类型保护函数会变得很麻烦。有一些库可以帮助完成这个任务——示例(没有全面的列表):

Io-ts:具有fp-ts对等依赖，使用函数式编程风格 Zod:力求比io-ts更加面向过程/面向对象 typescript-is:编译器API的TS转换器，需要额外的包装器，如ttypescript typescript-json-schema/ajv:根据类型创建JSON模式，并用ajv进行验证

更多的信息

运行时类型检查#1573 使用Typescript检查接口类型 TypeScript:验证外部数据

是的，在TypeScript中这有点棘手，但你可以像这样做下面的例子

let decodeData = JSON.parse(' ${jsonResponse} ');