Tips for typing a JavaScript object in one line in TypeScript, with a variable name for the root property

I have this Javascript object:

var termsAndConditions = {
    pt: ["url1", "url2"],
    en: ["url3", "url4"]
}

I am looking to elegantly convert it into Typescript in just one line. Here is what I came up with:

const termsAndConditions: {[countryKey: Array<string>]} = {
    pt: ["url1", "url2"],
    en: ["url3", "url4"]
}

After that, I would like to access the URLs for different languages like so:

const ptUrls: Array<string> = termsAndConditions.pt;
const enUrls: Array<string> = termsAndConditions.en;

Is there a better way to achieve this?

javascripttypescripttypescript-typingsdynamic-typing

Answer №1

If you want to achieve this, follow these steps:

const termsAndConditionsList: { [countryCode: string]: string[] } = {
    pt: ["url1", "url2"],
    en: ["url3", "url4"]
}

Afterwards, you won't need to include additional typing since it's already defined.

For example:

const portugueseUrls = termsAndCondition.pt

Answer №2

declare type TermsAndConditions = Record<'en' | 'pt', string[]>

If the structures of both types are the same, you can utilize the Record utility type and use a union type as keys for the Record to fit your scenario.

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

Send a POST request to the db.json file containing an object with various attributes

Here is the code snippet I am working with: function createObject(){ let object = { product1 : "Apple", product2 : "Banana", product3 : "Cucumber", product4 : "Duba", product5 : "Emil", product6 : "Fidschi", } return object ...

javascriptajaxjson-server

Is there a way to verify if a React hook can be executed without triggering any console errors?

Is there a way to verify if a React hook can be invoked without generating errors in the console? For example, if I attempt: useEffect(() => { try { useState(); } catch {} }) I still receive this error message: Warning: Do not call Hooks i ...

javascriptreactjstypescriptreact-hookstry-catch

Determining data types through type guarding in Typescript

interface A = { name: string; ... }; interface B = { name: string; ... }; interface C = { key: string; ... }; type UnionOfTypes = A | B | C | ...; function hasName(item: UnionOfTypes) { if ("name" in item) { item; // typescript knows ...

typescripttypeguards

Determining the return type of a function by analyzing its parameters

Let's consider the following scenario: export function bar(bar?: string) { return bar ? { bar } : {}; } const B1 = bar(); const B2 = bar("z"); Upon compilation, the types inferred for both B1 and B2 are: { bar: string; } | { bar? ...

typescript

Using Vue's V-IF directive to compare dates

On my website, I have an object that contains a field named available_at with the date in the format of 2019-08-08 I have a working HTML table utilizing Vue bindings but I am unsure how to compare the timestamp above using the built-in Date.now() method ...

javascriptvue.js

The font remains the same despite the <Div style=> tag

I have a script that loads external HTML files, but I am facing an issue with changing the font to Arial. The script is as follows: <script type="text/javascript"> $(document).ready(function(){ $("#page1").click(function(){ ...

javascriptjqueryhtmlcssfonts

Loop through data and use jQuery to insert it into the server

I am encountering an issue with my code as I attempt to insert data from a loop; unfortunately, I keep getting the error message "Uncaught TypeError: Illegal invocation". window.items = ''; _.forEach(cart.items, function(n, key) ...

javascriptjqueryajax

Using Firebase: retrieving getAdditionalUserInfo in onCreate of a Firebase Cloud function

Can anyone help me figure out how to retrieve extra data from a SAML login provider in the backend (firebase functions)? I can see the data on the client side but I'm struggling to access it in the backend. I've specified these dependencies for ...

node.jstypescriptfirebasefirebase-authenticationgoogle-cloud-functions

Using Fabric JS to create a group of multiple objects

Can Fabric JS allow for grouping all objects on the canvas with a click event? ...

javascriptfabricjs

Is there an equivalent concept to Java's `Class<T>` in TypeScript which allows extracting the type of a class constructor?

I'm in need of a feature similar to the Class functionality in Java, but I've had no luck finding it. Class<T> is exactly what I require. I believe it could be named NewableFunction<T>. However, such an option does not exist. Using M ...

typescripttypescript-typings

inject the HTML content into the <div> container

Snippet: https://jsfiddle.net/x9ghz1ko/ (Includes notes.) In my HTML file, there are two distinct sections: <section class="desktop_only"> and <section class="mobile_only">. The challenge lies in positioning a JavaScript sc ...

javascripthtml

Problems related to TypeScript in a callback session

I am currently working on enhancing the API response by adding the unique identifier (id) property during the login process. I followed the recommendation to use callbacks from a discussion on Stack Overflow (Get User ID from session in next-auth client), ...

typescriptnext.jsnext-auth

Deactivate a form on the page while another form is being used

My issue involves having two forms on the same web page with identical IDs, and I'm unable to easily change them. Both forms are necessary on the page. When I submit one form, it also submits the other form as blank, resulting in duplicate submission ...

javascriptjqueryforms

Guide for receiving client messages on the server side (Node.js) with PubNub

How can I implement message communication between clients and servers using PubNub? Is it possible to subscribe to a channel on the server side (Node.js) and listen for messages? I need to utilize PubNub for the following scenario: => There are numer ...

javascriptnode.jsexpresswebsocketpubnub

Manipulating and transforming data through Puppeteer's iterative process into an object structure

As a beginner with the puppetteer library, I'm trying to iterate through Amazon reviews and save each comment as an object. Although my code seems to be functioning, it only retrieves the first comment and then stops. async function scrapeProduct(ur ...

javascriptnode.jsjavascript-objectspuppeteer

Changing from using GET to employing POST

My current Ajax request function is as follows: // JavaScript function myFunc(pid) { $.ajax({ type : "GET", url : "testback.php", contentType : "application/json; charset=utf-8", dataType : "json", data : { ...

javascriptphpjquerymysqlajax

Is there a way to reduce the size or simplify the data in similar JSON objects using Node.js and NPM packages?

Is it possible to serialize objects of the type "ANY_TYPE" using standard Node tools.js or NPM modules? There may be multiple objects with this property. Original Json - https://pastebin.com/NL7A8amD Serialized Json - https://pastebin.com/AScG7g1R Thank ...

javascriptnode.jsjsonparsingnpm

Binding objects and properties from Angular2/Typescript to a template

Disclaimer: Seeking insight on the correct approach or any additional information _____________________________________________________________________ ANGULAR1 When working with angular1, we had the option to define our objects in the following ma ...

typescriptangular

Accessing the current route in a Vuex module using Vue.js

I've created a vuex store with namespaces that retrieves a specific store entry based on the current route parameter. import Router from '../../router/index' const options = { routeIdentifier: 'stepId' } export function fetchFr ...

javascriptvue.jsvuexvue-routervuex-modules

Video streaming platform without the need for javascript and plugins

Is it feasible to watch Youtube videos without relying on javascript and plugins, exclusively using HTML5 or a similar alternative? ...

javascripthtmlyoutube