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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

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

React.js

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

Q&A

0回答

2475閲覧

TypeScriptの'Type 'hoge' is not assignable to type 'IntrinsicAttributes'について

退会済みユーザー

退会済みユーザー

総合スコア0

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

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

React.js

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

0グッド

0クリップ

投稿2018/06/18 11:04

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もありましたが、うまくいきませんでした。

どなたかわかるかたいらっしゃればご教示願えませんでしょうか。
よろしくお願いします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問