Tips for adding an extensive collection of fixed attributes to a function using Typescript

Question

Tips for adding an extensive collection of fixed attributes to a function using Typescript

I am attempting to write a function that includes a lengthy list of static strings attached as properties, all returning the property as a string value:

const arr = ["a", "b", "c"]; // there are around 140 items in the actual list

const f = (tag: string | undefined) => tag;

arr.forEach(key=> {
  f[key] = f(key)
})

console.log(f.a) // "a"
console.log(f.b) // "b"
console.log(f.c) // "c"
console.log(f.d) // undefined

Issues:

Element is implicitly an 'any' type because expression of type 'string' cannot be used to index type '(tag: string) => string'. No index signature with a parameter of type 'string' was found on type '(tag: string) => string'.
Property 'a' does not exist on type '(tag: string) => string'.
Property 'b' does not exist on type '(tag: string) => string'.
Property 'c' does not exist on type '(tag: string) => string'.
Property 'd' does not exist on type '(tag: string) => string'.

Typescript Playgound

typescript

Answer 1

Answer №1

To start, define the array of constant properties using as const to ensure the type is ['x', 'y', 'z'] instead of just string[].

const properties = ['x', 'y', 'z'] as const;

Next, extract these string constants as a union of string literals by accessing the type of the array and indexing it by number.

type Values = (typeof properties)[number] // 'x' | 'y' | 'z'

Now, declare the function type and the constant properties separately.

type FunctionType = (value: string | undefined) => string | undefined
type StaticProperties = { [item in Values]: string }

Combine these types by intersecting them to include the static properties in the function type.

type FunctionWithStatic = FunctionType & StaticProperties

If you try to create a function labeled as FunctionWithStatic without defining the static properties, Typescript will throw an error as those properties need to be specified to meet the type requirements. To resolve this, generate the static properties as a separate object.

const staticProps = properties.reduce((result, prop) => {
  result[prop] = prop;
  return result
}, {} as StaticProperties)

Subsequently, merge these generated static properties with the function using Object.assign().

const f: FunctionWithStatic = Object.assign(
  (val: string | undefined) => val,
  staticProps
)

Now, when utilizing the function, you should see the expected behavior:

f.x // returns: string
f.y // returns: string
f.z // returns: string

f.w // type error, as the static property is not part of the original `properties` array

Playground

Answer 2

To start, define the array of constant properties using as const to ensure the type is ['x', 'y', 'z'] instead of just string[].

const properties = ['x', 'y', 'z'] as const;

Next, extract these string constants as a union of string literals by accessing the type of the array and indexing it by number.

type Values = (typeof properties)[number] // 'x' | 'y' | 'z'

Now, declare the function type and the constant properties separately.

type FunctionType = (value: string | undefined) => string | undefined
type StaticProperties = { [item in Values]: string }

Combine these types by intersecting them to include the static properties in the function type.

type FunctionWithStatic = FunctionType & StaticProperties

If you try to create a function labeled as FunctionWithStatic without defining the static properties, Typescript will throw an error as those properties need to be specified to meet the type requirements. To resolve this, generate the static properties as a separate object.

const staticProps = properties.reduce((result, prop) => {
  result[prop] = prop;
  return result
}, {} as StaticProperties)

Subsequently, merge these generated static properties with the function using Object.assign().

const f: FunctionWithStatic = Object.assign(
  (val: string | undefined) => val,
  staticProps
)

Now, when utilizing the function, you should see the expected behavior:

f.x // returns: string
f.y // returns: string
f.z // returns: string

f.w // type error, as the static property is not part of the original `properties` array

Playground

Tips for adding an extensive collection of fixed attributes to a function using Typescript

Answer №1

Similar questions

TypeScript does not verify keys within array objects

What is the significance of `new?()` in TypeScript?

Angular: Exploring the most effective strategies for optimizing code within the ".subscribe()" method

Encountering an error "Property is used before its initialization" in Angular 10 when attempting to input an object into a template

Adjust the size of a map on an HTML page after it has

Changing the button class during an event in Angular 4

Tips for integrating the react-financial-charts library into your React and JavaScript project

Creating a React Native project without the use of TypeScript

What is the best way to make the first option blank?

Tabulate the number of items in an array based on the month and

Find out if a dynamically imported component has finished loading in Nextjs

Unable to link to 'amount' because it is not a recognized attribute of 'ng-wrapper'

When using the e.target.getAttribute() method in React, custom attributes may not be successfully retrieved

When attempting to import the image path from a JSON file, a ReferenceError occurs stating that the data variable is not

Typedoc: only export contents from a particular file are documented

Node.js is known for automatically adding double quotes to strings. However, is there a way to eliminate them?

Using React and TypeScript to pass member variables

Error in Mocha test: Import statement can only be used inside a module

Is it possible to apply filters to individual columns in a dynamic mat table using Angular?

Navigating Through Angular Components