CODEWITHSUNDEEP
reactjstypescript
user1283776
user1283776

Reputation: 21764

'this' implicitly has type 'any' because it does not have a type annotation. when invoking bind on a function

Code:

const renderSections = techSpecTableData.sections.map((section: Section, index: number) => {
    return (
        <div key={index} className="tech-spec-table-section">
            <div className="tech-spec-table-section__heading">{section.heading}</div>
            {renderRows.bind(this, section.rows)}
        </div>
    );
});

Warning:

[ts] 'this' implicitly has type 'any' because it does not have a type annotation.

What type should this have? I don't know actually. And I won't be using this. I just want to pass section.rows.

EDIT: Here is the full code of the component, which contains the part above but also other code.

import * as React from 'react';
import './TechSpec.css';

interface Section {
    heading: string;
    rows: Row[];
}

interface Row {
    label: string;
    values: string[];
}

const techSpecTableData = {
    ...
};

const renderRows = ((rows: Row[]) => {
    return (
        <div key={index}>
            ...
        </div>
    );
});

const renderSections = techSpecTableData.sections.map((section: Section, index: number) => {
    return (
        <div key={index} className="tech-spec-table-section">
            <div className="tech-spec-table-section__heading">{section.heading}</div>
            {renderRows.bind(this, section.rows)}
        </div>
    );
});

const renderHeadings = techSpecTableData.headings.map((heading: string, index: number) => {
    return (
        <div key={index} className="tech-spec-table__header__heading">
            {heading}
        </div>
    );
});

const TechSpec = () => {
    return (
        <div className="tech-spec">
            <div className="content-container">
                <h2 className="heding--h2 heading--emphasized">
                    Technical Specification
                </h2>

                <div className="tech-spec-table__header">
                    {renderHeadings}
                </div>
                <div className="tech-spec-table__sections">
                    {renderSections}
                </div>
            </div>
        </div>
    );
};

export default TechSpec;

Upvotes: 0

Views: 580

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

this as you've used it will just be window, most likely. TypeScript probably doesn't know about it. Moreover, you most likely don't want to use it. Simply renderRows(section.rows) should be fine.

However, I would recommend that rather than have renderX functions you use components. It should be pretty easy to do this since you already have these as functions -- the transition to functional components should be pretty small.

const Section = ({ section }) => (
  <div>
    ... row content ...
  </div>
);

const Sections = ({ sections }) =>
  sections.map((section, index) => <Section section={section} key={index} />);

const TechSpec = () => (
  ...
  <div className="tech-spec-table__sections">
    <Sections sections={techSpecTableData.section} />
  </div>
  ...
);

Note that I would use key={section.id} or something like that if possible rather than key={index}.

Upvotes: 1

Related Questions