reactjs - ปัญหาประเภท 'any' ของ Typescript สำหรับตัวแปรที่ไม่มีอยู่

ฉันกำลังศึกษา Typescript และเจอปัญหาที่ดูเหมือนจะแก้ไขไม่ได้ เมื่อพยายามเรนเดอร์คอมโพเนนต์ที่ถูกเมโมไทซ์ (ฉันกำลังใช้ React) ฉันได้รับข้อความแสดงข้อผิดพลาดดังนี้:

TS7006: Parameter '_ref' implicitly has an 'any' type.

เหตุผลที่สิ่งนี้ทำให้ฉันสับสน คือไม่ว่ายังไงฉันก็ไม่สามารถเห็นได้ว่า property _ref นี้มาจากไหน

นี่คือโค้ดของทั้งคอมโพเนนต์ และหน้าที่พยายามเรนเดอร์มัน:

// Dependencies
import React, { memo } from 'react';

// Styles

// Props
interface BuildingBlockProps {
  id: number,
  top: number,
  left: number
}

const BuildingBlock: React.FC<BuildingBlockProps> = ({id, top, left}: BuildingBlockProps) => {
  return (
    <React.Fragment>
      <div
        id={`building-block-${id + 1}`}
        className="absolute w-12 h-12 bg-red-500 rounded-full"
        style={{ top: top + '%', left: left + '%' }}
      />
    </React.Fragment>
  );
}; 

// Export memoized component
const _BuildingBlock = memo(BuildingBlock);
export default _BuildingBlock;

import React from 'react';

import _BuildingBlock from '../components/atoms/BuildingBlock';

const TestPage = () => {
  return (
    <div>
      <_BuildingBlock id={1} top={2} left={3}/>
    </div>
  );
};

export default TestPage;

ฉันพยายามตรวจสอบการตั้งค่า webpack, babel ของฉัน รวมถึงสิ่งต่างๆ อย่างไฟล์ตั้งค่า Tailwind และ postcss ของฉันด้วย แต่ฉันก็ยังไม่เห็นว่ามีอะไรผิดพลาด หากใครมีคำแนะนำฉันจะซาบซึ้งมาก!

นอกจากนี้ ฉันสามารถให้รายการ dependencies ในไฟล์ package.json ของฉันได้หากนั่นจะช่วยในการแยกหาวิธีแก้ไขที่เป็นไปได้

แก้ไข: ข้อความแสดงข้อผิดพลาดทั้งหมดที่ฉันได้รับคือ:

./src/components/atoms/BuildingBlock.tsx 8:43-47 [tsl] ERROR in C:\Users\liam_\Desktop\Business\Nixon-Digital\Website\nixon-digital\client\src\components\atoms\BuildingBlock.tsx(8,44) TS7006: Parameter '_ref' implicitly has an 'any' type. ts-loader-default_e3b0c44298fc1c14 @ ./src/pages/TestPage.tsx 2:0-63 4:92-106 @ ./src/index.tsx 11:0-40 29:47-55 webpack 5.75.0 compiled with 1 error in 6817 ms

ซึ่งเท่าที่ฉันสามารถบอกได้คือกำลังชี้ไปที่จุดสิ้นสุดของบรรทัด: id: number, ซึ่งฉันไม่เข้าใจเลย

อัปเดต: หลังจากที่ล้างและสร้างโปรเจกต์ใหม่แบบทีละขั้นตอน ผมคิดว่าผมได้หาสาเหตุแล้วว่าปัญหามาจากการเพิ่มบรรทัดต่อไปนี้ในไฟล์ webpack.config.js ของผม:

{ test: /\.tsx?$/, loader: "babel-loader" },

ดังนั้นดูเหมือนว่าปัญหาจะเกี่ยวข้องกับการใช้ Babel ด้วยเหตุผลบางประการ ฉันจะยังคงหาวิธีแก้ไขปัญหานี้ต่อไป เพราะฉันรู้สึกว่า Babel มีความสำคัญสำหรับการแปลง Typescript

คำตอบ #1

ดูเหมือนว่าคุณยังไม่ได้กำหนดว่า memo() คืออะไรที่นี่:

const _BuildingBlock = memo(BuildingBlock);

นี่ควรจะเป็นบางอย่างเช่น:

const _BuildingBlock = memo<Props>(BuildingBlock);

คุณสามารถตรวจสอบการกำหนดชนิดของ memo (คลิกขวาใน VSCode) เพื่อดูว่ามันคาดหวังชนิดใด