将 ReactJS 组件导入到 typescript 组件

问：

背景：我正在处理一个现有项目，该项目已经有一些可用或在 ReactJS 中创建的组件。最近，我们决定使用 React 迁移到 TypeScript。现在，我正在尝试弄清楚如何将现有组件导入到新的打字稿组件中。这个博客帮助我弄清楚了如何做到这一点。但是我无法让它适用于我的项目中可用的某些组件。

注意：下面给出的代码块是为了解释上下文，现在是我们如何使用它。

下面的 ReactJS 组件已经存在于项目中，文件名：SelectOption.js

function SelectOption({
  list,
  defaultValue,
  placeholder,
  inputName,
  testid,
  isRequired,
  propertyID,
  propertyName,
}) {
  return (
    <div>
      <label
        htmlFor={`${testid}.id`}
        slot='label'
        className={Styles.label_padding}
      >
        {Resources.TIME_OFF.BATCH_ACTIONS_WORLKFLOW_APP.TIME_OFF_TYPE}
      </label>
      <select
        id={`${testid}.id`}
        name={inputName}
      >
        <option  value=''>
          {placeholder}
        </option>
        {list.map((item) => (
          <option
            value={item[propertyID]}
            key={item[propertyID]}
          >
            {item[propertyName]}
          </option>
        ))}
      </select>
    </div>
  );
}

export { SelectOption };

我创建了下面的声明文件，使其类型兼容并将其导入到新的打字稿组件中，文件名：SelectOption.d.ts

type listItem = { ID: number; Name: string };

type listItems = listItem[];
function SelectOption({
  list: listItems,
  defaultValue: number,
  placeholder: string,
  inputName: string,
  testid: string,
  isRequired: boolean,
  propertyID: string,
  propertyName: string
}): JSX.Element;

export {SelectOption};

下面是新的 Typescript 组件

import { SelectOption } from '../../shared/components/SelectOption/SelectOption'

export function NewTypeScriptComponent() {
    const listItems: Array<{ ID: number; Name: string }> = [
        { ID: 0, Name: 'Available' },
        { ID: 1, Name: 'Ready' },
        { ID: 2, Name: 'Started' },
    ];
    return (
        <section>
            <div>
                <SelectOption
                    list={listItems}
                    defaultValue={0}
                    placeholder={'type'}
                    inputName={''}
                    testid={true}
                    isRequired={true}
                    propertyID='ID'
                    propertyName='Name'
                />
            </div>
        </section>
    );
}

功能工作正常。我可以看到下拉列表正确地列出了新组件中的给定值，但它给出了一个错误，如下图所示

如果我评论/删除第一个参数（列表），那么第二个参数（defaultValue）将显示相同的错误

任何帮助将不胜感激，以了解我在这里做错了什么。 还有一个问题：这是将 ReactJS 组件导入打字稿的好方法吗？ 提前致谢。