当从LocalStorage为对象赋值时,如何在typescript对象中创建实例方法

Question

我是Java开发人员,但我正在尝试使用打字稿来玩游戏.

这是我的用户对象:

export class User
{
    id: string;
    name: string;
    email?: string;
    unit: string;
    street: string;
    postalcode: string;
    paymentmode: string;

    public isComplete(): boolean
    {
        if(this.id != null && this.email != null && this.isAddress()){ return true}
        else return false;
    }

    public isAddress(): boolean
    {
        if(this.street != null && this.postalcode != null){ return true}
        else return false
    }


}

还有另一种打字稿......

var user = new User();
user = this.loginService.getLocalUser();

我假设localStorage被解析为用户!

我无法以这种方式访问​​isComplete方法

user.isComplete()

相反,我需要将它用作静态对象

User.isComplete

我的getLocaluser:

getLocalUser(): User {
        var user = new User();
        user = JSON.parse(localStorage.getItem('user'));

        return user;
    }

我怎样才能实现它？

Answer 1

用这个

let user = new User().deserialize(this.loginService.getLocalUser());

现在在User模型中添加一个deserialize()方法

deserialize(input: any): User {
    let self: any = this;
    for (let prop in input) {
            self[prop] = input[prop];
    }
    return self;
}

当你调用你的web服务并User使用它来映射到你的对象时,会发生什么呢？parse()因为它们不在你的response对象中,所以deserialize()所做的是创建一个新的User对象副本并从一个一个地复制响应值.

Answer 2

只需User使用从中检索到的已解析JSON数据实例化该类localStorage。

更改您的getLocalUser方法，如下所示：

getLocalUser(): User {
    let userData = JSON.parse(localStorage.getItem('user'));
    let user = new User(userData);

    return user;
}

现在，有了新实例后，通常可以使用该类的已定义实例方法：

let user = this.loginService.getLocalUser();
let isComplete = user.isComplete();

console.log(isComplete); // => true/false

另外，您还错过了将构造函数放到User类中的方法：

export class User
{
    id: string;
    name: string;
    // ...

    constructor(userData: any) {
        this.id = userData.id;
        this.name = userData.name;
        // ...
    }

    public isComplete(): boolean
    {
        if(this.id != null && this.email != null && this.isAddress()){ return true}
        else return false;
    }

    // the rest of the methods...

}

Answer 3

错误从这里开始 JSON.parse(localStorage.getItem('user'));

从该语句返回的对象不是type的对象User，因此没有isComplete成员方法。

@rattlehand的解决方案对您来说应该足够了。但是代码以这种方式变得动态。

但是，我更喜欢完全键入解决方案，因为这是使用TS的重要目标之一。

export interface User
{
    id: string;
    name?: string;
    ...
}

function isComplete(user: User) { 
    if (user.id != null && user.email != null ) { 
        return true;
    }
    return false;
}

function getLocalUser(): User {
    var user = JSON.parse(localStorage.getItem('user')) as User;
    return user;
}

var user = getLocalUser();
console.log(isComplete(user)); // true or false

对于Java，使用接口而不是类来创建模型可能很奇怪。它适用于我使用过的大多数流行框架，这些框架是用TS编写的，例如Angular，RxJs。这同样适用于DefinitelyTyped的定义。当然，在某些情况下，Class是更好的解决方案。我将留下空间供您查找。

您甚至可以localStorage通过创建通用包装器来进一步进行严格类型化。

export class LocalStorageService {
    private storage = localStorage;

    get<T>(key: string): T {
        var serialized: string = this.storage.getItem(key);
        return serialized ? <T>JSON.parse(serialized) : undefined;
    }

    set<T>(key: string, data: T) {
        var serialized: string = JSON.stringify(data);
        this.storage.setItem(key, serialized);
    }

    remove(key: string) {
        this.storage.removeItem(key);
    }
}

Answer 4

你只需要这样做：

var user = new User;

user.isComplete();

编辑问题后，如果我理解正确，您需要使用命名空间和三斜杠指令，如下所示：在第一个文件中，例如a.ts ：

namespace myNameSpace{
    export class User
    {
        id: string;
        name: string;
        email?: string;
        unit: string;
        street: string;
        postalcode: string;
        paymentmode: string;

        public isComplete(): boolean
        {
            if(this.id != null && this.email != null && this.isAddress()){ return true}
            else return false;
        }

        public isAddress(): boolean
        {
            if(this.street != null && this.postalcode != null){ return true}
            else return false
        }
    }
}

在第二个文件中。b.ts例如：

/// <reference path="a.ts" />
namespace myNameSpace{
    var user = new User();
    //user = this.loginService.getLocalUser(); //this function need to be checked in your environment
    user.isComplete();
}