How can object property be referenced using bracket notation in TypeScript?
In traditional JavaScript, it can be done like this:
getValue(object, key) {
return object[key];
}
By calling
getValue({someKey: 1}, "someKey")1.
However, when attempting to do this in TypeScript, an error is encountered:
TS1003: Identifier expected. Name expected.What is the correct way to achieve this in TypeScript?
If you are looking for a way to ensure type safety in your code, you may want to consider utilizing the keyof keyword:
interface YourObj {
someKey: string;
someOtherKey: number;
}
function getValue(obj: YourObj, key: keyof YourObj) {
return obj[key];
}
console.log("Value of object = " + getValue({someKey: "someValue", someOtherKey: 1}, "someKey"))
By using keyof, you will receive compilation errors if you try to call getValue on anything other than an object that matches the structure of YourObj or with a key that is not defined in YourObj
In Typescript, JavaScript is considered a strict superset, making JavaScript code compatible with Typescript.
When accessing object properties in Typescript, both the dot notation and bracket notation are valid options. Executing the code example below will not produce any errors or warnings.
If you need further assistance, it's recommended to provide a minimal, reproducible example.
Check out this TypeScript Playground Demo
function returnValue(obj: any, key: string) {
return obj[key];
}
console.log("Object value = " + returnValue({someKey: 1}, "someKey"))
Object value = 1
app/product-detail.component.ts(2,22): error TS2307: Cannot find module './product'. I have tried several solutions but none of them seem to work for me. I am working on a demo app in Angular 2 and encountering this specific error. Any guidance ...
I created a photo gallery with different categories. My goal is to only show the categories that have photos in them. Within my three categories - "new", "old", and "try" - only new and old actually contain images. The issue I'm facing is that all t ...
Why is it that Typescript sometimes fails to infer types in seemingly simple cases? I am trying to understand the behavior behind this. When Typescript's Type Inference Goes Wrong Consider the scenario where we have the following class declarations: ...
I have been struggling to make the subscribe function for the params observable work in my Angular project. While I have successfully implemented router.events, I can't seem to get the subscription for params observable working. Can anyone point out w ...
I am currently working on creating a basic example using ReactJS and TypeScript in Visual Studio 2015. Despite following several tutorials, none of them have met my specific requirements or worked as expected. My goal is to develop components as .tsx fil ...
Imagine a scenario where there is a library that exposes a `run` function as shown below: runner.ts export type Parameters = { [key: string]: string }; type runner = (args: Parameters) => void; export default function run(fn: runner, params: Parameter ...
I am having an issue with finding a declaration file for the module 'react-combine-styles' even after I installed it using npm install @types/react-combine-styles. import React, { useState } from "react"; import useStyles from "./u ...
I've been attempting to store and retrieve a page containing two angular2 components from local storage using the following code, but the component CSS is not being applied. Here is the code I'm using to save: localStorage.setItem('pageCon ...
Received data is structured as follows: const worldMap = [ { "name": "Germany", "parentId": null, "type": "Country", "value": "country:unique:key:1234", "id&qu ...
Encountering issues displaying data from my local express.js REST API, organized as follows: people: [{ surname: 'testsurname', name: 'testname', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...
My team is developing an application that will deploy multiple stacks to AWS. One of these stacks is called SuperStar, and it can only exist once per AWS account. I am currently exploring how our TypeScript CDK can retrieve a list of stacks from CloudFor ...
I have an item that looks like this: const obj = [ { link: "/home", title: "Home1" }, { link: "/about", title: "About2" }, { link: "/contact", title: "Contact1" } ] as const and I want to p ...
It has come to my attention that deno no longer necessitates the use of package.json (compatible with npm/yarn) to detail its dependencies. However, when it comes to build/run scripts, is package.json still the recommended descriptor or are there alternat ...
Is there a way to safely implement the given function in TypeScript without using unsafe casts or an extensive number of function overloads with various input permutations? interface Wrapped<T> { type: string; data: T; } interface WrappedA&l ...
Currently, I am utilizing Angular and have a checkbox that I need to toggle visibility based on the response of an API call subscription. The issue lies in a delay when trying to hide the checkbox (as it is initially set to visible). My assumption is that ...
Is it possible to initiate an http request before another ongoing http request finishes (For example, fetching a token/refresh token from the server before the current request completes)? I successfully implemented this functionality using Angular 5' ...
My goal is to optimize the body of a NextApiRequest for TypeScript. I currently have this code snippet: // This is a type from a library I've imported export interface NextApiRequest { query: Partial<{ [key: string]: string | string[]; ...
I am in the process of developing a material dialog to collect user location information using AGM (angular google maps). I have successfully implemented a map on my main page, but when the dialog is opened, it only shows a blank space instead of the map. ...
Is it possible to extract the Type based on both the file number and file volume number? [ { ApplicantPartySiteNumber: "60229", ManufacturerPartySiteNumber: "1095651", FileVolumeNumber: "E312534.2", Type: "Manufacturer", FileNumber ...
I currently have two different .env files, one named development.json and the other called production.json. These files contain various environment variables structured like this: { "env": { "baseUrl": "test.com", ...