TypeScript初心者です。
エラーの意味がよくわからず、対処法がわからなくて困っています。
コードは以下のような感じです。
コード
子コンポーネント側
typescript
1// src/components/atoms/Txt/index.tsx 2import * as React from 'react'; 3import styled from 'styled-components/native'; 4import styledComponents from 'styled-components'; 5import styledComponentsTS from 'styled-components-ts'; 6import { Text } from 'react-native'; 7 8enum TagSize { 9 s, 10 m, 11 l 12} 13 14interface Props { 15 children?: React.ReactNode; 16 sizes?: TagSize; 17} 18 19const Txt: React.SFC<Props> = ({ children, sizes = TagSize.m, ...props }) => ( 20 <Wrapper size={sizes} {...props}> 21 {children} 22 </Wrapper> 23); 24export default Txt; 25 26interface StyledProps { 27 sizes?: TagSize; 28} 29 30const Wrapper = styledComponentsTS<StyledProps>(styledComponents(Text))` 31 font-size: ${p => tagSize[p.size]}; 32`; 33 34const tagSize = { 35 s: '10px', 36 m: '20px', 37 l: '30px' 38}; 39
親コンポーネント側
typescript
1// src/components/organisms/TodoList/index.tsx 2import Txt from '../../atoms/Txt/index'; 3 4// ~ 中略 ~ 5<Txt sizes="s">small text</Txt> 6
のようにすると以下のようなエラーが出ます。
error TS2339: Property 'size' does not exist on type 'ThemedStyledProps<TextProps, any>'. src/components/organisms/TodoList/index.tsx(81,8): error TS2322: Type '{ children: string; sizes: string; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'. Type '{ children: string; sizes: string; }' is not assignable to type 'Props'. Types of property 'sizes' are incompatible. Type 'string' is not assignable to type 'TagSize'. 19:44:59 - Compilation complete. Watching for file changes.
コードの意図としたいこと
一般的には<Txt sizes={10}>small text</Txt>
のようにして、親から子のフォントサイズなどを設定できるようにするのかと思われますが、atomic designの考えに則り、プロジェクト全体の統一感を出すために、s,m,lなどで指定できるようにしたいと思っています。
現状理解している(と思っている)こと
hoge is not assignable to typ piyo
というエラーはpiyo型と推論されたところにhoge型の値を代入しようとしているのエラーが吐かれている
わからないこと
- そもそも
IntrinsicAttributes
というのはなんなのか - どうすればエラーが表示されなくなるのか
ちなみに
似たような構造の以下のコンポーネントはエラーは表示されません。
どこに問題ががあるのか全くわかりません。
typescript
1import * as React from 'react'; 2import styled from 'styled-components/native'; 3import styledComponents from 'styled-components'; 4import styledComponentsTS from 'styled-components-ts'; 5import { Text } from 'react-native'; 6import { containPresenter } from '../../utils/HoC'; 7 8enum TagSize { 9 h1, 10 h2, 11 h3, 12 h4, 13 h5, 14 h6 15} 16 17interface Props { 18 children?: React.ReactNode; 19 tagSizeTypes?: TagSize; 20 presenter?: any; 21} 22 23const HeadingPresenter: React.SFC<Props> = ({ 24 children, 25 tagSizeTypes, 26 ...props 27}) => ( 28 <Wrapper types={tagSizeTypes} {...props}> 29 {children} 30 </Wrapper> 31); 32 33const HeadingContainer: React.SFC<Props> = ({ 34 presenter, 35 tagSizeTypes = TagSize.h2, 36 children, 37 ...props 38}) => { 39 return presenter({ tagSizeTypes, children, ...props }); 40}; 41 42const Heading = containPresenter(HeadingContainer, HeadingPresenter); 43export default Heading; 44 45interface StyledProps { 46 types?: TagSize; 47} 48 49const Wrapper = styledComponentsTS<StyledProps>(styledComponents(Text))` 50 font-size: ${p => tagSize[p.types]}; 51`; 52 53const tagSize = { 54 h1: '40px', 55 h2: '36px', 56 h3: '32px', 57 h4: '28px', 58 h5: '24px', 59 h6: '20px' 60};
また、奮闘する中でこんなPRもありましたが、うまくいきませんでした。
どなたかわかるかたいらっしゃればご教示願えませんでしょうか。
よろしくお願いします。
あなたの回答
tips
プレビュー