Как создавать методы экземпляра в объекте typescript, когда объекту присваивается значение из LocalStorage

Ответ 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;
}

Что происходит, когда вы вызываете свой веб-сервис и сопоставляете его с вашим объектом User, используя parse(), методы экземпляра которого не создаются, поскольку они не находятся в вашем объекте response, что deserialize() делает, это создает новая копия объекта User и по одному копирует значение из ответа.

Ответ 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...

}

Ответ 3

Ошибка возникает здесь JSON.parse(localStorage.getItem('user'));

Объект, возвращаемый из этого оператора, НЕ является объектом типа 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. То же самое относится к определённым определениям. Конечно, есть случаи, когда класс является лучшим решением. Я оставлю место для вас, чтобы узнать.

Вы даже можете пойти дальше, чтобы сделать 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);
    }
}

Ответ 4

Вам просто нужно сделать это следующим образом:

var user = new User;

user.isComplete();

После вы отредактируете свой вопрос, если я правильно вас понимаю, вам нужно использовать namespace и Директивы Triple-Slash следующим образом: В первом файле 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();
}

Ответ 5

Как насчет просто:

getLocalUser(): User {
    return Object.assign(new User(), JSON.parse(localStorage.getItem('user')));
}

где вы (после MDN: Object.assign()):

скопировать значения всех перечислимых собственных свойств из одного или нескольких исходных объектов в целевой объект.

и

Он вернет целевой объект.

чтобы вы получили только что созданный экземпляр User со всеми реквизитами из разбора JSON.

Ответ 6

Попробуйте это

var user = (<User>this.loginService.getLocalUser());