Describing an Object with some typed properties

Question

Describing an Object with some typed properties

Is there a method to specify only a portion of the object type, while allowing the rest to be of any type? The primary objective is to have support for intelliSense for the specified part, with the added bonus of type-checking support. To demonstrate, let's start by defining a helper type:

type TupleToIntersection<T extends any[]> = {
  [I in keyof T]: (x: T[I]) => void
}[number] extends (x: infer U) => void
  ? U
  : never

This type does what its name suggests. Now, let's address the issue at hand.

type A = {
  A: { name: "Foo" }
}
type B = {
  B: { name: "Bar" }
}
    
type Collection<T extends any[]> = TupleToIntersection<{ [I in keyof T]: T[I] }>

declare const C: Collection<[A, B]>

C.A.name // "Foo" as expected
C.B.name // "Bar" as expected

declare const D: Collection<[A, any]>

D // <=== now of any type since an intersection of any and type A results in any
D.A.name // <=== While technically valid, there is no "intelliSense" support here

Is there a way to accomplish this?

One approach could involve keeping the type as "any" and using a typeguard to coerce it into a known shape where needed in code. This aligns with maintaining "typesafe" code according to TypeScript practices, but it may entail defining unnecessary typeguards and types manually instead of relying on automatic system definitions.

typescript intellisense

Answer 1

Answer №1

The concept of intersection in programming is similar to the mathematical set intersection, where the result of A & B consists of all elements that are common in both sets A and B.

any represents a set containing every possible value, so performing an intersection with any will always yield any as the final result:

// any
type Case1 = number & any;
// any
type Case2 = {a: string} & any;

To improve this situation, you can replace occurrences of any with unknown. Although similar to any, using unknown will prioritize the type from the other set:

// number
type Case1 = number & unknown
// {a: string}
type Case2 = {a: string} & unknown;

Example:

declare const D: Collection<[A, unknown]>;

D; // A
D.A.name // "Foo"

If there's a need to support additional fields being added to a type, it's recommended to use something more specific than any or unknown. For instance, to allow for new fields in an object, one can use Record<string, any>

Example:

declare const D: Collection<[A, Record<string, any>]>;

D; // A & Record<string, any
D.A.name; // "Foo"
D.additional = ''; // no error

Answer 2

The concept of intersection in programming is similar to the mathematical set intersection, where the result of A & B consists of all elements that are common in both sets A and B.

any represents a set containing every possible value, so performing an intersection with any will always yield any as the final result:

// any
type Case1 = number & any;
// any
type Case2 = {a: string} & any;

To improve this situation, you can replace occurrences of any with unknown. Although similar to any, using unknown will prioritize the type from the other set:

// number
type Case1 = number & unknown
// {a: string}
type Case2 = {a: string} & unknown;

Example:

declare const D: Collection<[A, unknown]>;

D; // A
D.A.name // "Foo"

If there's a need to support additional fields being added to a type, it's recommended to use something more specific than any or unknown. For instance, to allow for new fields in an object, one can use Record<string, any>

Example:

declare const D: Collection<[A, Record<string, any>]>;

D; // A & Record<string, any
D.A.name; // "Foo"
D.additional = ''; // no error

Answer 3

Answer №2

Is this method suitable for your needs?

/**
 * TypeScript sometimes doesn't reduce string unions to just `string` when using `(string & {})`. This workaround is a bit unconventional and may be subject to breakage in future TypeScript versions.
 */
type StringWithAutocomplete<U extends string> = U | (string & {});

/**
 * This type defines the intellisense, excluding generic `any` properties
 */
type BaseType = {
  A: number;
  B: string;
  C: boolean;
}

/**
 * For a given key, retrieve its type in `BaseType` or default to `any`
 */
type KeyTypeOrAny<K extends StringWithAutocomplete<keyof BaseType>> =
  K extends keyof BaseType ?
    BaseType[K] :
    any;

/**
 * A mapped type that is effectively an intersection of `BaseType` and
 * `Record<string, any>`, with type-checking on defined types and
 * intellisense.
 */
type AnyWithAutocomplete = {
  [key in StringWithAutocomplete<keyof BaseType>]: KeyTypeOrAny<key>;
};

const foo: AnyWithAutocomplete = {
  A: 3,
  B: 'string',
  C: true,
  D: 'undefined types can be anything'
};

Try it out in TypeScript Playground

As a word of caution, be cautious about allowing any into your codebase. Code involving any essentially bypasses TypeScript's type checking, so it's best avoided whenever feasible.

