Expanding upon TypeScript by inheriting interfaces

Question

Expanding upon TypeScript by inheriting interfaces

My goal is to create a User module with multiple classes such as UserDetail, UserResetPassword, and more.

These classes will have some common properties that need to be shared. One approach is to declare the properties in each class and initialize them individually.

Alternatively, I could use inheritance by declaring an interface:

export interface IUser {
    UserID: string;
    UserName: string;
}

Then implement this interface in the classes:

import {IUser} from './IUserDetail'

class UserInfo implements IUser {}

My question is: is this supported in TypeScript? If not, what are some workarounds to resolve this?

oop typescript inheritance

Answer 1

Answer №1

TypeScript introduces a concept known as "type erasure," where all type information is stripped away during the compilation process. This results in the JavaScript output containing no traces of type annotations, interfaces, or ambient declarations, only the actual code.

As a consequence, when you attempt to access the Iuser interface using your module loader at runtime, it won't be found in the resulting JavaScript file.

To address this issue, it is advisable to place your interfaces alongside their primary implementations in separate files. This approach ensures that you don't encounter errors trying to load a module that turns out to be an empty file.

For instance:

export interface Iuser {
    UserID: string;
    UserName: string;
}

export class UserInfo implements Iuser {
}

In other files, you can then do:

import * as User from './UserInfo';

export class Example implements User.Iuser {
}

Answer 2

TypeScript introduces a concept known as "type erasure," where all type information is stripped away during the compilation process. This results in the JavaScript output containing no traces of type annotations, interfaces, or ambient declarations, only the actual code.

As a consequence, when you attempt to access the Iuser interface using your module loader at runtime, it won't be found in the resulting JavaScript file.

To address this issue, it is advisable to place your interfaces alongside their primary implementations in separate files. This approach ensures that you don't encounter errors trying to load a module that turns out to be an empty file.

For instance:

export interface Iuser {
    UserID: string;
    UserName: string;
}

export class UserInfo implements Iuser {
}

In other files, you can then do:

import * as User from './UserInfo';

export class Example implements User.Iuser {
}

Answer 3

Answer №2

Take a look at this example:

After compilation, interfaces do not physically exist but serve the purpose of type checking.

// i-user.ts

export interface IUser {
    UserID:string;
    UserName:string
}

In other programming languages, you must implement all members of an interface. TypeScript ensures that nothing is missed during implementation.

// user-info.ts

import { IUser } from './i-user'

export class UserInfo implements IUser {
    UserID:string;
    UserName:string;
    OtherInfo:string;
}

By using the extend keyword, all methods from the parent class are inherited automatically without needing to re-implement them.

// specific-user-info.ts

import { UserInfo } from './user-info'

class SpecificUserInfo extends UserInfo {
    logInfo() {
        console.log(this.UserID, this.UserName);
    }
}

Answer 4

Take a look at this example:

After compilation, interfaces do not physically exist but serve the purpose of type checking.

// i-user.ts

export interface IUser {
    UserID:string;
    UserName:string
}

In other programming languages, you must implement all members of an interface. TypeScript ensures that nothing is missed during implementation.

// user-info.ts

import { IUser } from './i-user'

export class UserInfo implements IUser {
    UserID:string;
    UserName:string;
    OtherInfo:string;
}

By using the extend keyword, all methods from the parent class are inherited automatically without needing to re-implement them.

// specific-user-info.ts

import { UserInfo } from './user-info'

class SpecificUserInfo extends UserInfo {
    logInfo() {
        console.log(this.UserID, this.UserName);
    }
}

Expanding upon TypeScript by inheriting interfaces

Answer №1

Answer №2

Similar questions

Using Typescript to Define Mongoose Schemas

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

Obtain a string of characters from different words

Utilizing Union type and static declarations instead of String Enum

Obtaining the value of an ion-toggle in Ionic2 using the ionChange

Troubleshooting in Visual Studio Code using an npm script

Steering clear of Unfulfilled Promises in TypeScript. The Discrepancy between Void and .catch:

Exploring the Benefits of Utilizing the tslint.json Configuration File in an Angular 6 Project

Tips for utilizing generated *.d.ts files

DotLottie file loading issues

The program encountered an error with code TS2339, indicating that the property "name" cannot be found on the type "never"

Determine the difference between dates using Angular 2's array filtering function

Is there a way to programmatically add a timestamp to a form in Angular6?

What is the process for inheriting in JavaScript while also defining new prototype members as a singular object?

Creating a custom type declaration for .lottie files in Next.js

Having difficulties generating ngc and tsc AOT ES5 compatible code

Set up a SQS queue to receive notifications from an SNS topic located in another AWS account by using AWS CDK in TypeScript

Error: Module '...' or its type declarations could not be located

Is it possible for prettier to substitute var with let?

Serialization of AspNetCore EntityModel to Json is not possible