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

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

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

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

React.js

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

Q&A

解決済

1回答

2749閲覧

react-reduxのconnectをtypescriptから使えない

m0a

総合スコア708

TypeScript

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

React.js

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

0グッド

0クリップ

投稿2017/07/06 05:41

編集2017/07/06 05:45

以下のような単純なコードを書きました

  • one.tsx

typescript

1import * as React from 'react'; 2import { connect, DispatchProp } from 'react-redux'; 3import { State } from '../reducers'; 4interface AppProps extends React.Props<State> { 5 test: string; 6} 7 8const mapStateToProps = (state: State, ownProps: AppProps): AppProps => ({ 9 test: state.test, 10 ...ownProps 11}); 12 13const App = (props: AppProps & DispatchProp<{}>) => { 14 props.dispatch({ type: 'test' }); 15 return (<h1> App test </h1>); 16}; 17export default connect(mapStateToProps)(App); 18
  • reducers/index.ts

typescript

1import { combineReducers } from 'redux'; 2 3function test(state: string = 'test', action: {}) { 4 return state; 5} 6export interface State { 7 test: string; 8} 9export default combineReducers({ 10 test 11});

上記 One コンポーネントを使おうとすると以下のようなエラーメッセージが出てしまいます。

error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<AppProps, ComponentState>> & Readonly<{ ...'. Type '{}' is not assignable to type 'Readonly<AppProps>'. Property 'test' is missing in type '{}'.

どうすればいいのか教えてください

開発環境は

create-react-app --scripts-version=react-scripts-ts

を用いて構築しております。

"@types/jest": "^20.0.2", "@types/node": "^8.0.7", "@types/react": "^15.0.34", "@types/react-dom": "^15.5.1", "react": "^15.6.1", "react-dom": "^15.6.1", "react-redux": "^5.0.5", "@types/react-redux": "^4.4.45", "@types/redux": "^3.6.0",

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

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

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

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

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

guest

回答1

0

自己解決

mapStateToPropsの書き方を変えることでエラーが通るようになりました。
正直根本原因がわからないんで、教えていただける方がいると助かります。

typecript

1const mapStateToProps = (state: State, ownProps: {}): AppProps => ({ 2 test: state.test, 3 ...ownProps 4}); 5

ownpropsを{}型に変えただけです。

投稿2017/07/06 11:13

m0a

総合スコア708

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問