有没有办法在Typescript中将字符串解析为JSON ? 示例:在JS中,我们可以使用JSON.parse()。Typescript中有类似的函数吗?
我有一个JSON对象字符串如下:
{"name": "Bob", "error": false}
有没有办法在Typescript中将字符串解析为JSON ? 示例:在JS中,我们可以使用JSON.parse()。Typescript中有类似的函数吗?
我有一个JSON对象字符串如下:
{"name": "Bob", "error": false}
当前回答
是的,在TypeScript中这有点棘手,但你可以像这样做下面的例子
let decodeData = JSON.parse(' ${jsonResponse} ');
其他回答
有一个很棒的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
如果你想让你的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”。
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);
(操场上的代码)
使用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的类型验证,比如Sparkson。它们允许你定义一个TypeScript类,你想解析你的响应,在你的情况下,它可以是:
import { Field } from "sparkson";
class Response {
constructor(
@Field("name") public name: string,
@Field("error") public error: boolean
) {}
}
该库将验证所需字段是否出现在JSON有效负载中,以及它们的类型是否正确。它还可以执行一系列验证和转换。