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

Tips for implementing Material-UI components in a .ts file

Dealing with implicit `any` when looping through keys of nested objects

component is receiving an incompatible argument in its props

Tips for determining the overall percentage breakdown of 100% based on the individual denominator for every column within angular 8

Assistance for Angular 2 Style Guide within Atom: Feature Needed!

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

How do I add a new item to an object using Ionic 2?

The 'connectedCallback' property is not found in the 'HTMLElement' type

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

Typescript is throwing a fit because it doesn't like the type being used

Error: Unable to access the 'filter' property as it is undefined. TypeError occurred

Plugin for managing network connectivity in Ionic framework

Extracting and retrieving the value from the paramMap in Angular/JavaScript

The MUI datagrid fails to display any rows even though there are clearly rows present

Utilizing the useRef hook in React to retrieve elements for seamless page transitions with react-scroll

"What is the best way to access and extract data from a nested json file on an

Guide on importing absolute paths in a @nrwl/nx monorepo

Include additional information beyond just the user's name, profile picture, and identification number in the NextAuth session

Having trouble sending a JSON object from Typescript to a Web API endpoint via POST request

Building a resolver to modify a DynamoDB item via AppSync using the AWS Cloud Development Kit (CDK)