How to effectively categorize a collection of interconnected types in TypeScript

Question

How to effectively categorize a collection of interconnected types in TypeScript

Within my application, there is a grid component that serves multiple purposes and handles different types of data.

Each type of data is fetched from various API endpoints with unique filtering options, all properly defined with appropriate types. Everything functions well when dealt with individually.

Is there a way to categorize all these diverse data types under a common "family" grouping?

I envision defining the structure of a family, specifying its elements (like Filter type, Response type, etc.), and enforcing relationships (e.g., requiring a specific filter type for a certain data type).

I've experimented with interfaces and classes but encountered limitations in specifying types containing special characters like '.' which are reserved for namespaces.

Although promising, namespaces do not allow me to enforce the required structure, preventing me from utilizing a universal "abstract" namespace within my component.

Any suggestions on how I should approach this dilemma?

EDIT: To clarify, here's my objective:

type View<D, F> = {
  // actual types required, not instances
  Data: D;
  Filter: F;
}
type TasksView = View<Task, TaskFilter>;
type ProjectsView = View<Project, ProjectFilter>;

interface GridProps<T extends View> {
  filters: T.Filter;
}
function Grid<T>(props: GridProps<T>) {
  const getData(props.filters): T.Data {
    // fetch data
  }
  return (
    <table>
    </table>
  )
}

function MyTasksGrid = Grid<TasksView>
function MyProjectsGrid = Grid<ProjectsView>

This may not be entirely syntactically accurate, but it demonstrates the idea. Essentially, I aim to establish a connection between the Task and TaskFilter types through a shared structure.

However, the use of T.Data as outlined isn't feasible due to T not being recognized as a namespace (

'T' only refers to a type, but is being used as a namespace here

).

typescript typescript-generics

Answer 1

Answer №1

When faced with the need to create a standardized interface for objects that share some common attributes but also have differences, you can utilize the use of the | notation and define a new type. See the example provided below:

// Example demonstrating similar objects with partially common interfaces
interface Bird {
  name: string
  age: number
  type: 'BIRD'
  // Different properties
  feathers_color: string
  fly: () => void
}

interface Fish {
  name: string
  age: number
  type: 'FISH'
  // Different properties
  fins: number
  swim: () => void
}

type Animal = Fish | Bird;

let my_animal: Animal = {
  name: 'Karl',
  age: 8,
  type: 'FISH' as 'FISH',
  fins: 3,
  swim: () => { console.log("I'm swimming...") }
}

// Accessing shared properties without checking if the animal is a bird or fish
console.log(my_animal.name);
console.log(my_animal.age);
console.log(my_animal.type);

if (my_animal.type === 'FISH') {
  // Properties specific to fish
  console.log(my_animal.fins);
  my_animal.swim(); // TypeScript won't raise an error here
}

Please note that when creating an object, you must manually specify the type parameter.

Additionally, it's important to acknowledge that this approach may not be optimal for scenarios requiring multiple layers of grouping due to potential maintenance challenges.

UPDATE: The implementation based on the outlined method for your request should resemble the following:

interface Task {}
interface TaskFilter {}
interface Project {}
interface ProjectFilter {}

interface TaskView {
  Data: Task
  Filter: TaskFilter
}

interface ProjectView {
  Data: Project
  Filter: ProjectFilter
}

type View = TaskView | ProjectView

interface GridProps<T extends View> {
  filters: T['Filter'];
}

// Alternative 1: Simplifying the definition without the GridProps wrapper
function Grid<T extends View>(props: T) {
  function getData(filter: T['Filter']): T['Data'] {
    return {};
  }

  return (
    <table>
    </table>
  );
}

// Alternative 2: Including a version with Grid Props in case of any missing details
function Grid<T extends View, G extends GridProps<T>>(props: G) {
  function getData(filter: G['filters']): T['Data'] {
    return {};
  }

  return (
    <table>
    </table>
  );
}

Answer 2

When faced with the need to create a standardized interface for objects that share some common attributes but also have differences, you can utilize the use of the | notation and define a new type. See the example provided below:

// Example demonstrating similar objects with partially common interfaces
interface Bird {
  name: string
  age: number
  type: 'BIRD'
  // Different properties
  feathers_color: string
  fly: () => void
}

interface Fish {
  name: string
  age: number
  type: 'FISH'
  // Different properties
  fins: number
  swim: () => void
}

type Animal = Fish | Bird;

let my_animal: Animal = {
  name: 'Karl',
  age: 8,
  type: 'FISH' as 'FISH',
  fins: 3,
  swim: () => { console.log("I'm swimming...") }
}

// Accessing shared properties without checking if the animal is a bird or fish
console.log(my_animal.name);
console.log(my_animal.age);
console.log(my_animal.type);

if (my_animal.type === 'FISH') {
  // Properties specific to fish
  console.log(my_animal.fins);
  my_animal.swim(); // TypeScript won't raise an error here
}

Please note that when creating an object, you must manually specify the type parameter.

Additionally, it's important to acknowledge that this approach may not be optimal for scenarios requiring multiple layers of grouping due to potential maintenance challenges.

UPDATE: The implementation based on the outlined method for your request should resemble the following:

interface Task {}
interface TaskFilter {}
interface Project {}
interface ProjectFilter {}

interface TaskView {
  Data: Task
  Filter: TaskFilter
}

interface ProjectView {
  Data: Project
  Filter: ProjectFilter
}

type View = TaskView | ProjectView

interface GridProps<T extends View> {
  filters: T['Filter'];
}

// Alternative 1: Simplifying the definition without the GridProps wrapper
function Grid<T extends View>(props: T) {
  function getData(filter: T['Filter']): T['Data'] {
    return {};
  }

  return (
    <table>
    </table>
  );
}

// Alternative 2: Including a version with Grid Props in case of any missing details
function Grid<T extends View, G extends GridProps<T>>(props: G) {
  function getData(filter: G['filters']): T['Data'] {
    return {};
  }

  return (
    <table>
    </table>
  );
}

How to effectively categorize a collection of interconnected types in TypeScript

Answer №1

Similar questions

Creating personalized data types in Typescript for interface fields

Extract the value from an array of objects

I am searching for a way to retrieve the event type of a svelte on:input event in TypeScript, but unfortunately, I am unable to locate it

Arrange a JavaScript map based on its values and ensure that a specific field index remains at the top position

Installing Angular CLI

The journey of communication: uncovering the essence of @input between parent and

Reconfigure an ancestral item into a designated key

Issue with Nuxt: Property accessed during rendering without being defined on the instance

Converting multiple tiff image files into a single image in Angular 9: A step-by-step guide

The parameter cannot be assigned the readonly type 'X' in this context

When interacting with a <select> element, the behavior of test script execution varies between Firefox and Chrome

The JSX component cannot be utilized as `ToastContainer`

Using ngFor results in duplicate instances of ng-template

What is the best way to implement Angular translation for multiple values in a typescript file, while also incorporating parameters?

Exploring the concept of kleisli composition in TypeScript by combining Promise monad with functional programming techniques using fp-ts

Understanding how to deduce parameter types in TypeScript

Receiving an Async Thunk result in a Promise

What is the process for retrieving an element from component interaction?

Creating a personalized data filtering system for tables in Angular 6

Issue with updating initial state that is null in Redux Toolkit