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

Encountering difficulties accessing props while invoking a component in React

The connection to fonts.googleapis.com for the stylesheet sometimes experiences issues with loading properly or becoming corrupted

Sanity.io and using images with next/image extension glitch

Exploring the firestore section with vuefire for seamless access to methods

"Excessive label length on yAxis causing display issues in chart with chartJs

What is the best way to push a variable after employing the split function in JavaScript?

Typescript in Firebase Functions organization

Consolidate multiple sorting functions into a single function to effectively sort by column

What could be causing my data to undergo alterations when transitioning from a frontend form submission to a backend API?

What is the best way to iterate over an Angular HTTP Response?

How can I make Cesium, SystemJS, and Angular2 compatible with each other?

`Is There a Solution When Compilation Fails?`

Effective strategies for extracting value from asynchronous Angular events that return Promises

Implementing TypeScript in React FlatList

Changing background color during drag and drop in Angular 2: A step-by-step guide

Sending the value of "username" between two components within Angular 2

Is there a way to update JSON data through a post request without it getting added to the existing data?

Issue accessing page from side menu in Ionic 2 application

I am facing an issue where the data is not displaying as expected in the console

Is there a way to turn off linting while utilizing vue-cli serve?