What is preventing me from accessing a JavaScript object property when using a reactive statement in Svelte 3?

Question

What is preventing me from accessing a JavaScript object property when using a reactive statement in Svelte 3?

Recently, while working on a project with Svelte 3, I encountered this interesting piece of code:

REPL:

<script lang="ts">
  const players = {
    men: {
      john: "high",
      bob: "low",
    },
  };

  // const player = "bob"
  $: player = "bob";

  const test = players.men[player];

  console.log(test); //prints undefined
</script>

{player} //bob
{test} //undefined

Interestingly, Typescript raised an error in my case:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ john: string; bob: string; }'.
  No index signature with a parameter of type 'string' was found on type '{ john: string; bob: string; }'.ts(7053)

However, when I modified the code to const player = "bob", everything started working fine. It's quite intriguing!

Ever wondered why?

typescript svelte svelte-3

Answer 1

Answer №1

Using a random string to access an object can be unsafe, hence the compiler's complaint. The reason no complaint arises when using const is that a constant string literal is determined at compile time, making it immutable at runtime and therefore safe for the compiler to handle. There are ways to work around this issue, with one of the simplest (though not entirely secure) methods being a cast:

  const players = {
    men: {
      john: "high",
      bob: "low",
    },
  };

  // const player = "bob"
  let player = "bob";

  const test = players.men[player as keyof typeof players.men];

Alternatively, there might be a more secure approach with the Svelte feature you are attempting to utilize. In similar scenarios in TypeScript, I often use string literals or enums to ensure that the compiler prevents me from encountering unexpected undefined:

enum Males {
  JOHN = "john",
  BOB = "bob"
}

const players: {
  men: {
    [key in Males]: string;
  }
} = {
  men: {
    john: "high",
    bob: "low",
  },
};

const test2 = players.men[Males.JOHN];

Playground

Answer 2

Using a random string to access an object can be unsafe, hence the compiler's complaint. The reason no complaint arises when using const is that a constant string literal is determined at compile time, making it immutable at runtime and therefore safe for the compiler to handle. There are ways to work around this issue, with one of the simplest (though not entirely secure) methods being a cast:

  const players = {
    men: {
      john: "high",
      bob: "low",
    },
  };

  // const player = "bob"
  let player = "bob";

  const test = players.men[player as keyof typeof players.men];

Alternatively, there might be a more secure approach with the Svelte feature you are attempting to utilize. In similar scenarios in TypeScript, I often use string literals or enums to ensure that the compiler prevents me from encountering unexpected undefined:

enum Males {
  JOHN = "john",
  BOB = "bob"
}

const players: {
  men: {
    [key in Males]: string;
  }
} = {
  men: {
    john: "high",
    bob: "low",
  },
};

const test2 = players.men[Males.JOHN];

Playground

What is preventing me from accessing a JavaScript object property when using a reactive statement in Svelte 3?

Answer №1

Similar questions

Utilizing a loaded variable containing data from an external API request within the useEffect() hook of a React component

Creating a dynamic TypeScript signature that includes an optional argument

Prisma Hack: excluding properties in type generation

Retrieve a list of class names associated with a Playwright element

Type of result from a function that returns a linked promise

Resolving Node.js Absolute Module Paths with TypeScript

Trouble with implementing a custom attribute directive in Angular 4 and Ionic 3

The TypeScript error message is saying that it cannot find the property 'push' of an undefined value, resulting in a error within the

Working with TypeORM to establish two foreign keys pointing to a single primary key in a table

Integrate incoming websocket information with state management in React

When integrating Bootstrap 5 into a SvelteKit app.html file, a "File Not Found" error may be triggered

Error: User authentication failed: username: `name` field is mandatory

Using Jest and TypeScript to mock the return value of react-oidc-context

Using TypeScript and Node.js with Express; I encountered an issue where it was not possible to set a class property of a controller using

"Exploring the dynamic duo of Angular2 and ng2Material

Currently, I am attempting to implement password strength validation using Angular

Setting up the environment variable for ApolloClient to be utilized in server-side rendering for continuous integration/continuous deployment involves following a specific

Generate a fresh array by filtering objects based on their unique IDs using Angular/Typescript

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows

Date input using manual typing format