Reactのコンポーネントで分割代入した仮引数が型定義をしてもany型になる

Question

実現したいこと

　Reactで、配列を受け取り、それをmap関数で処理しJSXを返す関数を実装したい。
仮引数は分割代入で宣言し、stringを持つ配列、あるいはnumberを持つ配列どちらかであると定義したい。

発生している問題・分からないこと

　分割代入を行い型定義をしたはずが、仮引数の型がany型となる。関数本体で引数を呼び出しても見つからないとエラーが出る。

エラーメッセージ

[{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "7010",
	"severity": 8,
	"message": "'Test' には戻り値の型の注釈がないため、戻り値の型は暗黙的に 'any' になります。",
	"source": "ts",
	"startLineNumber": 1,
	"startColumn": 25,
	"endLineNumber": 1,
	"endColumn": 29
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "2842",
	"severity": 8,
	"message": "'(Missing)' は、'props' の未使用の名前変更です。型の注釈として使用するつもりでしたか?",
	"source": "ts",
	"startLineNumber": 2,
	"startColumn": 11,
	"endLineNumber": 2,
	"endColumn": 11,
	"relatedInformation": [
		{
			"startLineNumber": 2,
			"startColumn": 11,
			"endLineNumber": 2,
			"endColumn": 12,
			"message": "ここにパラメーター全体の型を追加することによってのみ、'props' の型を書き込むことができます。",
			"resource": "/d:/dev/runnersheet/src/app/Test.tsx"
		}
	]
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "7031",
	"severity": 8,
	"message": "バインド要素 '(Missing)' には暗黙的に 'any' 型が含まれます。",
	"source": "ts",
	"startLineNumber": 2,
	"startColumn": 11,
	"endLineNumber": 2,
	"endColumn": 11
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "1003",
	"severity": 8,
	"message": "識別子が必要です。",
	"source": "ts",
	"startLineNumber": 2,
	"startColumn": 12,
	"endLineNumber": 2,
	"endColumn": 13
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "7053",
	"severity": 8,
	"message": "型 'any' の式を使用して型 'Number' にインデックスを付けることはできないため、要素は暗黙的に 'any' 型になります。",
	"source": "ts",
	"startLineNumber": 2,
	"startColumn": 12,
	"endLineNumber": 2,
	"endColumn": 31
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "2693",
	"severity": 8,
	"message": "'string' は型のみを参照しますが、ここで値として使用されています。",
	"source": "ts",
	"startLineNumber": 2,
	"startColumn": 13,
	"endLineNumber": 2,
	"endColumn": 19
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "2693",
	"severity": 8,
	"message": "'number' は型のみを参照しますが、ここで値として使用されています。",
	"source": "ts",
	"startLineNumber": 2,
	"startColumn": 22,
	"endLineNumber": 2,
	"endColumn": 28
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "1011",
	"severity": 8,
	"message": "要素アクセス式では、引数を取る必要があります。",
	"source": "ts",
	"startLineNumber": 2,
	"startColumn": 30,
	"endLineNumber": 2,
	"endColumn": 30
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "1128",
	"severity": 8,
	"message": "宣言またはステートメントが必要です。",
	"source": "ts",
	"startLineNumber": 3,
	"startColumn": 1,
	"endLineNumber": 3,
	"endColumn": 2
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "1128",
	"severity": 8,
	"message": "宣言またはステートメントが必要です。",
	"source": "ts",
	"startLineNumber": 3,
	"startColumn": 2,
	"endLineNumber": 3,
	"endColumn": 3
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "2304",
	"severity": 8,
	"message": "名前 'props' が見つかりません。",
	"source": "ts",
	"startLineNumber": 4,
	"startColumn": 5,
	"endLineNumber": 4,
	"endColumn": 10
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "パラメーター 'data' の型は暗黙的に 'any' になります。",
	"source": "ts",
	"startLineNumber": 4,
	"startColumn": 16,
	"endLineNumber": 4,
	"endColumn": 20
},{
	"resource": "/d:/dev/runnersheet/src/app/Test.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "パラメーター 'i' の型は暗黙的に 'any' になります。",
	"source": "ts",
	"startLineNumber": 4,
	"startColumn": 22,
	"endLineNumber": 4,
	"endColumn": 23
}]

該当のソースコード

export default function Test({
    props: (string | number)[]
}) {
    props.map((data, i) => (data));
}
// propsの型がany型となる

export default function Test(
    children: { props: (string | number)[] }
) {
    const { props } = children;
    props.map((data, i) => (data));
}
// ちゃんと型定義も反映されているが、いちいちchildrenの宣言をするのは手間なので避けたい

type TestProps = (string | number)[];

export default function Test({
    props: TestProps
}) {
    props.map((data, i) => (data));
}
// 先に型定義したらどうかと思ったらそもそもpropsが見つからないようだ。

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

　create-next-appコマンドで作ったフォルダだが、以前のエラーの際に「npm i」で再インストールしたら直った経緯があった、今回も試したがエラー改善にはならなかった。

補足

インストールされているパッケージ
├── @types/node@20.12.12
├── @types/react-dom@18.3.0
├── @types/react@18.3.2
├── eslint-config-next@14.2.3

　なお不具合が発生する前にvscodeのショートカットを試しに使っており、それが悪さをしているのかとも考えた。新しいファイルを作成（ctrl+win+alt+N）を誤ってctrl+shit+alt+Nなどと入力していた。関係はないと思うが念のため。

　フォルダを完全に削除しcreate-next-appで再度フォルダを作成しなおす、vscodeをアンインストールし再インストールするなどしてもだめだった。

├── eslint@8.57.0
├── next@14.2.3
├── react-dom@18.3.1
├── react@18.3.1
└── typescript@5.4.5

Answer 1

　{props} : 型と表記しなければいけないところを、{props : 型}と表記しており、エラーが出ていました。
今は解決しました。