TypeScript throws an error if trying to access an Object variable using a String

Question

TypeScript throws an error if trying to access an Object variable using a String

While the code below is functioning as intended, I am encountering an error in the VS Code Typescript compiler stating that "Type 'String' cannot be used as an index type". Oddly enough, using a string literal instead of a variable like sentence['a-string'] allows the Typescript to run without issue.

I am content with how the code is currently set up, but I would like to know if there is a way to resolve this error. Alternatively, is there another method I can use to access sentence[display]?

const props = defineProps<{
    sentence: Sentence,
    display: String,
}>()

<div v-html="sentence[display]" />

The code is functional, however, the Typescript error persists.

typescript vue.js

Answer 1

Answer №1

If you want to address this issue, you have the option of adding the following code snippet:

 [key: string]: string;

Alternatively, you could create an interface called Sentence and include the key value inside it like so:

interface Sentence {
  [key: string]: string; // This allows indexing with a string key to retrieve a string value.
}

Additionally, as mentioned by @Estus Flask, it's important to note that "string" and "String" are not interchangeable.

  const props = defineProps<{
    sentence: Sentence,
    display: string,
}>()

Answer 2

If you want to address this issue, you have the option of adding the following code snippet:

 [key: string]: string;

Alternatively, you could create an interface called Sentence and include the key value inside it like so:

interface Sentence {
  [key: string]: string; // This allows indexing with a string key to retrieve a string value.
}

Additionally, as mentioned by @Estus Flask, it's important to note that "string" and "String" are not interchangeable.

  const props = defineProps<{
    sentence: Sentence,
    display: string,
}>()

Answer 3

Answer №2

If you want to inform TypeScript that the object can be accessed by strings, you can do so with the following code snippet:

const properties = defineProps<{
    [key:string]: any, /* or specify your expected type */
    phrase: Sentence,
    view: String,
}>()

Answer 4

If you want to inform TypeScript that the object can be accessed by strings, you can do so with the following code snippet:

const properties = defineProps<{
    [key:string]: any, /* or specify your expected type */
    phrase: Sentence,
    view: String,
}>()

Answer 5

Answer №3

To designate display as a key within the Sentence object, you can do the following:

const props = defineProps<{
    sentence: Sentence,
    display: keyof Sentence,
}>()

This approach will generate error messages if an incorrect value is passed to display, and it will enable your IDE to provide suggested values.

In scenarios where the keys of Sentence are not fixed (e.g.,

type Sentence = {[key: string]: any}

), but the keys of a specific object can be deduced, you can utilize generics to specify those concrete keys:

<script setup lang="ts" generic="O extends Sentence">

const props = defineProps<{
    sentence: O
    display: keyof O
}>()

By implementing this method, you will receive errors if the value for display does not align with one of the actual keys in the object.

It's worth noting that Vue currently struggles to infer the correct type in templates, which means that using {{ sentence[display] }} in the template may lead to an error. Nonetheless, you can create a computed property as a workaround.

Answer 6

To designate display as a key within the Sentence object, you can do the following:

const props = defineProps<{
    sentence: Sentence,
    display: keyof Sentence,
}>()

This approach will generate error messages if an incorrect value is passed to display, and it will enable your IDE to provide suggested values.

In scenarios where the keys of Sentence are not fixed (e.g.,

type Sentence = {[key: string]: any}

), but the keys of a specific object can be deduced, you can utilize generics to specify those concrete keys:

<script setup lang="ts" generic="O extends Sentence">

const props = defineProps<{
    sentence: O
    display: keyof O
}>()

By implementing this method, you will receive errors if the value for display does not align with one of the actual keys in the object.

It's worth noting that Vue currently struggles to infer the correct type in templates, which means that using {{ sentence[display] }} in the template may lead to an error. Nonetheless, you can create a computed property as a workaround.

TypeScript throws an error if trying to access an Object variable using a String

Answer №1

Answer №2

Answer №3

Similar questions

Accessing store in Vue, the getter function returns a value representing whether the user is currently logged

Is it possible for a voiceover artist to initiate API requests?

Trouble encountered while using useRef in TypeScript

Unintentional GET request triggered by Axios baseURL

Unexpected 'TypeError: Unable to access property 'removeChild' of null" error causing confusion

Utilizing a method from a separate class in Ionic 2

Converting a string to a number in an Angular template

Determining function return property type in Typescript by mapping interface argument property

Custom markers on Google Maps are fixed in place and cannot be dragged

Issues encountered when trying to deploy Nuxt.js on GitHub Pages

Managing a click event with an element in React using TypeScript

Ionic has been experiencing issues with inaccurate boolean results being generated by Angular typescript

Transferring information between Puppeteer and a Vue JS Component

Beginning the deployment of a Nuxt SSR application on Azure with the build files

What can cause the reactive value to fail to update in a Vue template?

A guide on how to assign a placeholder as the default value for a date picker

Is it possible to use @ViewChild to target an element based on its class name?

Guide on integrating Amazon S3 within a NodeJS application

Using a loop variable within a callback function in JavaScript/TypeScript: Tips and tricks

Encountering a Laravel error: Unexpected token when implementing Vuex