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

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

ただいまの
回答率

90.34%

  • React.js

    913questions

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

  • TypeScript

    376questions

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

  • React Native

    197questions

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

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 441

cloudspider

score 79

TypeScript初心者です。
エラーの意味がよくわからず、対処法がわからなくて困っています。

コードは以下のような感じです。

 コード

子コンポーネント側

// src/components/atoms/Txt/index.tsx
import * as React from 'react';
import styled from 'styled-components/native';
import styledComponents from 'styled-components';
import styledComponentsTS from 'styled-components-ts';
import { Text } from 'react-native';

enum TagSize {
    s,
    m,
    l
}

interface Props {
    children?: React.ReactNode;
    sizes?: TagSize;
}

const Txt: React.SFC<Props> = ({ children, sizes = TagSize.m, ...props }) => (
    <Wrapper size={sizes} {...props}>
        {children}
    </Wrapper>
);
export default Txt;

interface StyledProps {
    sizes?: TagSize;
}

const Wrapper = styledComponentsTS<StyledProps>(styledComponents(Text))`
    font-size: ${p => tagSize[p.size]};
`;

const tagSize = {
    s: '10px',
    m: '20px',
    l: '30px'
};

親コンポーネント側

// src/components/organisms/TodoList/index.tsx
import Txt from '../../atoms/Txt/index';

// ~ 中略 ~
<Txt sizes="s">small text</Txt>

のようにすると以下のようなエラーが出ます。

 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というのはなんなのか
  • どうすればエラーが表示されなくなるのか

 ちなみに

似たような構造の以下のコンポーネントはエラーは表示されません。
どこに問題ががあるのか全くわかりません。

import * as React from 'react';
import styled from 'styled-components/native';
import styledComponents from 'styled-components';
import styledComponentsTS from 'styled-components-ts';
import { Text } from 'react-native';
import { containPresenter } from '../../utils/HoC';

enum TagSize {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
}

interface Props {
    children?: React.ReactNode;
    tagSizeTypes?: TagSize;
    presenter?: any;
}

const HeadingPresenter: React.SFC<Props> = ({
    children,
    tagSizeTypes,
    ...props
}) => (
    <Wrapper types={tagSizeTypes} {...props}>
        {children}
    </Wrapper>
);

const HeadingContainer: React.SFC<Props> = ({
    presenter,
    tagSizeTypes = TagSize.h2,
    children,
    ...props
}) => {
    return presenter({ tagSizeTypes, children, ...props });
};

const Heading = containPresenter(HeadingContainer, HeadingPresenter);
export default Heading;

interface StyledProps {
    types?: TagSize;
}

const Wrapper = styledComponentsTS<StyledProps>(styledComponents(Text))`
  font-size: ${p => tagSize[p.types]};
`;

const tagSize = {
    h1: '40px',
    h2: '36px',
    h3: '32px',
    h4: '28px',
    h5: '24px',
    h6: '20px'
};

また、奮闘する中でこんなPRもありましたが、うまくいきませんでした。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • React.js

    913questions

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

  • TypeScript

    376questions

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

  • React Native

    197questions

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