Typescript hack: Transforming read-only arrays into tuple types with string literals

My configuration object looks like this:

const config = { envs: ['dev', 'test', 'prod'], targets: ['> 2%'] };

Currently, the TypeScript compiler interprets the type of this object as:

type IConfig = { envs: string[], targets: string[] };

This makes sense because I might modify these arrays after declaration.

However, I don't plan on changing them, so I want the type to be:

type IConfig = { envs: ['dev', 'test', 'prod'], targets: ['> 2%'] };

Is there a way to instruct the compiler to infer the type of config.envs as a tuple type with string literals without explicitly typing it out?

Edit: The top answer is almost there, but I'm looking for a solution that can be applied to the entire object rather than each individual property. To clarify, I have added another property to the examples.

typescript

Answer №1

By combining the traditional method for inferring literal types with a recent discovery on inferring tuple types instead of array types, we can achieve the following:

function asTupleOfLiterals<T extends string, U extends [T, ...T[]]>(tuple: U): U {
    return tuple;
}
const config = { envs: asTupleOfLiterals(['dev', 'test', 'prod']) };

Round 2: utilizing it on an object with multiple properties containing tuples

Interestingly, if we enclose [T, ...T[]] within an object featuring an index signature, the contextual typing appears to function successfully:

function asObjectOfTuplesOfLiterals<T extends string,
    U extends {[n: string]: [T, ...T[]]}>(obj: U): U { return obj; }

const config = asObjectOfTuplesOfLiterals(
    { envs: ['dev', 'test', 'prod'], targets: ['> 2%'] });

For the record, there is an ongoing proposal to facilitate the inference of literal types and another one to simplify the process of inferring tuple types.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Stop Browser Tooltip from Displaying HTML Tags within "innerHtml" in Angular 6

In my Angular application, a template is using the following code snippet: ... <span [innerHtml]="textVar"></span> ... The textVar variable is created to allow for special styling on certain characters or strings. It's formatted using th ...

javascripthtmlangulartypescript

Incorporating a new function into a TypeScript (JavaScript) class method

Is it possible to add a method to a method within a class? class MyClass { public foo(text: string): string { return text + ' FOO!' } // Looking for a way to dynamically add the method `bar` to `foo`. } const obj = new MyCl ...

javascripttypescriptmethods

Combining Objects within an Array in JavaScript When Certain Conditions Are Satisfied

In my scenario, I am seeking assistance with merging the values of objects in an array if the id matches the warehouse_item_id. Specifically, there are two objects that need to be merged: id 191 and id 52 because id 52 has a warehouse_item_id of 191. Ple ...

javascriptarraystypescriptarray-filter

Verify whether the object is properly implementing the interface

Design: export interface Person { id: number; firstName: string; lastName: string; age: number; } Is there a way to verify that an object returned from the backend aligns with the structure defined in the Person interface? ...

typescript

Stop repeated form submissions in Angular using exhaust map

How can we best utilize exhaust Matp to prevent multiple submissions, particularly when a user is spamming the SAVE button? In the example provided in the code snippet below, how do we ensure that only one submission occurs at a time even if the user click ...

angulartypescript

Oops! The react-social-media-embed encountered a TypeError because it tried to extend a value that is either undefined, not a

I recently attempted to incorporate the "react-social-media-embed" package into my Next.js project using TypeScript. Here's what I did: npm i react-social-media-embed Here is a snippet from my page.tsx: import { InstagramEmbed } from 'react-soc ...

javascriptreactjstypescriptnext.js

Error encountered: React Typescript does not support the "any" type in a template literal expression

I have been encountering an issue with my slider component in React Typescript. The error message I keep getting is related to the "Invalid type 'any' of template literal expression" specifically at the const fillWidth variable. I am struggling t ...

reactjstypescript

Using Angular Ionic for a click event that is triggered by a specific class

I am utilizing Highcharts and would like to click on the legend upon loading. With the use of Angular Ionic, how can I trigger a click on the .highcharts-legend-item class within the ngOnInit() {} method? I am aiming to click on this class as soon as the ...

javascriptangulartypescriptionic-framework

Configuring environment variables during Jest execution

A variable is defined in my `main.ts` file like this: const mockMode = process.env.MOCK_MODE; When I create a test and set the variable to true, it doesn't reflect as `'true'` in the main file, but as `'false'` instead. describe ...

javascriptnode.jstypescriptunit-testingjestjs

Printing using *ngFor will display items in an ascending order

When attempting to display an object in markup, I am running into the issue of *ng printing it in ascending order instead of maintaining the original order. Ideally, I would like the elements to be printed as they are. You can view my code on StackBlitz ...

javascripthtmlangulartypescript

Tips for dynamically expanding the interface or type of an object in TypeScript

Currently, I am exploring the integration of PayPal's Glamorous CSS-in-JS library into a boilerplate project that also utilizes TypeScript. Glamorous provides a way to incorporate props into an element as shown below: const Section = glamorous.secti ...

javascriptreactjstypescriptjsxglamorous

Retrieve a specific subdirectory from the bundle

I've developed a Typescript package with the following file structure: package.json src/ index.ts common/ index.ts sub/ index.ts My goal is to import certain modules from the package like this: import {...} from '<package>&ap ...

typescriptnpm

Enhance your coding experience with Angular Apollo Codegen providing intelligent suggestions for anonymous objects

Currently, I am exploring the integration of GraphQL with Angular. So far, I have been able to scaffold the schema successfully using the @graphql-codegen package. The services generated are functional in querying the database. However, I've noticed ...

angulartypescriptgraphqlapollo-client

In <R>, what does R represent when it is wrapped around an observer of type Observer<R>? Would it result in a Subscription, Function, or void?

The Angularfire2 project is in the process of adding a storage feature through a work-in-progress branch. This implementation includes two new files - an Observable class and a Factory function. Observable class export class FirebaseUploadTaskObservable& ...

typescriptobserverstypescript-generics

What kind of Typescript type should be assigned to setState when passed to the component?

In my setup, I have a variety of Parent components: const ParentOne = () => { const [error, setError] = useState<{ one: boolean }>({ one: false }); ...omit return ( <> <Child setErr={setError} name={"one"} /> </> ...

reactjstypescript

Files are nowhere to be found when setting up an angular project

After creating an Angular project, I noticed that some key files were missing in the initial setup, such as app.modules.ts and app-routing.modules.ts The project was generated using the command ng new name Here is a screenshot displaying all the files th ...

htmlcssangulartypescript

Dynamically loading external JavaScript for an Angular component and triggering the window load event

I am currently dealing with an external javascript file that I only want to be included on a specific component, so the approach I'm taking involves dynamically loading it. I came across this answer that explains exactly how to achieve this. The prob ...

angulartypescript

Encountering a TypeScript error when using Redux dispatch action, specifically stating `Property does not exist on type`

In my code, there is a redux-thunk action implemented as follows: import { Action } from "redux"; import { ThunkAction as ReduxThunkAction } from "redux-thunk"; import { IState } from "./store"; type TThunkAction = ReduxThunk ...

javascriptreactjstypescript

The devastation caused by typing errors in TypeScript

I have a preference: const settings = { theme: "light", }; and feature: const Feature = ({ setting }: Props) => ( <FeatureBlock> <FeatureValue scale="large" size={20}> {setting.theme} </Styled.FeatureValue> ...

typescript

Access specific files within a workspace in VS Code with read-only permissions

Currently, I am engaged in a typescript project within Visual Studio Code. In my workflow, a gulp task is responsible for transferring code to a designated folder. The files copied will be utilized by corresponding files located in the destination folder t ...

node.jstypescriptvisual-studio-code