TypeScript: The capability to deduce or derive values for a type from a constant object literal that is nested with non-distinct keys

I'm trying to figure out a way to utilize TS/IDE to display specific literal values from a style guide object, instead of just the inferred type. Here's an example:

const guide = {
  colors: {
    black: {
      medium: "#000000",
    },
    blue: {
      medium: "#3884F7",
      dark: "#053986",
    }
...
  },
  typography: {
    font: {
      family: "Commissioner",
      size: {
        xxs: "11px",
        xs: "12px",
        s: "14px"
...
    },
  },
};

Is there a way to specifically define guide.colors.blue.dark as "#053986" rather than just a generic string, without manually creating a new type object for the entire structure?

typescript

Answer №1

If you want the compiler to determine the most specific type from an object initializer, including the literal types of its property values, you can utilize a const assertion:

const guide = {
  colors: {
    black: {
      medium: "#000000",
    },
    blue: {
      medium: "#3884F7",
      dark: "#053986",
    }

  },
  typography: {
    font: {
      family: "Commissioner",
      size: {
        xxs: "11px",
        xs: "12px",
        s: "14px"

      },
    },
  }
} as const; // <-- const assertion

This will result in:

/* const guide: {
    readonly colors: {
        readonly black: {
            readonly medium: "#000000";
        };
        readonly blue: {
            readonly medium: "#3884F7";
            readonly dark: "#053986";
        };
    };
    readonly typography: {
        readonly font: {
            readonly family: "Commissioner";
            readonly size: {
                readonly xxs: "11px";
                readonly xs: "12px";
                readonly s: "14px";
            };
        };
    };
} */

Check out this Playground link with this code

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

What is the best way to repurpose a variable in Angular's TypeScript?

I'm currently working on an application that utilizes the following technologies. In my Typescript file named "test.page.ts", there is a variable called "response: any" that I need to reuse in another Typescript file named "test2.page.html" by calling ...

angulartypescript

Tips for defining a function across a Angular project

I have the following configuration set up in an Angular5 project using Angular-cli 1.5 within typings.d.ts declare interface String { toSentenceCase(): string; } declare function _debug(o, message?, type?): void; inside app/core/common.ts String.pro ...

angulartypescriptangular-cli

Encountering "No overload matches this call" error in Typescript while working with fetched data and material-ui

Before attempting to create a dropdown menu with an array retrieved using useSWR, I first practiced creating one with a hardcoded array. I used this for the initial practice: https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045 Instead of using a hard ...

reactjstypescriptdommaterial-uiobject-literal

Having trouble implementing the latest Angular Library release

Just starting out with publishing Angular libraries, I've made my first attempt to publish a lib on NPM called wps-ng https://www.npmjs.com/package/wps-ng. You can check out my Public API file here https://github.com/singkara/wps-js-ng/blob/library_t ...

angulartypescriptangular-cliangular-library

Ways to allocate a random color within an array?

Hi there, I'm trying to create chips with random colors from an array in my code. I attempted to use a color string array and assign them to the chips one after the other, but it didn't work as expected. Any suggestions on how I can achieve this? ...

angulartypescriptionic-frameworkionic2

Protractor typescript guide: Clicking an element with _ngcontent and a span containing buttontext

I'm struggling with creating a protractor TypeScript code to click a button with _ngcontent and span buttontext. Does anyone have any ideas on how to achieve this? The code snippet on the site is: <span _ngcontent-c6 class="braeting net-subheadi ...

angulartypescriptjasmineprotractor

Exploring i18nNext integration with antd table in React

Presently, this is the UI https://i.stack.imgur.com/CMvle.png App.tsx import "./styles.css"; import MyTable from "./MyTable"; export default function App() { const data = [ { key: "1", date: "2022-01- ...

javascriptreactjstypescriptantdi18next

Having trouble retrieving the value of an HTML input field using form.value in Angular 5?

I am currently working with Angular 5 Within my HTML, I am dynamically populating the value of an input field using: <input type="number" class="form-control" id="unitCost" name="unitCost" [(ngModel)]="unitCost" placeholder="Average Unit Price"> ...

htmlangulartypescriptangular5

Unable to bring in a personalized npm package using its package title

Currently, I am loosely following a tutorial on creating an angular npm package named customlib. This package is intended for managing dependencies across my projects without the need to make them public on npm. The tutorial can be found here. However, I ...

angulartypescriptnpm

Adding pixels to the top position with jQuery in Angular 2

I am trying to adjust the position of my markers when the zoom level is at 18 or higher by adding 10px upwards. However, my current approach doesn't seem to be working as expected. Can someone please assist me with this issue? You can view the code sn ...

javascriptjquerytypescriptangular

Error encountered while installing node modules within an angular workspace

Currently, I am facing an issue with my workspace where the command npm install is giving me a series of errors that I cannot seem to resolve. I have tried running it as an admin, manually deleting the node_modules folder, asking for help from a senior col ...

angulartypescriptnpmangular-cli

Filter that caters to specific number of properties of X

Looking to create a versatile filter function that can handle multiple criteria? Here's a snippet of the current filtering function: const filterRows = () => { items.filter((item) => { if(selectedDrinks.length > 0 && select ...

reactjstypescriptgenericsfilter

Is it possible to alter the background color once the content of an input field has been modified?

I am working with an angular reactive form and I want to dynamically change the background color of all input fields when their value is changed. Some of these input fields are pre-populated and not required. I came across a potential solution on Stack Ove ...

javascripthtmlcsstypescript

Restrict the frequency of requests per minute using Supertest

We are utilizing supertest with Typescript to conduct API testing. For certain endpoints such as user registration and password modification, an email address is required for confirmation (containing user confirm token or reset password token). To facilit ...

javascripttypescriptsupertestweb-api-testing

What is the proper way to specify the type for the `clean-element` higher-order-component in React?

Error message: 'typeof TextareaAutosize' argument cannot be assigned to a type 'Component<{}, {}, any>'. Error: Property 'setState' is not found in 'typeof TextareaAutosize'. Here is the code snippet causin ...

reactjstypescript

The enigmatic occurrence of TypeScript decorators: when a decorator parameter mysteriously transforms into undefined in a particular scenario

I have been working on developing my own Object-Relational Mapping (ORM) system and I encountered an interesting issue in TypeScript that I am trying to understand. If anyone can provide some insight or clarification on this matter, it would be greatly app ...

typescriptdecorator

The validation through class-validator or class-transformer fails to function properly when applying multiple Types to the @Query decorator

Is there a way to combine multiple types with the @Query() decorator in my controller, such as ParamsWithRegex and PaginationParams? I'm facing an issue where no validation is being applied when I do that. How can I resolve this problem? **// MY CON ...

node.jstypescriptnestjs

Divide a given number of elements within an array of arrays

Presented below is an array: [ { "id": "34285952", "labs": [ { "id": "13399-17", "location": "Gambia", "edge": ["5062-4058-8562-294 ...

javascriptarraystypescript

Refreshing HTTP request in Angular

I am currently working with Angular 5 and have encountered the following issue: Within my route, I have a parameter called year. The component related to this route is supposed to display data based on the year parameter, which is fetched from a service. ...

angulartypescripthttpobservable

Creating mock objects with Jest

I am currently delving into the world of jest testing. Here is a snippet from an implementation class I'm working with: import { ExternalObject } from 'external-library'; export class MyClass { public createInstance(settings : ISettings) ...

typescriptunit-testingjestjsts-jest