What is the process for applying an interface to a class?

Question

What is the process for applying an interface to a class?

I have created a unique custom class named GreetingsManager. It includes a special method named loadData which accepts an object as input and assigns all properties of that object to the class instance. To ensure proper type checking, I have implemented an interface called GreetingsInterface for both the class and the object parameter.

interface GreetingsInterface { 
    message: string;
    name: string;
    lastName: string;
    age: number; 
}
class GreetingsManager implements GreetingsInterface {
    constructor(message: string) {
        this.message = message;
    }
    loadData(obj: object) { 
        Object.assign(this, obj)
        return this;
    }
    greet() {
        return "Hello, " + this.message;
    }
}

let data: GreetingsInterface = {
    message: 'Hi',
    lastName: 'Smith',
    name: 'John',
    age: 25
}
let greetings = new GreetingsManager('Bonjour').loadData(data);

let button = document.createElement('button');
button.textContent = "Display Greetings";
button.onclick = function() {
    console.log(greetings)
}

document.body.appendChild(button);

However, upon compilation, an error is thrown stating that GreetingsManager does not contain a property named 'message'.

typescript inheritance interface

Answer 1

Answer №1

An interface serves to outline the structure of the data it pertains to, without prescribing how it is carried out. By defining that Greeter follows the design of a GreeterInterface, TypeScript acknowledges the shape but not the specific implementation. There are various ways to implement a single shape, and TypeScript remains neutral regarding the desired implementation. For instance:

interface GreeterInterface { 
    greeting: string;
    name: string;
    lastname: string;
    age: number; 
}

class Greeter implements GreeterInterface{
    greeting: "Bonjour" | "Hola";
    name: string;
    lastname: string;

    private _age: number;

    get age(): number {
        return this._age;
    }

    set age(value: number) {
        this._age = value;
    }

    constructor(message: "Bonjour" | "Hola") {
        this.greeting = message;
    }
    fromJson(obj: object) { 
        Object.assign(this, obj)
        return this;
    }
    greet() {
        return "Bonjour, " + this.greeting;
    }
}

The definition outlined by GreeterInterface indicates that the greeting field should be a string, yet Greeter opts for a more specific type, which is acceptable. Additionally, while age could simply be a field, Greeter chooses to use getter/setter methods, demonstrating another valid approach.

Answer 2

An interface serves to outline the structure of the data it pertains to, without prescribing how it is carried out. By defining that Greeter follows the design of a GreeterInterface, TypeScript acknowledges the shape but not the specific implementation. There are various ways to implement a single shape, and TypeScript remains neutral regarding the desired implementation. For instance:

interface GreeterInterface { 
    greeting: string;
    name: string;
    lastname: string;
    age: number; 
}

class Greeter implements GreeterInterface{
    greeting: "Bonjour" | "Hola";
    name: string;
    lastname: string;

    private _age: number;

    get age(): number {
        return this._age;
    }

    set age(value: number) {
        this._age = value;
    }

    constructor(message: "Bonjour" | "Hola") {
        this.greeting = message;
    }
    fromJson(obj: object) { 
        Object.assign(this, obj)
        return this;
    }
    greet() {
        return "Bonjour, " + this.greeting;
    }
}

The definition outlined by GreeterInterface indicates that the greeting field should be a string, yet Greeter opts for a more specific type, which is acceptable. Additionally, while age could simply be a field, Greeter chooses to use getter/setter methods, demonstrating another valid approach.

Answer 3

Answer №2

After much investigation, I finally found the solution. I made a crucial adjustment to the constructor by replacing fromJson with

constructor(obj: GreeterInterface)

. This change was necessary because of an issue with Louis' solution that caused TypeScript to throw an error stating "has no initializer and is not definitely assigned in the constructor."

interface GreeterInterface {
    greeting: string;
    name: string;
    lastname: string;
    age: number;
}

class Greeter implements GreeterInterface{

    age: number;
    greeting: string;
    lastname: string;
    name: string;

    constructor(obj: GreeterInterface) {
        this.lastname =  obj.lastname;
        this.greeting =  obj.greeting;
        this.name =  obj.name;
        this.age =  obj.age;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

let param: GreeterInterface = {
    greeting: 'hello',
    lastname: 'hina',
    name: 'love',
    age:1
}
let greeter = new Greeter(param);


let button = document.createElement('button');
button.textContent = "Say: ";
button.onclick = function() {
    console.log(greeter)
}

document.body.appendChild(button)

Answer 4

After much investigation, I finally found the solution. I made a crucial adjustment to the constructor by replacing fromJson with

constructor(obj: GreeterInterface)

. This change was necessary because of an issue with Louis' solution that caused TypeScript to throw an error stating "has no initializer and is not definitely assigned in the constructor."

interface GreeterInterface {
    greeting: string;
    name: string;
    lastname: string;
    age: number;
}

class Greeter implements GreeterInterface{

    age: number;
    greeting: string;
    lastname: string;
    name: string;

    constructor(obj: GreeterInterface) {
        this.lastname =  obj.lastname;
        this.greeting =  obj.greeting;
        this.name =  obj.name;
        this.age =  obj.age;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

let param: GreeterInterface = {
    greeting: 'hello',
    lastname: 'hina',
    name: 'love',
    age:1
}
let greeter = new Greeter(param);


let button = document.createElement('button');
button.textContent = "Say: ";
button.onclick = function() {
    console.log(greeter)
}

document.body.appendChild(button)

What is the process for applying an interface to a class?

Answer №1

Answer №2

Similar questions

Managing Autocomplete Functionality in React with Material-UI, Both with and without a Pre

Having trouble with a nested Angular 2 component not showing up on the page?

Having trouble with the Angular 17 Router functionality when running on a node server

Using setState as a parameter in a personalized hook in React/Next.js while incorporating TypeScript

Typescript: Potential null object error when defining a method

TypeScript generic functions causing incorrect typing issues with nested correlated unions

What is the reason behind the lack of covariance in an interface when using a type of T[keyof T]?

What could be the reason my mat-form-field is not displaying the label?

In TypeScript Next.js 14 APP, object literals are limited to declaring existing properties

How to remove a specific type from a generic type in Typescript without using Exclude<>?

typescript set x and y values to specific coordinates

Vuejs fails to properly transmit data

TS2339 Error: The property 'Default' is not a valid property for type 'string'

What is the method for running a powershell script within protractor testing?

Utilizing Custom Validators in Angular to Enhance Accessibility

Is it necessary for TypeScript classes that are intended for use by other classes to be explicitly exported and imported?

A specialized type that guarantees a string union includes a particular string literal

Tips for implementing md-icon in combination with md-autocomplete in Angular Material Design:

How can a border be applied to a table created with React components?

React is struggling to locate the specified module