Javascript 将JSON字符串反序列化为TS对象

我正在为一个看似非常简单的程序而挣扎

在“geologite.ts”函数“setData”中，模型索引？当从“model.flightplan”或“model.config”引用时，Chrome调试器将“flightplan”和“config”显示为“未定义”。即使在调试器中展开，“model”对象本身似乎也很好

如果您有任何想法或建议，我们将不胜感激；）

地理定位.d.ts

export class FmsFlightPlan {
    public status: string[];
    ...
}

export class Config {
    public airportIcon: IconSettings;
    ...
}

export class InitModel {
    public config: Config;
    public flightplan: FmsFlightPlan;
}

import * as passedData from "./geoLocate.d";

let config: passedData.Config;
let flightPlan: passedData.FmsFlightPlan;

export function setModel( json: string): void {
    console.log( json);  // '{"Config": { "AirportIcon": {...} ...}, {"Flightplan": {"Status": [], ... } ...}'  --- As expected (JSONlint OK)

    const model: passedData.InitModel = JSON.parse( json);
    console.log(model);  // Chrome console: {Config: {…}, Flightplan: {…}}

    flightPlan = model.flightplan; // flightPlan and config are assigned "undefined"
    config = model.config;     // "model" looks OK and Intellisense works.

    flightplanDraw();
} 

地理定位.ts

export class FmsFlightPlan {
    public status: string[];
    ...
}

export class Config {
    public airportIcon: IconSettings;
    ...
}

export class InitModel {
    public config: Config;
    public flightplan: FmsFlightPlan;
}

import * as passedData from "./geoLocate.d";

let config: passedData.Config;
let flightPlan: passedData.FmsFlightPlan;

export function setModel( json: string): void {
    console.log( json);  // '{"Config": { "AirportIcon": {...} ...}, {"Flightplan": {"Status": [], ... } ...}'  --- As expected (JSONlint OK)

    const model: passedData.InitModel = JSON.parse( json);
    console.log(model);  // Chrome console: {Config: {…}, Flightplan: {…}}

    flightPlan = model.flightplan; // flightPlan and config are assigned "undefined"
    config = model.config;     // "model" looks OK and Intellisense works.

    flightplanDraw();
} 

TSC生成的javascript

function setModel(o) {
    console.log(o);
    var e = JSON.parse(o);
    console.log(e), flightPlan = e.flightplan, config = e.config, flightplanDraw()
}

function gmapsReady() {

    initMap();
    $.getJSON("/Home/GetConfig",
        null,
        function(data) {
            setModel(data);
        });
 }  

.NET核心视图Javascript

function setModel(o) {
    console.log(o);
    var e = JSON.parse(o);
    console.log(e), flightPlan = e.flightplan, config = e.config, flightplanDraw()
}

function gmapsReady() {

    initMap();
    $.getJSON("/Home/GetConfig",
        null,
        function(data) {
            setModel(data);
        });
 }  

.NET MVC控制器

public JsonResult GetConfig()
{
    // Load fplan and config objects
    ...
    ... 

    InitModel initModel = new InitModel
    {
        Flightplan = fplan,
        Config = _config
    };

    string json = JsonConvert.SerializeObject(initModel);
    return new JsonResult(json);
}

---

第一个问题似乎是您正在访问

flightplan

和

config

等字段，而在JSON中，它们是

flightplan

和

config

。这就是为什么您会得到

未定义的
s

之后一个稍大的问题是，
JSON.parse
生成的东西是一个简单的JavaScript对象，而
Config
，
FlightPlan
等都是类，它们的实例都属于该类，如果你打算在类中添加方法，那么这个问题会对你产生很大的影响。所以如果你有这样的东西：

let x = new Config();
x.airportIcon = 'foo';
console.log(x.constructor); // Prints 'Config'
let y = JSON.parse('{"airportIcon": "foo"}');
console.log(y.constructor); // Prints 'Object something or other'

因此，两者在结构上是等价的，但在功能上是不等价的。即使进行TS转换，您也无法像在
x
上那样在
y
上调用函数。如果这些都是简单的DTO，那也没关系。但如果没有，您需要明确说明这一点，并执行另一个步骤，将JS对象转换为应用程序对象


无耻的插件：我写这篇文章是为了自动化这个确切的过程——在DTO类型和更有用的JavaScript类之间进行转换


您还可以在.net端配置JSON序列化程序，以将字段名从
PascalCase
转换为“camelCase”。
尝试“flightPlan=model.flightPlan”，并确保名称完全相同（包括大写）。JS中的JSON区分大小写（；@Helder De Baere:非常感谢您的建议，但是使用model.Flightplan会导致TSC编译错误（如预期的那样）然后，我建议将InitModel中的“flightplan”重命名为“flightplan”，也将其重命名为Config。如果这不起作用，那么JSON到您的模型的解析可能有问题谢谢-我将调查命名问题以确保一致性。我在C#/TS/JS“problamatic”中找到了名称因为它们对公共/私有等似乎都有不同的命名标准！-这让我的Resharper和Lints变得疯狂！！！我正在使用“TypeScriptSyntaxPaste”从C#类创建d.ts文件，但肯定会让raynor看一看。谢谢。这确实是JSON序列化期间的一个案例问题。使用CamelCasePropertyNameContractResolver“解决”了这个问题。这些对象（现在）是简单的DTO，但我已将雷诺标记为书签以供将来参考。再次感谢。