Typescript error code TS7053 occurs when an element is detected to have an implicit 'any' type due to an expression of a different type

Question

Typescript error code TS7053 occurs when an element is detected to have an implicit 'any' type due to an expression of a different type

I encountered an issue with the provided example.

I'm uncertain about how to resolve it.

Your assistance would be greatly appreciated.


type TestValue = {
  value: string;
};

type FirstTest = {
  type: 'text';
  text: TestValue[];
};

type SecondTest = {
  type: 'heading';
  heading: TestValue;
};

type Test = FirstTest | SecondTest;

const firstTest: Test = {
  type: 'text',
  text: [
    {
      value: 'Text!!',
    },
  ],
};
const secondTest: Test = {
  type: 'heading',
  heading: {
    value: 'heading!!',
  },
};

const foo = (data: Test) => {
  const { type } = data;

  const content = data[type]; //Encountering error TS7053: Element implicitly has an 'any' type because expression of type '"text" | "heading"' can't be used to index type 'Test'.   Property 'text' does not exist on type 'Test'.

  switch (type) {
    case 'heading':
      return content.value;
    case 'text':
      return content[0].value;
  }
};

Unfortunately, I am faced with the error

TS7053: Element implicitly has an 'any' type because expression of type '"text" | "heading"' can't be used to index type 'Test'.   Property 'text' does not exist on type 'Test

Executing the foo function results in a type validation issue.

typescript

Answer 1

Answer №1

If you want to make the most of the discriminated union type, ensure that you only try to access data[type] within the corresponding block where type was discriminated. For example, within your switch statement:

const foo = (data: Test) => {
  const { type } = data;
  let content: FirstTest['text'] | SecondTest['heading']

  type // "text" | "heading"
  data // FirstTest | SecondTest
  data[type] // invalid as neither "text" nor "heading" appear on both FirstTest and SecondTest

  switch (type) {
    case 'heading':
      type // "heading"
      data // SecondTest
      content = data[type] // valid as SecondTest['heading'] exists
      return content.value;
    case 'text':
      type // "text"
      data // FirstTest
      content = data[type] // valid as FirstTest['text'] exists
      return content[0].value;
  }
};

In order to simplify, you can skip creating the content variable completely:

const foo = (data: Test) => {
  const { type } = data;

  switch (type) {
    case 'heading':
      return data[type].value; // valid
    case 'text':
      return data[type][0].value; // valid
  }
};

Answer 2

If you want to make the most of the discriminated union type, ensure that you only try to access data[type] within the corresponding block where type was discriminated. For example, within your switch statement:

const foo = (data: Test) => {
  const { type } = data;
  let content: FirstTest['text'] | SecondTest['heading']

  type // "text" | "heading"
  data // FirstTest | SecondTest
  data[type] // invalid as neither "text" nor "heading" appear on both FirstTest and SecondTest

  switch (type) {
    case 'heading':
      type // "heading"
      data // SecondTest
      content = data[type] // valid as SecondTest['heading'] exists
      return content.value;
    case 'text':
      type // "text"
      data // FirstTest
      content = data[type] // valid as FirstTest['text'] exists
      return content[0].value;
  }
};

In order to simplify, you can skip creating the content variable completely:

const foo = (data: Test) => {
  const { type } = data;

  switch (type) {
    case 'heading':
      return data[type].value; // valid
    case 'text':
      return data[type][0].value; // valid
  }
};

Typescript error code TS7053 occurs when an element is detected to have an implicit 'any' type due to an expression of a different type

Answer №1

Similar questions

Create a randomized item for experimentation in NodeJs using an interface

Typescript sometimes struggles to definitively determine whether a property is null or not

Ensure that the dynamically inserted <title> tag remains intact in Angular even when the page is re

There are several InputBase elements nested within a FormControl

No matter what I attempt, Ng-options is still failing to work properly

Issue with TypeScript Declaration File in NPM module functionality

Prevent redundancy by caching svg icons to minimize repeated requests

Creating a Dynamic Clear Button for a Text Area in Angular

remove a specific element from an array

I'm having trouble grasping the concept of 'globals' in TypeScript/NodeJS and distinguishing their differences. Can someone explain it to me?

Improving DynamoDb Query Results with Type Hinting

Transitioning from Webpack to Vite: Resolving Path Alias and Ensuring Proper Imports

Navigating within components using code is an essential skill when working with Vue Router

Learn how to access nested arrays within an array in React using TypeScript without having to manually specify the type of ID

Utilizing backbone-forms in Typescript: A beginner's guide

What is the process for defining the root of a project in ESLint?

Guide on navigating to a different page using a function with router link in Angular using TypeScript

Creating a conditional statement within an array.map loop in Next.js

Guide to creating a one-to-one object literal map with a different value type using a function return without explicitly defining the return type

Observing the completion of a subscriber function