CODEWITHSUNDEEP
javascripttypescript
DrGriff
DrGriff

Reputation: 4906

Typescript: setting a property to be a particular type

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.

Upvotes: 3

Views: 789

Answers (3)

Silvermind
Silvermind

Reputation: 5944

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);

Upvotes: 0

Claudio Busatto
Claudio Busatto

Reputation: 761

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);

Upvotes: 1

Orelsanpls
Orelsanpls

Reputation: 23515

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);

Upvotes: 1

Related Questions