How to prevent redundant object declarations when passing parameters in TypeScript?

Question

How to prevent redundant object declarations when passing parameters in TypeScript?

Motivation for Using Object Parameters

One of the motivations behind using objects as function parameters is to allow the caller to clearly define arguments with specified field names, which can make code reviews easier.

Challenge When Using Implements and Extends

However, dealing with object parameters in conjunction with implements and extends can become cumbersome. This is currently a challenge that I am facing in my code implementation.

src/domain/ServiceInterface.ts

export interface ServiceInterface {
  doesThings(args: {
    awesomeFieldName: string;
    isThisAwesomeFieldName?: string;
    ohWaitMoreAwesomeFieldName?: string;
  }): boolean;

src/domain/ComposedServiceInterface.ts

import { ServiceInterface } from "./domain/ServiceInterface";
export type ComposedServiceInterface = ServiceInterface & { hello: () => string };

src/implementations/ComposedServiceImplementation.ts

import { ComposedServiceInterface } from "./domain/ComposedServiceInterface";
export class ComposedServiceImplementation implements ComposedServiceInterface {
  doesThings(args: {
    awesomeFieldName: string;
    isThisAwesomeFieldName?: string;
    ohWaitMoreAwesomeFieldName?: string;
  }): boolean {
    return true;
  }
}

Various Approaches Taken

1. Using `type` / `interface` for Object Parameter

src/domain/ServiceInterface.ts

export type DoesThingsParameter = {
    awesomeFieldName: string;
    isThisAwesomeFieldName?: string;
    ohWaitMoreAwesomeFieldName?: string;
  };
export interface ServiceInterface {
  doesThings(args: DoesThingsParameter): boolean;

src/domain/ComposedServiceInterface.ts

import { ServiceInterface } from "./domain/ServiceInterface";
export type ComposedServiceInterface = ServiceInterface & { hello: () => string };

src/implementations/ComposedServiceImplementation

import { ComposedServiceInterface } from "./domain/ComposedServiceInterface";
import { DoesThingsParameter } from "./domain/ServiceInterface";
export class ComposedServiceImplementation implements ComposedServiceInterface {
  doesThings(args: DoesThingsParameter): boolean {
    return true;
  }
}

Concern: The use of import in

src/implementations/ComposedServiceImplementation

might not be necessary since it only implements ComposedServiceInterface

2. Exploring Utility Types such as `Parameter`

Reference: https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterstype

I have encountered challenges in getting TypeScript to accept a Class method like

Parameter<ComposedServiceInterface.doesThings>

. Any advice or insights on this would be appreciated.

typescript

Answer 1

Answer №1

One effective method for reusing types/interfaces is to separate them into a common file, as demonstrated in Attempt#1. By doing this, you can easily import these definitions wherever needed without cluttering your codebase. If you're concerned about importing from src/domain/ServiceInterface in

src/implementations/ComposedServiceImplementation

, creating a central file for shared types and importing it in both locations is a good practice.

It's worth noting that when you only need type information from src/domain/ServiceInterface, this import will be stripped out during the TypeScript compilation process. To distinguish between importing types versus values, consider using a "type-only" import syntax like:

import type { DoesThingsParameter } from "./domain/ServiceInterface";

This can improve the readability of your code.

Regarding Attempt#2, it's recommended to avoid excessively using complex utility types such as Parameter or ConstructorParameter. These types involve intricate implementations that may burden TypeScript with extra work. Typically, they are utilized to infer types for arguments not directly accessible.

// some-library.ts
export function configure({
 config1 = 'somevalue',
 retries = 1
}) {
  ...code
}

For instance, if you need to utilize a function from a library lacking TypeScript definitions, and you wish to define a configuration object externally:

// helper.ts
import { configure } from 'some-lib';

const configuration = {
 config1: 'overrideValue',
 unknownProperty: 'unknownValue'
}
function helper() {
 const lib = configure(configuration)
...perform tasks here
 }

In this scenario, the configuration object includes all expected properties for the configure function but adds an additional one not present in its arguments. Here, employing ParameterType becomes necessary to acquire the type definition for the configure function's arguments.

Answer 2

One effective method for reusing types/interfaces is to separate them into a common file, as demonstrated in Attempt#1. By doing this, you can easily import these definitions wherever needed without cluttering your codebase. If you're concerned about importing from src/domain/ServiceInterface in

src/implementations/ComposedServiceImplementation

, creating a central file for shared types and importing it in both locations is a good practice.

It's worth noting that when you only need type information from src/domain/ServiceInterface, this import will be stripped out during the TypeScript compilation process. To distinguish between importing types versus values, consider using a "type-only" import syntax like:

import type { DoesThingsParameter } from "./domain/ServiceInterface";

This can improve the readability of your code.

Regarding Attempt#2, it's recommended to avoid excessively using complex utility types such as Parameter or ConstructorParameter. These types involve intricate implementations that may burden TypeScript with extra work. Typically, they are utilized to infer types for arguments not directly accessible.

// some-library.ts
export function configure({
 config1 = 'somevalue',
 retries = 1
}) {
  ...code
}

For instance, if you need to utilize a function from a library lacking TypeScript definitions, and you wish to define a configuration object externally:

// helper.ts
import { configure } from 'some-lib';

const configuration = {
 config1: 'overrideValue',
 unknownProperty: 'unknownValue'
}
function helper() {
 const lib = configure(configuration)
...perform tasks here
 }

In this scenario, the configuration object includes all expected properties for the configure function but adds an additional one not present in its arguments. Here, employing ParameterType becomes necessary to acquire the type definition for the configure function's arguments.

How to prevent redundant object declarations when passing parameters in TypeScript?

Motivation for Using Object Parameters

Challenge When Using Implements and Extends

Various Approaches Taken

1. Using `type` / `interface` for Object Parameter

2. Exploring Utility Types such as `Parameter`

Answer №1

Similar questions

Error: Typescript error at line 18 in app.ts - Cannot locate the 'server' namespace

How to selectively make properties optional in Typescript conditions

Encountering issues with MediaSession.setPositionState() and seekto functionalities not functioning properly

Typescript declaration for a .js file in a diverse project

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

Type returned by a React component

The concept of a singleton design pattern is like a hidden treasure waiting to be

Dynamic rows in an Angular 2 Material data table

Having difficulty resolving sub-modules using webpack

What could be causing the availability of a response in a service, but showing as undefined in the component?

Unit Testing with Angular: Testing the setValueControl function

In an Angular component, attempt to retrieve the data type of a class property

Encountering the "Unrecognized teardown 1" error when subscribing to an Observable in Typescript and Angular2

Certain sections within a Formik form are failing to update as intended

Jest is having trouble locating the module that ends with ".svg?react" when using Vite in combination with React, TypeScript, and Jest

Angular validation with input binding using if statement

What is the process for creating a coverage report for a TypeScript extension in vscode?

Retrieving a data type from the key values of deeply nested objects

The function signature '({ articles }: Props) => JSX.Element' does not match the type 'NextPage<{}, {}>'

retrieve asynchronous data from the server using ngrx

How to prevent redundant object declarations when passing parameters in TypeScript?

Motivation for Using Object Parameters

Challenge When Using Implements and Extends

Various Approaches Taken

1. Using type / interface for Object Parameter

2. Exploring Utility Types such as Parameter

Answer №1

Similar questions

Error: Typescript error at line 18 in app.ts - Cannot locate the 'server' namespace

How to selectively make properties optional in Typescript conditions

Encountering issues with MediaSession.setPositionState() and seekto functionalities not functioning properly

Typescript declaration for a .js file in a diverse project

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

Type returned by a React component

The concept of a singleton design pattern is like a hidden treasure waiting to be

Dynamic rows in an Angular 2 Material data table

Having difficulty resolving sub-modules using webpack

What could be causing the availability of a response in a service, but showing as undefined in the component?

Unit Testing with Angular: Testing the setValueControl function

In an Angular component, attempt to retrieve the data type of a class property

Encountering the "Unrecognized teardown 1" error when subscribing to an Observable in Typescript and Angular2

Certain sections within a Formik form are failing to update as intended

Jest is having trouble locating the module that ends with ".svg?react" when using Vite in combination with React, TypeScript, and Jest

Angular validation with input binding using if statement

What is the process for creating a coverage report for a TypeScript extension in vscode?

Retrieving a data type from the key values of deeply nested objects

The function signature '({ articles }: Props) => JSX.Element' does not match the type 'NextPage<{}, {}>'

retrieve asynchronous data from the server using ngrx

1. Using `type` / `interface` for Object Parameter

2. Exploring Utility Types such as `Parameter`