As mentioned in the code comments, this approach relies on a somewhat unconventional method in TypeScript to permit arbitrary strings while still maintaining autocomplete functionality.

Typically, when you have a union of strings including string, like 'A' | 'B' | string, TypeScript simplifies it to just string. However, by altering the union to 'A' | 'B' | (string & {}), TypeScript retains the individual strings without collapsing the union to just string.

The {} type encompasses everything except for null or

undefined</code. Essentially, it includes all values in JavaScript where properties can be accessed without errors - exceptions being <code>null

and undefined. The built-in utility NonNullable type utilizes an intersection with this {} type, which is why it's often discouraged by linters as it might seem to imply "any object".

To create a type that combines specific properties with an open-ended property, I've taken advantage of this quirk to craft a mapped type. By associating named properties with defined types and defaulting to any for other properties, this results in a type that intersects a well-defined object type with Record<string, any> without reducing the intersection to simply any. This way, you maintain type checks and autocomplete while permitting open-ended types.

Answer 4

Is this method suitable for your needs?

/**
 * TypeScript sometimes doesn't reduce string unions to just `string` when using `(string & {})`. This workaround is a bit unconventional and may be subject to breakage in future TypeScript versions.
 */
type StringWithAutocomplete<U extends string> = U | (string & {});

/**
 * This type defines the intellisense, excluding generic `any` properties
 */
type BaseType = {
  A: number;
  B: string;
  C: boolean;
}

/**
 * For a given key, retrieve its type in `BaseType` or default to `any`
 */
type KeyTypeOrAny<K extends StringWithAutocomplete<keyof BaseType>> =
  K extends keyof BaseType ?
    BaseType[K] :
    any;

/**
 * A mapped type that is effectively an intersection of `BaseType` and
 * `Record<string, any>`, with type-checking on defined types and
 * intellisense.
 */
type AnyWithAutocomplete = {
  [key in StringWithAutocomplete<keyof BaseType>]: KeyTypeOrAny<key>;
};

const foo: AnyWithAutocomplete = {
  A: 3,
  B: 'string',
  C: true,
  D: 'undefined types can be anything'
};

Try it out in TypeScript Playground

As a word of caution, be cautious about allowing any into your codebase. Code involving any essentially bypasses TypeScript's type checking, so it's best avoided whenever feasible.

As mentioned in the code comments, this approach relies on a somewhat unconventional method in TypeScript to permit arbitrary strings while still maintaining autocomplete functionality.

Typically, when you have a union of strings including string, like 'A' | 'B' | string, TypeScript simplifies it to just string. However, by altering the union to 'A' | 'B' | (string & {}), TypeScript retains the individual strings without collapsing the union to just string.

The {} type encompasses everything except for null or

undefined</code. Essentially, it includes all values in JavaScript where properties can be accessed without errors - exceptions being <code>null

and undefined. The built-in utility NonNullable type utilizes an intersection with this {} type, which is why it's often discouraged by linters as it might seem to imply "any object".

To create a type that combines specific properties with an open-ended property, I've taken advantage of this quirk to craft a mapped type. By associating named properties with defined types and defaulting to any for other properties, this results in a type that intersects a well-defined object type with Record<string, any> without reducing the intersection to simply any. This way, you maintain type checks and autocomplete while permitting open-ended types.

Describing an Object with some typed properties

Answer №1

Answer №2

Similar questions

How to utilize TypeScript fetch in a TypeScript project running on node with Hardhat?

Tips for refreshing the service page in Ionic 2

What is the importance of using a server to host an Angular 2 app?

NuxtJS (Vue) loop displaying inaccurate information

Disregard earlier callback outcome if there has been a change in the state since then

Removing a dynamic component in Angular

Integrating d3.js into an Angular 2 project

Enhance TypeScript class declarations with additional properties

Add a class to a button in an Angular btn-group if a specific string is found within an

Removing an object from an array when a certain key value already exists in TypeScript

Tips on overcoming errors while attempting to create a copy of an object using Spread, especially when the object's class contains abstract methods

What is the best way to set up my page to detect the "enter" key input when the form is not created with the <form> tag?

Failed to hit breakpoint in TypeScript file while working with Visual Studio 2019 and Webpack

Converting SASS in real-time using SystemJS

An issue arises when trying to group and sum an array of objects due to difficulty converting strings to arrays in TypeScript

The function did not return a Promise or value as expected when using async and await

Trying out Angular2 service using a fabricated backend

In the process of developing a custom Vue component library with the help of Rollup and VueJS 3

Tips for creating a redirect to a specific page after clicking a link in an email using Angular

Inserting a pause between a trio of separate phrases