Javascript 如何在Typescript中解析JSON字符串

有没有办法在Typescript中将字符串解析为JSON。
示例：在JS中，我们可以使用

JSON.parse（）

。Typescript中有类似的函数吗

我有一个JSON对象字符串，如下所示：

{“name”：“Bob”，“error”：false}

Typescript是javascript的（超集），因此您只需像在javascript中一样使用

JSON.parse

：

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类型验证的库，例如。它们允许您定义一个TypeScript类，您希望解析您的响应，在您的情况下，它可以是：

import { Field } from "sparkson";
class Response {
   constructor(
      @Field("name") public name: string,
      @Field("error") public error: boolean
   ) {}
}

---

该库将验证JSON负载中是否存在必需的字段，以及它们的类型是否正确。它还可以进行一系列验证和转换。

如果您希望JSON具有经过验证的Typescript类型，则需要自己进行验证工作。这并不是什么新鲜事。在纯Javascript中，您也需要这样做

验证 我喜欢将我的验证逻辑表示为一组“转换”。我将

描述符定义为变换的映射：

类型描述符={
[P在keyof T]：（v:any）=>T[P]；
};

然后我可以制作一个函数，将这些转换应用于任意输入：

函数选取（v:any，d:Descriptor）：T{
const-ret:any={}；
for（输入d）{
试一试{
常数val=d[key]（v[key]）；
if（val的类型！=“未定义”）{
ret[key]=val；
}
}捕捉（错误）{
const msg=err instanceof Error？err.message:String（err）；
抛出新错误（`cannotpick${key}:${msg}`）；
}
}
返回ret；
}

现在，我不仅在验证我的JSON输入，而且在创建一个Typescript类型。上述泛型类型确保结果从“转换”推断出类型

如果转换抛出错误（这是实现验证的方式），我想用另一个错误来包装它，显示哪个键导致了错误

用法
在您的示例中，我将使用以下方法：

const value=pick（JSON.parse（“{”name:“Bob”，“error”：false}”）{
名称：String，
错误：布尔，
});

现在将键入
value
，因为
String
和
Boolean
都是“转换器”，它们接受输入并返回键入的输出

此外，
值
实际上就是这种类型。换句话说，如果
name
实际上是
123
，它将被转换为
“123”
，这样您就有了一个有效的字符串。这是因为我们在运行时使用了
String
，这是一个内置函数，它接受任意输入并返回
String

你可以看到这是可行的。尝试以下方法来说服自己：


将鼠标悬停在
常量值
定义上，查看弹出窗口是否显示了正确的类型
尝试将
“Bob”
更改为
123
，然后重新运行示例。在控制台中，您将看到名称已正确转换为字符串
“123”
有一个很棒的图书馆

在您的情况下，您需要运行以下代码：

import {JSONObject, required} from 'ts-json-object'

class Response extends JSONObject {
    @required
    name: string;

    @required
    error: boolean;
}

let resp = new Response({"name": "Bob", "error": false});

此库将在解析
json之前验证json。解析
在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;
}

键入safe
JSON.parse
您可以继续使用
JSON.parse
，因为TS是JS超集。仍然存在一个问题：返回，这破坏了类型安全性。以下是两种更强类型的选项：

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
function isMyType(o: any): o is MyType {
  return "name" in o && "description" in o
}

然后，
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 }

constsafejsonparse=（guard:（o:any）=>o是T）=>（text:string）：ParseResult=>{
const parsed=JSON.parse（文本）
返回保护（已解析）{已解析，hasError:false}:{hasError:true}
}
类型解析结果=
|{已解析：T；hasError:false；错误？：未定义}
|{已解析？：未定义；hasError:true；错误？：未知}

用法示例：
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`
}

constjson='{“name”：“Foo”，“description”：“Bar”}'；
const result=safeJsonParse（isMyType）（json）//结果：ParseResult
if（result.hasError）{
console.log（“error:/”//此处有进一步的错误处理
}否则{
console.log（result.parsed.description）//result.parsed现在的类型为`MyType`
}

safeJsonParse
可能扩展到或尝试/catch
JSON.parse
错误

2.外部图书馆
如果需要验证许多不同的值，手动编写类型保护函数会变得很麻烦。有一些库可以帮助完成此任务-示例（无全面列表）：


：rel。流行（目前为3.2k星）、对等依赖、函数式编程风格
：全新（回购协议：2020-03-07），力求超越
：TS编译器API的转换器，需要额外的包装器
/：从类型创建JSON模式，并使用
ajv

更多信息




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

例子：
现在唯一的一件事是parsedObj是type
any
，这在TS中通常是一种不好的做法
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`
}

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"] 

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(String({"name": "Bob", "error": false}))

interface User {
  name: string,
  balance: number
}

const json = '{"name": "Bob", "balance": "100"}' //note the string "100"
const user:User = JSON.parse(json)

const newBalance = user.balance + user.balance * 0.05 //should be 105 after interest
console.log(newBalance ) //but it ends up as 1005 which is clearly wrong

{
  "name": "Bob",
  "balance": 100
}

import { Convert, User } from "./user";

