Create typings for object properties in TypeScript

Question

Create typings for object properties in TypeScript

I am inexperienced with TypeScript and am looking to set up types for my object keys. I have explored a few methods to accomplish this, but I am encountering an issue where an error is not triggered when assigning a value of a different type. For example:

interface sectionProp { 
    _type1: String,
    _columnStrechAllowed: Boolean,
    _columnOccupancy: Number,
    is_mandatory: Boolean
}


export class sectionProperties {
  folioSectionContentProp = <sectionProp> {}

  constructor(type?) {
    this.folioSectionContentProp._type1 = type;
    this.folioSectionContentProp._columnStrechAllowed = false;
    this.folioSectionContentProp._columnOccupancy = 6;
    this.folioSectionContentProp.is_mandatory = false;
  }

}

export class createNewSection extends sectionProperties {
  constructor() {
    super("Test") // here I will assign value
 // super(12)     //@ this does not generate any error as well
 // I might assign value by some other way (from object creation) 
 // but I want to know the reason if type is defined then it should 
 // not accept any value other than type 
  }

}

var z = new createNewSection();
console.log(z)

In conclusion, I am striving to ensure that my object keys are explicitly typed.

Many thanks

typescript class interface typescript-typings

Answer 1

Answer №1

The issue lies in the fact that you have not explicitly defined a value for the type parameter in the constructor of sectionProperties, leading it to default to any. This means that any type of value can be assigned to and from it. To rectify this, you need to provide a specific type annotation:

interface sectionProp {
    _type1: String,
    _columnStrechAllowed: Boolean,
    _columnOccupancy: Number,
    is_mandatory: Boolean
}


export class sectionProperties {
    folioSectionContentProp = <sectionProp>{}

    constructor(type: string) {
        this.folioSectionContentProp._type1 = type;
        this.folioSectionContentProp._columnStrechAllowed = false;
        this.folioSectionContentProp._columnOccupancy = 6;
        this.folioSectionContentProp.is_mandatory = false;
    }

}

export class createNewSection extends sectionProperties {
    constructor() {
        super("Test") // assigning a value here
        // super(12)     //this would result in an error
    }

}

To avoid such issues, it is recommended to enable the noImplicitAny compiler option to enforce explicit type declarations where inference is not possible.

Answer 2

The issue lies in the fact that you have not explicitly defined a value for the type parameter in the constructor of sectionProperties, leading it to default to any. This means that any type of value can be assigned to and from it. To rectify this, you need to provide a specific type annotation:

interface sectionProp {
    _type1: String,
    _columnStrechAllowed: Boolean,
    _columnOccupancy: Number,
    is_mandatory: Boolean
}


export class sectionProperties {
    folioSectionContentProp = <sectionProp>{}

    constructor(type: string) {
        this.folioSectionContentProp._type1 = type;
        this.folioSectionContentProp._columnStrechAllowed = false;
        this.folioSectionContentProp._columnOccupancy = 6;
        this.folioSectionContentProp.is_mandatory = false;
    }

}

export class createNewSection extends sectionProperties {
    constructor() {
        super("Test") // assigning a value here
        // super(12)     //this would result in an error
    }

}

To avoid such issues, it is recommended to enable the noImplicitAny compiler option to enforce explicit type declarations where inference is not possible.

Create typings for object properties in TypeScript

Answer №1

Similar questions

Is there a way for one function to access the validation of a nullable field performed by another function?

What is the process for deploying a Lambda function using Terraform that has been generated with CDKTF

Ionic 3: Struggling to Access Promise Value Outside Function

How can you limit a type reference to a specific file in TypeScript?

Having trouble mocking Node fs Modules using Sinon

Arranging Typescript strings in sequential date format

Merging Promises in Typescript

Can a VS Code theme extension be designed using JavaScript or TypeScript rather than JSON?

Maintaining checkbox selection while switching pages in Angular

Is there a way to utilize "npm install ts-node-dev -D" in Termux?

Transform the Standard class into a generic one in typescript

What is the equivalent of getElementById in .ts when working with tags in .js?

What is the syntax for using typeof with anonymous types in TypeScript?

Is it possible to maintain component data in Angular while also incorporating dynamic components?

Ways to modify the input field value in my form based on the current page context

TypeScript utility function that retrieves properties from an interface based on a specified type

Angular 9 Issue: Failure to Display Nested Mat-Tree Children

Mastering the art of throwing and managing custom errors from the server to the client side within Next.js

Steps for linking HTTP requests in Angular 2 depending on the type of response

Extending Interfaces Using Keys from an Array in Typescript