如何在 Typescript 中解析 JSON 字符串

IT技术 javascript json string typescript
2021-02-27 20:08:45

有没有办法在 Typescript 中将字符串解析为 JSON。
示例:在 JS 中,我们可以使用JSON.parse(). Typescript 中是否有类似的功能?

我有一个 JSON 对象字符串,如下所示:

{"name": "Bob", "error": false}
6个回答

Typescript 是 javascript(的超集),因此您只需JSON.parse像在 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);

操场上的代码

@DavidPortabella 没有办法做到这一点,不容易,因为在运行时MyObj不存在。关于这个主题,SO 中有很多其他线程,例如:检查对象是否在运行时使用 TypeScript 实现了接口
2021-04-23 20:08:45
行。我如何验证typescript obj 在运行时满足其接口?也就是说,在这个例子中 myNumber 不是未定义的。例如,在 Scala Play 中,您将使用Json.parse(text).validate[MyObj]. playframework.com/documentation/2.6.x/ScalaJson你怎么能在typescript中做同样的事情(也许有一个外部库可以这样做?)?
2021-05-01 20:08:45
好,谢谢。每天我都更加相信使用 Scalajs。
2021-05-11 20:08:45
如何验证输入是否有效(类型检查,typescript的目的之一)?更换输入'{ "myString": "string", "myNumber": 4 }''{ "myString": "string", "myNumberBAD": 4 }'不会失败,并obj.myNumber将返回undefined。
2021-05-13 20:08:45
@DavidPortabella 您不能对字符串的内容进行类型检查。这是一个运行时问题,类型检查用于编译时
2021-05-13 20:08:45

类型安全 JSON.parse

你可以继续使用JSON.parse,因为 TS 是一个 JS 超集。仍然存在一个问题:JSON.parsereturns any,它破坏了类型安全。以下是更强类型的两个选项:

1. 自定义类型守卫(playground

自定义类型保护是最简单的解决方案,通常足以进行外部数据验证:

// 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 }

用法示例:

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.parse错误。

2. 外部库

如果您需要验证许多不同的值,手动编写类型保护函数会变得很麻烦。有一些库可以帮助完成此任务 - 示例(没有完整列表):

更多信息

如果您希望 JSON 具有经过验证的 Typescript 类型,则需要自己进行验证工作。这不是什么新鲜事。在普通的 Javascript 中,你需要做同样的事情。

验证

我喜欢将我的验证逻辑表示为一组“转换”。我将 a 定义Descriptor为转换映射:

type Descriptor<T> = {
  [P in keyof T]: (v: any) => T[P];
};

然后我可以创建一个将这些转换应用于任意输入的函数:

function pick<T>(v: any, d: Descriptor<T>): T {
  const ret: any = {};
  for (let key in d) {
    try {
      const val = d[key](v[key]);
      if (typeof val !== "undefined") {
        ret[key] = val;
      }
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      throw new Error(`could not pick ${key}: ${msg}`);
    }
  }
  return ret;
}

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

如果转换抛出错误(这就是您实现验证的方式),我喜欢用另一个错误包装它,显示哪个键导致了错误。

用法

在您的示例中,我将按如下方式使用它:

const value = pick(JSON.parse('{"name": "Bob", "error": false}'), {
  name: String,
  error: Boolean,
});

现在value将被输入,因为StringBoolean都是“转换器”,因为它们接受输入并返回输入输出。

此外,value意志实际上是这种类型。换句话说,如果name实际上是123,它将被转换为,"123"以便您拥有有效的字符串。这是因为我们String在运行时使用了一个内置函数,它接受任意输入并返回一个string.

你可以在这里看到这个工作尝试以下事情来说服自己:

  • 将鼠标悬停在const value定义上以查看弹出窗口是否显示正确的类型。
  • 试着改变"Bob"123并重新运行示例。在您的控制台中,您将看到名称已正确转换为字符串"123"
如果您确实想验证 JSON 对象是否具有正确的类型,您不会希望123被自动转换为 string "123",因为它是 JSON 对象中的数字。
2021-04-22 20:08:45
谢谢@lovasoa,你是对的。Transformed类型是完全不必要的。我已经相应地更新了答案。
2021-04-26 20:08:45
您举了一个例子,“如果name实际上是123,它将被转换为"123"。这似乎是不正确的。当我完全复制粘贴您的所有代码并进行更改时,我不会value回来{name: 123..{name:"123"..
2021-05-04 20:08:45
奇怪,它对我有用。在此处尝试:typescriptlang.org/play/index.html(使用123而不是"Bob")。
2021-05-13 20:08:45
我认为您不需要定义Transformed类型。你可以只使用Object.type Descriptor<T extends Object> = { ... };
2021-05-17 20:08:45

有一个很棒的库ts-json-object

在您的情况下,您需要运行以下代码:

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

使用app.quicktype.io在 TypeScript 中安全地解析 JSON。稍后会详细介绍。 JSON.parse()返回类型any并且在“快乐路径”中已经足够了,但可能导致与下游类型安全相关的错误,这违背了 TypeScript 的目的。例如:

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

所以让 quicktype 做繁重的工作并生成代码。将下面的字符串复制并粘贴到 quicktype 中。

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

确保选择TypeScript语言并启用“在运行时验证 JSON.parse 结果”

现在我们可以在解析时防御性地处理异常(如果有)并防止下游发生错误。

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);
}

user.ts 是quicktype生成的文件。

// 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),
};