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

How can one effectively import and save data from a CSV file into an array comprised of objects?

Using TypeScript with React Redux, encountering issue of property not being available in the Reducer from the ActionType

What could be the reason for TypeScript being unable to recognize my function?

Utilizing Typescript and sinon to mock the functionalities of jsonwebtoken

Mastering Typescript lookup types - effectively limit the properties included in a merge operation with the Partial type

Converting text data into JSON format using JavaScript

Error encountered during conversion from JavaScript to TypeScript

Additional optional class name within a TypeScript component

Consolidating Angular 4 Observable HTTP requests into a single Observable to optimize caching

Step-by-step guide on utilizing the vendor.ts file available at https://angular.io/docs/ts/latest/guide/webpack.html

What is a superior option to converting to a promise?

Unable to run `create-react-app` with the `--template typescript` option

Retrieve the variable only once a response has been received from the POST request

Locate a class using an interface

Using ngModel instead of value to bind a custom Angular directive for currency input

Unlocking the Power of Dependent Types in TypeScript: Unveiling Type by Property Name Declaration

Error in Ionic2 TypeScript: 'google' and '$' names not found, despite Google Maps and jQuery functioning correctly

Experiencing a problem with updating records in angular?

Tips for getting Nativescript listview to function properly

The React hook useState is struggling to accurately map array objects