如何将JS k-v对象转换为typescript版本?

Question

我想把js对象转换成typescript版本(我们正在重构代码):(但我不知道如何将JS JSON对象迁移到正确的TS格式。例如，我们有一个这样的JS对象:

JS Object:
{
"filter": {
"price": {
"$gte": 10,
"$lte": 100
},
"symbol": "appl"
},
"sort": {
"createdAt": -1
}
}

所以在js代码中我们很容易声明一个params = {}然后插入params.filter[price] = ....

然而，如果我们想在Typescript中这样做，编译器会抱怨我们需要确定类型，这很困难，因为正如你所看到的&;value&;可以是string、int或其他对象。

你有什么想法吗?超级谢谢! !

Answer 1

如果您想要特定对象的类型，请尝试使用VSCodePaste JSON as Code扩展或此网站，将从您的对象http://json2ts.com/生成typescriptinterface。

Answer 2

为了解析JSON，不需要创建类型/接口:

const json = `{
"filter": {
"price": {
"$gte": 10,
"$lte": 100
},
"symbol": "appl"
},
"sort": {
"createdAt": -1
}
}`
const data = JSON.parse(json)
console.log(data)

如果您也需要，您可以创建一个接口并将解析后的数据分配给它。但是请注意，这并不能验证解析的数据是否与类型/接口匹配(它可以是任何任意的JSON数据，它将被分配给结果变量，但是typescript将只允许您访问接口中存在的成员。

interface Data {
filter: {
price: {
$gte: number
$lte: number
}
symbol: string
}
sort: {
createdAt: number
}
}
const json = `{
"filter": {
"price": {
"$gte": 10,
"$lte": 100
},
"symbol": "appl"
},
"sort": {
"createdAt": -1
}
}`
const data: Data = JSON.parse(json)
console.log(data)
console.log(data.filter.symbol)

Answer 3

你可以使用TypeScript接口来实现。您可以使用网站或扩展(如https://app.quicktype.io/

)轻松生成TS。

TS

export interface Pokedex {
filter: Filter;
sort:   Sort;
}
export interface Filter {
price:  { [key: string]: number };
symbol: string;
}
export interface Sort {
createdAt: number;
}

JS

{
"filter": {
"price": {
"$gte": 10,
"$lte": 100
},
"symbol": "appl"
},
"sort": {
"createdAt": -1
}
}