###前提・実現したいこと
http://redux.js.org/docs/basics/
をtypescriptでやっているときに、おそらく型によるエラーが出て、解決できません。
(http://redux.js.org/docs/basics/UsageWithReact.html を実装しているときにエラーが出ました。)
###該当のソースコード
上のチュートリアルで作成したものから必要だと思われる部分を抜粋したものが以下となります。
typescript
1import * as React from 'react' 2import { render } from 'react-dom' 3import { createStore, Dispatch } from 'redux' 4import { Provider, connect } from 'react-redux' 5import * as _ from 'lodash' 6 7//actions 8interface SetVisibilytyAction{ 9 type: 'SET_VISIBILITY_FILTER', 10 filter: string 11} 12 13function setVisibilityFilter(filter: string) : SetVisibilytyAction{ 14 return { type: 'SET_VISIBILITY_FILTER', filter: filter }; 15} 16 17//reducers 18interface State{ 19 visibilityFilter: string 20} 21 22const initialState = { 23 visibilityFilter: 'SHOW_ALL' 24} 25 26function todoApp(state: State = initialState, action: SetVisibilytyAction){ 27 switch(action.type){ 28 case 'SET_VISIBILITY_FILTER': 29 return _.assign({}, state, { visibilityFilter: action.filter }) 30 default: 31 return state 32 } 33} 34 35//components 36interface LinkProp{ 37 active: boolean, 38 children: string, 39 onClick: () => void 40} 41 42const Link = ({active, children, onClick}: LinkProp )=> { 43 if(active){ 44 return <span>{children}</span> 45 } 46 return ( 47 <a href="#" onClick={ e => {e.preventDefault(); onClick()} }> 48 {children} 49 </a> 50 ) 51} 52 53//containers 54interface FilterLinkProp{ 55 filter: string, 56 children: string, 57 onClick: () => void 58} 59 60const mapStateToProps = (state: State, ownProps: FilterLinkProp) => { 61 return { 62 active: ownProps.filter === state.visibilityFilter 63 } 64} 65 66const mapDispatchToProps = (dispatch: Dispatch<SetVisibilytyAction>, ownProps: FilterLinkProp) => { 67 return { 68 onClick: () => { 69 dispatch(setVisibilityFilter(ownProps.filter)) 70 } 71 } 72} 73 74const FilterLink = connect( 75 mapStateToProps, 76 mapDispatchToProps 77)(Link) 78 79//store 80let store = createStore(todoApp) 81 82render( 83 <Provider store={store}> 84 <div> 85 <FilterLink filter="SHOW_ALL"> 86 All 87 </FilterLink> 88 </div> 89 </Provider>, 90 document.getElementById('root') 91)
###発生している問題・エラーメッセージ
そして、上記をwebpackした時のエラーが以下となります。
ERROR in ./js/dev/index.tsx (85,19): error TS2322: Type '{ filter: "SHOW_ALL"; children: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<LinkProp, ComponentState>> & Readonly<{ ...'. Type '{ filter: "SHOW_ALL"; children: string; }' is not assignable to type 'Readonly<LinkProp>'. Property 'active' is missing in type '{ filter: "SHOW_ALL"; children: string; }'.
###試したこと
FilterLink
のプロパティをLinkProp
に合わせたらうまく行きました
render( <Provider store={store}> <div> <FilterLink active={true} onClick={() => {}}> All </FilterLink> </div> </Provider>, document.getElementById('root') )
これよりFilterLink
のProp
がLinkProp
型になっているのだと思うのですが、これをFilterLinkProp
にする方法がわかりません。
もちろん
const FilterLink = connect( mapStateToProps, mapDispatchToProps )(Link) as React.ComponentClass<FilterLinkProp>
のようにキャストすることはできませんでした
###補足情報(言語/FW/ツール等のバージョンなど)
package.json
は
{ "name": "threeaster", "version": "1.0.0", "main": "index.js", "dependencies": { "@types/lodash": "^4.14.64", "@types/react": "^15.0.24", "@types/react-dom": "^15.5.0", "@types/react-redux": "^4.4.41", "@types/redux": "^3.6.0", "lodash": "^4.17.4", "react": "^15.5.4", "react-dom": "^15.5.4", "react-redux": "^5.0.5", "redux": "^3.6.0" }, "devDependencies": { "ts-loader": "^2.0.3", "typescript": "^2.3.2", "webpack": "^2.5.1" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
tsconfig.json
(コメントアウト削除)は
{ "compilerOptions": { "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */ "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ "strict": true /* Enable all strict type-checking options. */ } }
webpack.config.js
は
module.exports = { entry: "./js/dev/index.tsx", output: { path: __dirname + '/js/dist', filename: "bundle.js" }, resolve: { extensions: [".ts", ".tsx", ".js", ".json"] }, module: { loaders: [ { test: /\.tsx?$/, loader: "ts-loader" } ] }, externals: { "react": "React", "react-dom": "ReactDOM" } }
その他環境は
mac OSX Yosemite 10.10.5
tsc --version
=> Version 2.3.2
npm --version
=> 3.10.10
です。
よろしくお願いします
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/05 15:26