Typescript: setting a property to be a particular type

user_584714 0
Viewed 58

I'm very new to Typescript, just exploring how to convert our existing JS code. My approach (which may well be flawed) is to do the minimal to just get it working in TypeScript, and then gradually convert it to follow "best practices".

I seem to have fallen at the first hurdle.....

I have the following TypeScript, using jQuery (in an ASP.NET .NET5 application).

interface MyInterface {
    prop1: string;
    prop2: number;
}

const something = {
    currentThing : MyInterface,

    init: (): void => {
        //
    }
};

$(something.init);

So the idea is that when the page loads, something.init will be executed. This will set up things like event handlers via jQuery selectors, etc. etc. All that part seems to work just fine.

However...

At some point, an event handler will fire and I'll create a new object that will implement MyInterface. I'll need to preserve that (by setting it to be the value of the property/field currentThing) so that it can then be accessed by future events.

However, Typescript doesn't like the line currentActivity: MyInterface, and I get the error:

'MyInterface' only refers to a type, but is being used as a value here.

typescript javascript
3 Answers

I recommend you to type your something object using a new interface, like :

interface MyInterface {
    prop1: string;
    prop2: number;
}

interface Something {
  currentThing: MyInterface;
  init: () => void;
}

const something: Something = {
    currentThing: {
      prop1: 'foo',
      prop2: 5,
    },

    init: (): void => {
        //
    },
};

console.log(something.init);
user_33370800

An object follows the key-value structure, Typescript understands the current object definition as

const something = {
    //    key         value
    currentThing : MyInterface,    
};

and as MyInterface is not a valid value, it will throw the mentioned error.

What you should do in this case is to define types for the something object, typing its properties like the following:

interface MyInterface {
    prop1: string;
    prop2: number;
}

interface SomethingInterface {
    currentThing : MyInterface;
    init: () => void
}

const currentThing = { prop1: 'aStringValue', prop2: 12345 };
const something: SomethingInterface = {
    currentThing,
    init: (): void => {
        //
    }
};

$(something.init);
user_92813140

As others have stated you cannot use typings for fields inside an object literal. If necessary I make it more readable using a class instead and export a const using the instance of that class.

Example:

interface MyInterface {
    prop1: string;
    prop2: number;
}

class Something implements MyInterface {

    public Something(public prop1: string, public prop2: number) {
    }

    init(): void {
    }
}

export const something = new Something('value1', 10);

$(something.init);
user_8587570
Related