Replace interface with a string

Question

Replace interface with a string

Is it possible to override an interface with a string in TypeScript?

Consider this example:

type RankList = "Manager" | "Staff"

interface EmployeeList {
    id: string,
    name: string,
    department: string,
    rank: "Staff",
    manager: string
}

interface EmployeeList {
    id: string,
    name: string,
    department: string,
    rank: "Manager"
}

In this scenario, if the employee is listed as a "Manager," they do not have a "manager" field. However, if their rank is "Staff," then the field will have a mandatory "manager" field indicating who their manager is.

So far, I have used an optional field like this:

interface EmployeeList {
    id: string,
    name: string,
    department: string,
    rank: RankList,
    manager?: string
}

But I would like to make it more stringent. Is there a way to achieve this?

typescript

Answer 1

Answer №1

If you're seeking a solution, consider using a discriminated union type. This involves creating a type or interface that contains common fields such as id, name, and department, along with separate interfaces for both Manager and Staff. By defining an employee type that serves as a union of both staff and manager types:

type PositionList = 'Manager' | 'Staff';

interface EmployeeInfoCommon {
  id: string;
  name: string;
  department: string;
}

interface ManagerInfo extends EmployeeInfoCommon {
  position: 'Manager';
}

interface StaffInfo extends EmployeeInfoCommon {
  position: 'Staff';
  supervisor: string;
}

type EmployeeInfo = StaffInfo | ManagerInfo;

Check out this playground link for more information.

Answer 2

If you're seeking a solution, consider using a discriminated union type. This involves creating a type or interface that contains common fields such as id, name, and department, along with separate interfaces for both Manager and Staff. By defining an employee type that serves as a union of both staff and manager types:

type PositionList = 'Manager' | 'Staff';

interface EmployeeInfoCommon {
  id: string;
  name: string;
  department: string;
}

interface ManagerInfo extends EmployeeInfoCommon {
  position: 'Manager';
}

interface StaffInfo extends EmployeeInfoCommon {
  position: 'Staff';
  supervisor: string;
}

type EmployeeInfo = StaffInfo | ManagerInfo;

Check out this playground link for more information.

Replace interface with a string

Answer №1

Similar questions

Converting a C# Dictionary<string,string> to a TypeScript Map<string,string>

Lazy loading implemented with BootstrapVue's b-nav component

How can parameters be implemented in Angular similar to NodeJs Express style?

Typescript error in React: The element is implicitly of type any because a string expression cannot be used to index type {}

The resurgence of React JS in its role as a powerful tool

React dynamic table

There is an error appearing in my .ts code: [ts] The property 'name' is not found in type 'any[]'

Tips for triggering an error using promise.all in the absence of any returned data?

React Typescript is causing issues with the paths not functioning properly

"Choose one specific type in Typescript, there are no in-b

Using mergeMap in conjunction with retryWhen allows for the resumption of retries from the exact point of failure, without needing

Having trouble importing Sequelize in Angular?

What is the process of overriding a method from an abstract class that employs generics for typing?

Implementing tailwindcss styles in a typescript interface with reactjs

Is it possible to enforce strict typing for a property within an object that is declared as type 'any'?

When upgrading from ng15 to ng16, beware of the error message stating that the type '(event: RouterEvent) => void' cannot be assigned to type '(value: Event_2) => void.'

Is it possible to retrieve a value obtained through Request.Form?

experiencing an excessive amount of re-renders after transferring data to a distinct component

Leveraging cloud functions on Firebase for maximum efficiency

The selected image should change its border color, while clicking on another image within the same div should deselect the previous image