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

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

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

当前回答

如果你想让你的JSON有一个经过验证的Typescript类型,你需要自己做这个验证工作。这并不是什么新鲜事。在纯Javascript中,也需要这样做。

验证

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

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将被类型化,因为String和Boolean都是“转换器”,它们接受输入并返回类型化输出。

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

你可以看到它在这里工作。试试下面的方法来说服自己:

将鼠标悬停在const值定义上,查看弹出窗口显示正确的类型。 尝试将“Bob”更改为123并重新运行示例。在控制台中,您将看到名称已正确地转换为字符串“123”。

其他回答

有一个很棒的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

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

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

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

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

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

在我看来,对于包含在关联数组| 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))
}
...

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

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

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