The element is automatically assigned an 'any' type due to the inability to use a 'string' type expression to index the 'DataType' type

Question

The element is automatically assigned an 'any' type due to the inability to use a 'string' type expression to index the 'DataType' type

Encountering an issue where row[header.key] is displaying the error message

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'DataType'

. I prefer not to use type:any and instead would like to know what to pass in here.

Your assistance is greatly appreciated. Thank you in advance.

export interface HeaderType {
 label: string; 
 key: string
}

export interface DataType {
 isImported: string;
 type: string;
 entityId: string | undefined;
 actor?: string | undefined;
 additionalInformation?: { [key: string]: string } | undefined;
}

const convertToCsv = (headers: Array<HeaderType>, data: Array<DataType>) => {
  const csvRows = [];
  const headerValues = headers.map(header => header.label);
   csvRows.push(headerValues.join(','));
   data?.forEach(row => {
  const rowValues = headers.map(header => {
  let escaped;
  if (typeof row[header.key] === 'object') {
    const str = JSON.stringify(row[header.key], null, 1);
    escaped = str?.replace(/"/g, '');
  } else if (row[header.key] && /"/g.test(row[header.key])) {
    escaped = row[header.key].replace(/"/g, '');
  } else {
    escaped = row[header.key] ? row[header.key].replace(/"/g, '\\"') : '';
  }
  return `"${escaped}"`;
 });
 csvRows.push(rowValues.join(','));
});
return csvRows.join('\n');
};

 const generateCSV = (
   header: Array<HeaderType>,
   data: Array<DataType> ,
 ) => convertToCsv(header, data);

 export default generateCSV;

typescript

Answer 1

Answer №1

It's a bit unclear if I've grasped your question correctly.

To achieve this, you need to ensure that the key in the HeaderType matches a key of Datatype:

export interface HeaderType {
  label: string;
  key: keyof DataType; // <-- key must be a key of DataType
}

Next, within the function, utilize a local variable to allow Typescript to determine the type (currently string | {[p: string]: string}):

const convertToCsv = (headers: Array<HeaderType>, data: Array<DataType>) => {
  const csvRows = [];
  const headerValues = headers.map((header) => header.label);
  csvRows.push(headerValues.join(','));
  data?.forEach((row) => {
    const rowValues = headers.map((header) => {
      let escaped;
      const value = row[header.key]; // <- local constant for Type inferencing purposes 
  ....

Following these steps should result in successful code compilation.

Answer 2

It's a bit unclear if I've grasped your question correctly.

To achieve this, you need to ensure that the key in the HeaderType matches a key of Datatype:

export interface HeaderType {
  label: string;
  key: keyof DataType; // <-- key must be a key of DataType
}

Next, within the function, utilize a local variable to allow Typescript to determine the type (currently string | {[p: string]: string}):

const convertToCsv = (headers: Array<HeaderType>, data: Array<DataType>) => {
  const csvRows = [];
  const headerValues = headers.map((header) => header.label);
  csvRows.push(headerValues.join(','));
  data?.forEach((row) => {
    const rowValues = headers.map((header) => {
      let escaped;
      const value = row[header.key]; // <- local constant for Type inferencing purposes 
  ....

Following these steps should result in successful code compilation.

Answer 3

Answer №2

PLAYGROUND

Code Snippet

export interface DataType {
 isImported: string;
 additionalInformation?: { [key: string]: string } | undefined;
}

const a: DataType = {
    isImported:"true",
    "additionalInformation": {a:"string"}
}

const b:string = "isImported"

// a[b] would result in an error

if(b in a){
    // you can use hasOwnProperty if preferred.
    console.log(a[b as keyof DataType])
}

Explanation:

The issue arises when trying to access dataType[x] where x may not belong to dataType
To verify that x does belong to the dataType, the in operator is used.
Alternatively, other operators like .hasOwnProperty can be utilized since in also checks the prototype chain.
If you are certain that your header.key belongs to DataType, consider @berse2212's solution.

Answer 4

PLAYGROUND

Code Snippet

export interface DataType {
 isImported: string;
 additionalInformation?: { [key: string]: string } | undefined;
}

const a: DataType = {
    isImported:"true",
    "additionalInformation": {a:"string"}
}

const b:string = "isImported"

// a[b] would result in an error

if(b in a){
    // you can use hasOwnProperty if preferred.
    console.log(a[b as keyof DataType])
}

Explanation:

The issue arises when trying to access dataType[x] where x may not belong to dataType
To verify that x does belong to the dataType, the in operator is used.
Alternatively, other operators like .hasOwnProperty can be utilized since in also checks the prototype chain.
If you are certain that your header.key belongs to DataType, consider @berse2212's solution.

Answer 5

Answer №3

The issue stems from the lack of type information in the row[header.key] expression. To resolve this, you need to convert the type of row[header.key] to string. One way to do this is by using the type assertion operator and specifying it as a string:

Below is the revised code with the necessary fix implemented:

const rowValue = row[header.key] as string;

Answer 6

The issue stems from the lack of type information in the row[header.key] expression. To resolve this, you need to convert the type of row[header.key] to string. One way to do this is by using the type assertion operator and specifying it as a string:

Below is the revised code with the necessary fix implemented:

const rowValue = row[header.key] as string;

The element is automatically assigned an 'any' type due to the inability to use a 'string' type expression to index the 'DataType' type

Answer №1

Answer №2

PLAYGROUND

Code Snippet

Explanation:

Answer №3

Similar questions

What causes the constant reappearance of props as a parameter in my Home function?

Custom HTML binding in expanding rows of Angular 2 DataTables

Is there a hashing algorithm that produces identical results in both Dart and TypeScript?

Is it possible for two distinct TypeScript interfaces to share identical keys while allowing for varying values?

Mistake in maintaining hydration with styled-components and React Context

How do I retrieve a specific svg element in Angular among multiple elements?

Module '@types/mongodb' could not be located

Encountering a ReferenceError while attempting to implement logic on a newly created page

What steps should I take to resolve the issue with react-redux in my project?

transferring data from service to component

Is it possible for me to create a union type that connects parameters and responses in a cohesive manner

Tips for implementing type safety in a generic class to verify that the response type aligns with the anticipated type in TypeScript

IonicSuper's starter template allows for the manipulation of the retrieved GET request result from the REST API handler

"CanDeactivate Implementation Failure: Why isn't the Generic Function Being Called

Displaying errors to the user using Angular's HttpClient in an Ionic application

What is causing the failure of the state to be inherited by the child component in this scenario (TypeScript/React/SPFX)?

Setting up Webpack for react-pdf in a Next.js application

The array used within the useEffect hook and the getCoordinates function appears to be distinct when printed with console

Enhancing TypeScript with Generic Functions

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector