An error is thrown when attempting to access a generic type 'T' within an array

Question

An error is thrown when attempting to access a generic type 'T' within an array

I'm working with the following code:

interface Process<T> {
  first: () => T[];
  second: (d: T) => void;

}

const PROCESSES: Process<T>[] = [
  {
    first: () => [{car: "car1"}],
    second: (car: {car: string}) => {},

  },
  {
    first: () => [{person: "person1"}],
    second: (person: {car: string}) => {}, // => How can I make TypeScript identify this as an error because it's not a persona type?
  },
];

TS Playground

I'm facing an issue where TypeScript is throwing the error: Cannot find name 'T'.

javascript typescript

Answer 1

Answer №1

To avoid the manual specification of all element types in the processes array, you can utilize a factory function like the following:

function createProcesses<
  T extends any[] | [any]
  >(process: { [I in keyof T]: { first: () => T[I][], second: (d: T[I]) => void } }){
  return process
}

Playground

const processes = createProcesses([
  {
    first: () => [{ car: 'car1' }],
    second: (car) => {}, // => works, car inferred as Car
  },
  {
    first: () => [{ person: 'person1' }],
    second: (person) => {}, // => works, person inferred as Person
  },
  {
    first: () => [{ person: 'person1' }],
    second: (person: Car) => {}, // => Error!
  }
])

Answer 2

To avoid the manual specification of all element types in the processes array, you can utilize a factory function like the following:

function createProcesses<
  T extends any[] | [any]
  >(process: { [I in keyof T]: { first: () => T[I][], second: (d: T[I]) => void } }){
  return process
}

Playground

const processes = createProcesses([
  {
    first: () => [{ car: 'car1' }],
    second: (car) => {}, // => works, car inferred as Car
  },
  {
    first: () => [{ person: 'person1' }],
    second: (person) => {}, // => works, person inferred as Person
  },
  {
    first: () => [{ person: 'person1' }],
    second: (person: Car) => {}, // => Error!
  }
])

Answer 3

Answer №2

When defining interfaces or types, it is important to use unique names like T. Avoid using generic names like T for variable declarations. Instead, create specific type/interface declarations for entities such as Car and Person, and utilize them in the declaration of PROCESSES instead of T.

interface Process<T> {
  start: () => T[];
  end: (item: T) => void;
}

type Car = { model: string };
type Person = { name: string };

const PROCESSES: (Process<Car> | Process<Person>)[] = [
  {
    start: () => [{ model: 'car1' }],
    end: (car: Car) => {}, // => works fine
  },
  {
    start: () => [{ name: 'person1' }],
    end: (person: Person) => {}, // => also good
  },
  {
    start: () => [{ name: 'person1' }],
    end: (person: Car) => {}, // => Error!
];

Answer 4

When defining interfaces or types, it is important to use unique names like T. Avoid using generic names like T for variable declarations. Instead, create specific type/interface declarations for entities such as Car and Person, and utilize them in the declaration of PROCESSES instead of T.

interface Process<T> {
  start: () => T[];
  end: (item: T) => void;
}

type Car = { model: string };
type Person = { name: string };

const PROCESSES: (Process<Car> | Process<Person>)[] = [
  {
    start: () => [{ model: 'car1' }],
    end: (car: Car) => {}, // => works fine
  },
  {
    start: () => [{ name: 'person1' }],
    end: (person: Person) => {}, // => also good
  },
  {
    start: () => [{ name: 'person1' }],
    end: (person: Car) => {}, // => Error!
];

An error is thrown when attempting to access a generic type 'T' within an array

Answer №1

Answer №2

Similar questions

Utilizing cloud functions to distort an inappropriate image

Ensure that the loader remains visible until all data has been successfully retrieved from the AngularJS service

The ChartistJs is unable to find the property '_index' of an undefined value, either being 0 or null

Referencing other styled-components in Typescript and React code bases

Verification prompt box when delete button is pressed

Creating a custom loading spinner using HTML and CSS

What is the method for handling JSON data in Node.JS?

Constructing a form by employing the directive approach to incorporate various input fields

There seems to be a bug in the reducer within the store (using react, redux toolkit, and TypeScript)

Discovering DOM elements positioned between two other well-established DOM elements can be achieved by utilizing a variety of methods

Adding elements to a grid in Angular.js from a JSON array: A step-by-step guide

Utilizing backbone-forms in Typescript: A beginner's guide

Attempting to create a dynamic effect with a div element, where a randomly generated string shifts to the left and new characters are continuously added at the end, resembling a scrolling motion

I am looking to adjust/modulate my x-axis labels in c3 js

What is the new Bootstrap equivalent for btn-group-justify?

"Utilizing Promises in AngularJS Factories for Synchronous API Calls

Combining two objects in AngularJS to create a new merged object

Is it possible to create a dynamic input form that appears within a textarea using jquery?

Remove Image Upload feature in antDesign and remove item from interface

What could be the reason why the getParentWhileKind method in ts-morph is not returning the anticipated parent of the