Creating a TypeScript class that includes all the attributes of a pre-existing object type

Question

Creating a TypeScript class that includes all the attributes of a pre-existing object type

One technique I frequently use in TypeScript involves transforming a plain JSON object definition into a class during runtime. Here's an example:

export type LessonDef = {
  id: string
  title: string
  slug: string
  shortdesc: string
  explanation: string
  exercises: {
    from: string
    message: string
    translation: string
    hint?: string
    feedback?: { [key: string]: string }
  }[]
}

export class Lesson {
  constructor(readonly def: LessonDef) {
    Object.assign(this, def)
  }

  // Additional methods go here
}

An issue arises when the type system does not recognize the outcome of Object.assign. How can I inform TypeScript that Lesson is an extension of the type LessonDef?

typescript

Answer 1

Answer №1

For more information, check out this response

You have the option to combine your class declaration and interface.

Here's an example to consider:

interface Lesson {
    id: string
    title: string
    slug: string
    shortdesc: string
    explanation: string
    exercises: {
        from: string
        message: string
        translation: string
        hint?: string
        feedback?: { [key: string]: string }
    }[]
}

declare let x: Lesson;

class Lesson {
    constructor(def: Lesson) {
        Object.assign(this, def);
    }
}

const result = new Lesson(x)

result.exercises // works fine

Try it out in the playground

@Cerberus, thank you for highlighting my error with using {... def} instead of def

Nevertheless, there is a downside - you may reference this.exercises before Object.assign

class Lesson {
    constructor(def: Lesson) {
        this.exercises //fine, <----- DOWNSIDE!
        Object.assign(this, def);
    }
}

Answer 2

For more information, check out this response

You have the option to combine your class declaration and interface.

Here's an example to consider:

interface Lesson {
    id: string
    title: string
    slug: string
    shortdesc: string
    explanation: string
    exercises: {
        from: string
        message: string
        translation: string
        hint?: string
        feedback?: { [key: string]: string }
    }[]
}

declare let x: Lesson;

class Lesson {
    constructor(def: Lesson) {
        Object.assign(this, def);
    }
}

const result = new Lesson(x)

result.exercises // works fine

Try it out in the playground

@Cerberus, thank you for highlighting my error with using {... def} instead of def

Nevertheless, there is a downside - you may reference this.exercises before Object.assign

class Lesson {
    constructor(def: Lesson) {
        this.exercises //fine, <----- DOWNSIDE!
        Object.assign(this, def);
    }
}

Creating a TypeScript class that includes all the attributes of a pre-existing object type

Answer №1

Similar questions

Updating the state in React Native does not occur

Group Hover by StyleX

Altering the background color of an individual mat-card component in an Angular application

Merging two arrays in Typescript and incrementing the quantity if they share the same identifier

The dropdown cannot be disabled because it is being passed as an input parameter

Utilize the useState hook to update state when changes occur in the

What is the best way to verify that I am receiving the 'jwt' token in my code?

Error encountered when packaging WebAssembly using Rollup

Ways to integrate user input into the header of an Angular HTTP post method

All-encompassing NextJS App router with a focus on Internationalization

What is the best way to pass props to a styled component (e.g., Button) in Material-UI

Issues with Injectable Service within Another Service in Angular 2

Is it possible to access a class with protected/private fields written in TypeScript from outside the class in JavaScript?

Explaining the distinction between include and rootDir in tsconfig.json

Implementing a NextJS client component within a webpage

Using Angular and Typescript to implement a switch case based on specific values

Typescript: The property 'userId' is not found within the 'unknown' type

What are some ways to prevent unnecessary HTML re-rendering when using this.sanitizer.bypassSecurityTrustHtml(value)?

Running the nestjs build command is impossible without the existence of the node_modules folder

Nested interfaces can utilize sum types