質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

30272閲覧

【TypeScript】Reactのコンポーネントに値を渡すとIntrinsicAttributesに代入できないと怒られる

moimoi_sushi

総合スコア26

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/07/10 14:24

編集2020/07/11 05:18

前提・実現したいこと

子コンポーネント(UI側)にデータを渡したいです。

発生している問題・エラーメッセージ

子コンポーネント(UI側)へ変数を入れると下記メッセージがVSCode上で指摘されます

Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'. Property 'result' does not exist on type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'

(7.11追記:↑すみません、エラー内容に修正ありです。テラテイルへ投稿後にProps側にもdammyType[]を代入していました。その場合エラーメッセージに「dammyType[]」の記載もされるようになっており記載もれしていました。)

上記のように怒られます。

該当のソースコード

containers/Element/element.tsx側

import React, { FC } from 'react'; import Element from '../../../components/pages/Element/element'; import dammyData, { dammyType } from '../../../seed/dammy'; const getData = (): dammyType[] => { //本来はデータをsortしてからreturnする処理が入る return dammyData; } const ElementContainer: FC = () => { const result = getData(); return <Element result={result} />; }; export default ElementContainer;

<Element result={result} />の「result={result}のresult=」に対して怒られています。

dammyData と { dammyType } ファイル中身は以下の通りです

const dammyData = [ { FoodGroup: 1, FoodNumber: '01001', id: 1, }, { FoodGroup: 2, FoodNumber: '01002', id: 2, }, ]; export interface dammyType { FoodGroup: number, FoodNumber: string, id: number } export default dammyData;

必要でない情報とは思いますが実際には2000個以上の40要素ずつのデータが格納されたものを扱う予定です。まずは簡易化して動かそうとしています。

試したこと

データのボリュームが大きくて分からなかったため簡易的なdammyデータで試しています。

補足情報(FW/ツールのバージョンなど)

React+TypeScriptです。
cssはEmotion
バックエンドはFirebaseを利用します

追記:Reactの型に"@types/react": "^16.9.0"を使っています。

追記1:<Element />側のソースコード

components/Element/element.tsx側

/** @jsx jsx */ import { Fragment, FC } from 'react'; import { css, jsx } from '@emotion/core'; import Header from '../../common/templates/header'; import Footer from '../../common/templates/footer'; import SocialBtn from '../../common/parts/button/social'; import StuffFilter from '../../common/parts/filter/stuffFilter'; import { Font } from 'components/common/styles/CssValue'; import { dammyType } from '../../../seed/dammy'; //cssの記述を省略 const Element: FC<dammyType[]> = ({result}) => ( <Fragment> <Header /> <div css={content}> <div css={titleH1}> //titleのテキスト </div> <div css={socialSpace}> <SocialBtn /> </div> <div css={article}> <p>       //記事のテキスト </p> </div> <div> //孫コンポーネント(<StuffFilter />)へ渡す予定ですがひとまずここでpropsを表示させたい {result} </div> </div> <Footer /> </Fragment> ); export default Element;

子コンポーネント側ではエラー表示はありませんが上記のようになっています。
追記:props側のresult、分割代入の形{result}へ修正しました。その場合の警告メッセージは以下の通りです。

Property 'result' does not exist on type 'dammyType[] & { children?: ReactNode; }'.

追記2:App.tsx側のソースコード追加

App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。依然として、質問のエラーは残っています。

Type '{}' is missing the following properties from type 'dammyType[]': length, pop, push, concat, and 28 more.ts(2740)

Appソース

1/** @jsx jsx */ 2import { FC } from 'react'; 3import { css, jsx } from '@emotion/core'; 4import { BrowserRouter, Switch, Route } from 'react-router-dom'; 5import { Font, Color } from './components/common/styles/CssValue'; 6 7import './components/common/styles/ress.css'; 8import Home from './components/pages/Home/home'; 9import ElementContainer from './containers/pages/Element/element'; 10 11//cssの省略 12 13const App: FC = () => ( 14 <div css={Global}> 15 <BrowserRouter> 16 <Switch> 17 <Route exact path="/"> 18 <Home /> 19 </Route> 20 <Route exact path="/elm"> 21 <ElementContainer /> 22 </Route> 23 </Switch> 24 </BrowserRouter> 25 </div> 26); 27export default App; 28

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mottox2

2020/07/10 20:18

子要素のElement側の型定義が不足している可能性があるので、Elementのソースも掲載してもらえますか?
moimoi_sushi

2020/07/11 04:02

指摘ありがとうございます、Element側のソースも載せました。
guest

回答1

0

ベストアンサー

Element コンポーネントの props の受け取り方の記載の仕方の問題かと思います。

まず、FCのジェネリクスの基本についてですが、

TypeScript

1const SomeComponent: FC<SomePropsType> = (props) => (

とした場合、props の型が SomePropsType です。

質問者さんのコードを見ると {result} の型を dammyType[] として見ており、当然 dammyType[] はリストなので、result というキーは存在せずエラーになっています。

以下のように props 用の型定義すれば受け取れるかと思います。

TypeScript

1const Element: FC<{result: dammyType[]}> = ({result}) => (

投稿2020/07/11 06:27

nerianighthawk

総合スコア544

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moimoi_sushi

2020/07/11 06:39

ありがとうございます!怒られなくなりました。 理解が足りておらずブランケットのところまで考慮できていませんでした。 コード自体は下記のようにinterfaceを用いてpropsを扱うことにしました。 interface dammyTypeProps { result: dammyType[] } const Element: FC<dammyTypeProps> = ({result}) => ( //略 );
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問