const json =
  '{"firstName": "Kevin", "lastName": "Le", "accountBalance": "100"}';

try {
  const user = Convert.toUser(json);
  console.log(user);
} catch (e) {
  console.log("Handle error", e);
}

// To parse this data:
//
//   import { Convert, User } from "./file";
//
//   const user = Convert.toUser(json);
//
// These functions will throw an error if the JSON doesn't
// match the expected interface, even if the JSON is valid.

export interface User {
    name:    string;
    balance: number;
}

// Converts JSON strings to/from your types
// and asserts the results of JSON.parse at runtime
export class Convert {
    public static toUser(json: string): User {
        return cast(JSON.parse(json), r("User"));
    }

    public static userToJson(value: User): string {
        return JSON.stringify(uncast(value, r("User")), null, 2);
    }
}

function invalidValue(typ: any, val: any, key: any = ''): never {
    if (key) {
        throw Error(`Invalid value for key "${key}". Expected type ${JSON.stringify(typ)} but got ${JSON.stringify(val)}`);
    }
    throw Error(`Invalid value ${JSON.stringify(val)} for type ${JSON.stringify(typ)}`, );
}

function jsonToJSProps(typ: any): any {
    if (typ.jsonToJS === undefined) {
        const map: any = {};
        typ.props.forEach((p: any) => map[p.json] = { key: p.js, typ: p.typ });
        typ.jsonToJS = map;
    }
    return typ.jsonToJS;
}

function jsToJSONProps(typ: any): any {
    if (typ.jsToJSON === undefined) {
        const map: any = {};
        typ.props.forEach((p: any) => map[p.js] = { key: p.json, typ: p.typ });
        typ.jsToJSON = map;
    }
    return typ.jsToJSON;
}

function transform(val: any, typ: any, getProps: any, key: any = ''): any {
    function transformPrimitive(typ: string, val: any): any {
        if (typeof typ === typeof val) return val;
        return invalidValue(typ, val, key);
    }

    function transformUnion(typs: any[], val: any): any {
        // val must validate against one typ in typs
        const l = typs.length;
        for (let i = 0; i < l; i++) {
            const typ = typs[i];
            try {
                return transform(val, typ, getProps);
            } catch (_) {}
        }
        return invalidValue(typs, val);
    }

    function transformEnum(cases: string[], val: any): any {
        if (cases.indexOf(val) !== -1) return val;
        return invalidValue(cases, val);
    }

    function transformArray(typ: any, val: any): any {
        // val must be an array with no invalid elements
        if (!Array.isArray(val)) return invalidValue("array", val);
        return val.map(el => transform(el, typ, getProps));
    }

    function transformDate(val: any): any {
        if (val === null) {
            return null;
        }
        const d = new Date(val);
        if (isNaN(d.valueOf())) {
            return invalidValue("Date", val);
        }
        return d;
    }

    function transformObject(props: { [k: string]: any }, additional: any, val: any): any {
        if (val === null || typeof val !== "object" || Array.isArray(val)) {
            return invalidValue("object", val);
        }
        const result: any = {};
        Object.getOwnPropertyNames(props).forEach(key => {
            const prop = props[key];
            const v = Object.prototype.hasOwnProperty.call(val, key) ? val[key] : undefined;
            result[prop.key] = transform(v, prop.typ, getProps, prop.key);
        });
        Object.getOwnPropertyNames(val).forEach(key => {
            if (!Object.prototype.hasOwnProperty.call(props, key)) {
                result[key] = transform(val[key], additional, getProps, key);
            }
        });
        return result;
    }

    if (typ === "any") return val;
    if (typ === null) {
        if (val === null) return val;
        return invalidValue(typ, val);
    }
    if (typ === false) return invalidValue(typ, val);
    while (typeof typ === "object" && typ.ref !== undefined) {
        typ = typeMap[typ.ref];
    }
    if (Array.isArray(typ)) return transformEnum(typ, val);
    if (typeof typ === "object") {
        return typ.hasOwnProperty("unionMembers") ? transformUnion(typ.unionMembers, val)
            : typ.hasOwnProperty("arrayItems")    ? transformArray(typ.arrayItems, val)
            : typ.hasOwnProperty("props")         ? transformObject(getProps(typ), typ.additional, val)
            : invalidValue(typ, val);
    }
    // Numbers can be parsed by Date but shouldn't be.
    if (typ === Date && typeof val !== "number") return transformDate(val);
    return transformPrimitive(typ, val);
}

function cast<T>(val: any, typ: any): T {
    return transform(val, typ, jsonToJSProps);
}

function uncast<T>(val: T, typ: any): any {
    return transform(val, typ, jsToJSONProps);
}

function a(typ: any) {
    return { arrayItems: typ };
}

function u(...typs: any[]) {
    return { unionMembers: typs };
}

function o(props: any[], additional: any) {
    return { props, additional };
}

function m(additional: any) {
    return { props: [], additional };
}

function r(name: string) {
    return { ref: name };
}

const typeMap: any = {
    "User": o([
        { json: "name", js: "name", typ: "" },
        { json: "balance", js: "balance", typ: 0 },
    ], false),
};