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

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

{"name": "Bob", "error": false}

当前回答

你还可以使用一些库来执行json的类型验证,比如Sparkson。它们允许你定义一个TypeScript类,你想解析你的响应,在你的情况下,它可以是:

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

该库将验证所需字段是否出现在JSON有效负载中,以及它们的类型是否正确。它还可以执行一系列验证和转换。

其他回答

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的类型验证,比如Sparkson。它们允许你定义一个TypeScript类,你想解析你的响应,在你的情况下,它可以是:

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

该库将验证所需字段是否出现在JSON有效负载中,以及它们的类型是否正确。它还可以执行一系列验证和转换。

在我看来,对于包含在关联数组| Map<string中的数据,任何>,有点放松(只有键检查),但在我看来最简单的方法(JsDoc版本)

(使用空py类实例进行类型引用和每个键匹配,如果解析或键匹配失败则返回'undefined')

types.js

export class FormCheckError {
    constructor(
        /** @type {string?}*/ message, 
        /** @type {string?}*/ oldValue
    ) { 
        this.oldValue = oldValue;
        this.errorMessage = message;
    }
}

json.js

/**
 * @template T
 * @param   { Object<keyof T,any>[] } keys2Check 
 * @param   { string } jsonString
 * @returns { T | undefined }
 */
 export function JsonCheckedParse(keys2Check = [],jsonString = '{}') {
    try {
        let result = JSON.parse(jsonString)
        let resultKeys = Object.keys(result)
        if (keys2Check.length !== resultKeys.length) {
            return undefined;
        } 
        keys2Check.forEach(function(key) {
            if (resultKeys.indexOf(key) == -1) {
                return undefined;                
            }
        })
        return result;
    } catch(e) {
        return undefined;
    }
}

使用场景:

1.编码:

ssr-side.js

import { FormCheckError } from 'types'

...
if (oldValue.length == 0) {
    return {
      body:  JSON.stringify(
        new FormCheckError(
            "You shouldn't post empty entries.", 
            oldValue
        )
     )
    }
}
...

2.解码:

browser-side.js

import { FormCheckError } from 'types'  
import { JsonCheckedParse } from 'json'     
...

/** @type {import('./$types').ActionData} */  // Sveltekit stuff
export let form;  // response received from 'ssr-side.js'

// will be undefined in case of type mismatch beetween encoded & decoded
/** @type {FormCheckError | undefined}*/
let checkError = JsonCheckedParse(
    Object.keys(new FormCheckError()), // an empty class instance for knowing its keys
    form?.body || '{}' // the JSON to parse and check for type
) 

...
if (checkError?.errorMessage) {
    console.log(String(checkError.errorMessage))
}
...

使用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来做繁重的工作并生成代码。快速复制并粘贴下面的字符串。

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

确保选择TypeScript作为语言,并启用“验证JSON”。在运行时解析结果”

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

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

用户。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),
};

类型安全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:验证外部数据