Is it possible to access the attributes of an interface in TypeScript without relying on external libraries?

Question

Is it possible to access the attributes of an interface in TypeScript without relying on external libraries?

Ensuring the properties of an interface align with an object that implements it is crucial for successful unit testing.

If modifications are made to the interface, the unit test should fail if it is not updated with the new members.

Although I attempted to utilize the ts-transformer-keys package for this purpose, it returned an error indicating it is not a function.

   interface Test {
      mem1: boolean,
      mem2: string
   }

My ideal scenario would involve executing:

   console.log(Object.keys(Test))

and receiving:

   ['mem1', 'mem2'];

angular typescript

Answer 1

Answer №1

During runtime, interfaces do not exist, making it impossible to extract any information from an interface at that time. To work around this limitation, you can create an object that mirrors all the keys of the interface. By specifying all keys, the compiler ensures that no extra keys are present, keeping the duplication in sync with the interface:

interface Test {
    mem1: boolean,
    mem2?: string
}


function interfaceKeys<T>(keys: Record<keyof T, 1>) {
    return Object.keys(keys) as Array<keyof T>
}

console.log(interfaceKeys<Test>({
    mem1: 1,
    mem2: 1
}))

console.log(interfaceKeys<Test>({ // error
    mem1: 1,
}))

console.log(interfaceKeys<Test>{
    mem1: 1,
    mem2: 1,
    mem3: 1,     // error 
}))

play

Answer 2

During runtime, interfaces do not exist, making it impossible to extract any information from an interface at that time. To work around this limitation, you can create an object that mirrors all the keys of the interface. By specifying all keys, the compiler ensures that no extra keys are present, keeping the duplication in sync with the interface:

interface Test {
    mem1: boolean,
    mem2?: string
}


function interfaceKeys<T>(keys: Record<keyof T, 1>) {
    return Object.keys(keys) as Array<keyof T>
}

console.log(interfaceKeys<Test>({
    mem1: 1,
    mem2: 1
}))

console.log(interfaceKeys<Test>({ // error
    mem1: 1,
}))

console.log(interfaceKeys<Test>{
    mem1: 1,
    mem2: 1,
    mem3: 1,     // error 
}))

play

Answer 3

Answer №2

For those comfortable with incorporating it at compile time and are utilizing TypeScript >= 2.4.1, a solution is presented here.

To achieve this, one must include the ts-transformer-keys library, along with a custom transformer. With these in place, it becomes possible to generate a list of properties in the following manner:

import { keys } from 'ts-transformer-keys';

interface Props {
    id: string;
    name: string;
    age: number;
}

const propsKeys = keys<Props>();

console.log(propsKeys); // ['id', 'name', 'age']

Answer 4

For those comfortable with incorporating it at compile time and are utilizing TypeScript >= 2.4.1, a solution is presented here.

To achieve this, one must include the ts-transformer-keys library, along with a custom transformer. With these in place, it becomes possible to generate a list of properties in the following manner:

import { keys } from 'ts-transformer-keys';

interface Props {
    id: string;
    name: string;
    age: number;
}

const propsKeys = keys<Props>();

console.log(propsKeys); // ['id', 'name', 'age']

Answer 5

Answer №3

To obtain the data, simply utilize the following code:

type SomeType = ClientType['birthdate']

Answer 6

To obtain the data, simply utilize the following code:

type SomeType = ClientType['birthdate']

Is it possible to access the attributes of an interface in TypeScript without relying on external libraries?

Answer №1

Answer №2

Answer №3

Similar questions

Encountering issues with data binding functionality within the stepper component

How can I utilize Angular services to transfer a count value to the Component?

Angular allows for the creation of a unique webpage layout featuring 6 divs

What steps can I take to prevent receiving the error message "Certain components in XXX are not associated with the entity" in Strapi?

Issue with Material UI DateTimePicker not submitting default form value

How come the CSS for my angular ngx-mat-datetime-picker and mat-datepicker collide when they are both present on the same page?

Forcing a property binding update in Angular 2

Using MobX to alter observed observable values outside of actions is not permitted in combination with Ant Design components

Parsing difficulties encountered: the element 'ion-col' is unrecognized

Comparing JSON objects with JavaScript models: A guide

Tips for creating a page component in Next.js using props?

In my Angular application, the Authentication JWT is securely stored by Firebase within the Session Storage. Does this implementation pose any security risks

Changing the second instance of a specific text in Angular

What is the best way to interpret the data from forkjoin map?

I'm sorry, we couldn't locate the module: Unable to find the path '../types/index'

Utilize Angular 9 to fetch data from an API using the Get method, map them to a class, and

Issue with string interpolation failing to correctly reflect the updated value from the service provider

Using Angular: Binding Angular variables to HTML for display

Is it possible to utilize an array of numbers as a data source in ng2-smart table?

Error encountered in Next.js: The function 'useLayoutEffect' was not successfully imported from 'react' (imported as 'React')