Question

我有一个从服务器发送到浏览器的JSON对象。我要从该JSON对象检查它是否是某个类的实例（换句话说，请检查它们的类属性是否存在于JSON对象中），而不进行任何会使我的代码变慢的循环。

我上课了：

export class MyClass implements IInterface {
    type: MyType = "Page";
    isAbsolute: boolean = false;
}

IInterface：

export interface IInterface {
    type: MyType
}

MyType：

export type MyType = "Page" | "Other"

我只是用JavaScript来检查它是否是这样的页面：

if("type" in theObject && theObject.type === "Page"){
    //so it's a page
}

如果我必须在打字稿中这样做，那么我就没有理由在Javascript上使用打字稿。

我通过创建对象进行了一些测试，但是typeof和instanceof无法知道它们是否兼容。

let page1 = {'type': "Page", "isAbsolute": true};

let page1Cast = page1 as MyClass;

let anyCast = {"hello": "world"} as MyClass;

let page2 = new MyClass();
page2.isAbsolute = true;

console.log("typeof", typeof page1);

console.log("page1", page1);

console.log("page2", page2);

console.log("page1 instanceof", page1 instanceof MyClass);
console.log("page2 instanceof", page2 instanceof MyClass);
console.log("page1Cast instanceof", page1Cast instanceof MyClass);
console.log("anyCast instanceof", anyCast instanceof MyClass);

输出为：

typeof object
page1 {type: "Page", isAbsolute: true}
page2 MyClass {type: "Page", isAbsolute: true}
page1 instanceof false
page2 instanceof true
page1Cast instanceof false
anyCast instanceof false

如何像我在JS中一样检查page1是否是type MyClass的智慧型对象（检查每个属性是否存在以及值是否存在或循环）？

Answer 1

对于服务器响应，您可以仅使用接口并像以前一样检查响应。使用打字稿，您将获得干净的代码，更快的更改，属性类型和响应类型以及许多其他功能。

Answer 2

如果您知道从服务器获取的JSON对象的类型，则可以对其进行强制转换。例如：

interface MyJSONObject {
    someProperty: number
}
fetch(...)
    .then((result) => result.json())
    .then((myObject: MyJSONObject ) => {
        console.log(myObject.someProperty)
    })

请注意，无需检查属性。

但是，如果您不知道对象的类型，那么您怎么期望TypeScript知道它呢？在这种情况下，某种属性检查是唯一的方法。但是，类型联合使这变得漂亮。

interface JSONObjectWithNumber {
    myNumber: number
}
interface JSONObjectWithString {
    myString: string
}
JSONObjectOnServer = JSONObjectWithNumber | JSONObjectWithString
fetch(...)
    .then((result) => result.json())
    .then((myObject: JSONObjectOnServer) => {
        // Conclude type of object, by checking for a conclusive property.
        if ('myNumber' in myObject) {
            // TypeScript automatically concludes, that the object must be JSONObjectWithNumber.
            console.log(myObject.myNumber)
        } else {
            // TypeScript automatically concludes, that the object must be JSONObjectWithString.
            console.log(myObject.myString)
        }
    })

打字稿检查类型兼容性

2 个答案: