CODEWITHSUNDEEP
typescriptaurelia
si2030
si2030

Reputation: 4035

Aurelia / Typescript - Error when trying to set one element of a variable set as an interface

I have an Aurelia view model that is used in a compose tag as so:

    <compose view-model="../address/address" view='../address/address.html' model.bind ="client.address"></compose>

It works. In some cases I am passing the value of the address as client.address and when this is available it works, otherwise all the fields work as a "Create" page and are empty.

One of the address components is a "State" dropdown component. This is it here:

<div class="col-md-3">
    <div class="form-group">
        <label class="control-label col-md-6">State:</label>
        <div class="col-md-5">
            <aubs-typeahead data.bind="states" value.bind="address.stateShortName" placeholder="State..." open-on-focus.bind="true"></aubs-typeahead>
        </div>
    </div>
</div>

Note that I have bound the dropdown to "address.stateShortName" Again this works and shows the state name from the parent which in this case is client.

In those cases where I have no data to bind I instead wanted to populate the state dropdown with a default value however I am getting a problem with assigning a value to the bound variable "address.stateShortName"

Error TS2339 (TS) Property 'stateShortName' does not exist on type 'never'.

Address.ts has as its main variable "address" which is set to an interface which contains all the variables for the address viewmodel:

    interface AddressDetails {
        address1: string;
        address2: string;
        suburb: string;
        postcode: string;
        stateShortName: string;
        addressLocationId: number;
    }

You can see I have "stateShortName" as one of the elements.

In the Address view-model I set the address to the AddressDetails interface:

export class Address {
address: AddressDetails;

So when I have the situation where I am not passing a model to this view model I instead wanted to set the state to a default value... say "VIC" at the same time I fetch the states dropdown array (which works) however I am getting that error above when I try to set this value address.stateShortName after I have made a fetch.

    fetch("/api/selectData/GetStatesAndCompanyStateId", {
        method: "GET",
        headers
    })
        .then(response => response.json())
        .then(data => {
            for (const key in data.stateDropDownList) {
                this.states[key] = data.stateDropDownList[key].stateShortName;
            }

            if (!this.address) {

                this.address.stateShortName = data.companyStateShortName //HERE!
            }
        })

How can I set this single element "address.stateShortName" in the address variable when its indicated the whole variable is undefined?

How can I set "address" so it has, at the very least, empty values and avoids being undefined for that case where its not being set?

Upvotes: 0

Views: 113

Answers (1)

SNO
SNO

Reputation: 866

First of all, why are you adding a view-model and a view etc. in your compose tag? Only having a view-model is enough (also see documentation here)

Following

<compose view-model="../address/address" view='../address/address.html' model.bind ="client.address"></compose>

can also be

<compose view-model="../address/address"></compose>

As far as I can see you have a dedicated interface file? If so, do you have the interface file imported in your address class?

Here is a good documentation how to use interfaces with typescript: Documentation

Upvotes: 1

Related Questions