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

Custom HTML binding in expanding rows of Angular 2 DataTables

Is there a way to access the value of an IPC message beyond just using console log?

Error encountered in Angular Html2Pdf: Unable to assign the 'adoptedStyleSheets' attribute on 'ShadowRoot' due to DOMException

The CSS "mask" property is experiencing compatibility issues on Google Chrome

An issue occurred while trying to run Ionic serve: [ng] Oops! The Angular Compiler is in need of TypeScript version greater than or equal to 4.4.2 and less than 4.5.0, but it seems that version 4

Receiving errors in React/TS/material-ui when attempting to use a variable as a value for a grid property. Messages include "No overload matches" and "Type 'number' is not assignable to type..."

NextJS Typescript Player

What is the best way to convert the reader.result into a string?

When an import is included, a Typescript self-executing function will fail to run

Ionic Framework: Implementing a search bar in the navigation bar

Unable to retrieve React state within the callback function

Cannot establish a connection with Socket.IO

Sharing precise API information between React components in React Components

Is it possible to apply search filters within a child component in Angular?

Puzzled by the specialized link feature

Encountering an error in TypeScript: Attempting to define type files for a third-party library triggers the TS2709 error when attempting to use the 'Optional' namespace as a type

What causes the select dropdown to display an empty default in Angular 8 following an HTTP request?

Incorporate a generic type into a React Functional Component

Can someone explain how to showcase a collection attribute in Angular?

Error message stating: rxjs and firebase encountered a TypeError when attempting to add property 0 because the object is not