書くことは、タイプスクリプトでコンポーネントを反応させます

TypeScriptと反応強力な組み合わせされている

私は、人々がタイプスクリプトを書くことが多くのボイラー板を必要とすると思うので、人々がタイプスクリプトに引っ越すのを恐れているとわかりました.

私を信じて、私はそれらの人々の一人だった.私は、同じように私がtypescriptに会うまで、考えました.私は最初にそれがすべてのタイプとすべてで少し脅迫的であったということに同意します、しかし、一旦それの掛け金を得るならば、それは楽しみです.

したら、JavaScriptに戻っていくつかの力を失ったように感じる😅.少なくとも、それは私が私の経験で見つけたものです.

私は反応を使用して入力スクリプトを使用しての恐怖を取り出して、あなたがそんなに脅迫していない方法で起動するのに役立ちます.

我々は、反応とtypescriptを使用して機能的なコンポーネントを書くつもりです.

タイプスクリプトによる機能部品

JavaScriptのように、同じスクリプトで機能的なコンポーネントを作成できます.

主な違いはFC ファンクションコンポーネントを表すインターフェイスです.これを使用して、これは通常の関数ではなく、反応関数コンポーネントであることを説明します.

必要に応じて、インターフェイスを定義し、ジェネリックに渡すことによって小道具の型を追加できますFC .

機能的なコンポーネントは、通常、次のようになります.

import React, { FC } from 'react';

interface TitleProps {
  title: string;
}

const Title: FC<TitleProps> = ({ title, subtitle }) => {
  return (
    <>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </>
  );
};

export default Title;

今、我々は先に行くと我々の反応アプリケーションでこのコンポーネントを使用する場合は、我々はいくつかの利点を得る

コードの自動補完

我々のエディタでコンパイルエラー
プロパティを忘れたり、間違った型を使用します.

ノート

タイプスクリプトのジェネリック型は
パラメータ.括弧の代わりにジェネリック型
角度ブラケットを使用(<>) .

のためにFC インターフェイスは、任意のパスを渡す必要はありません
パラメータを使用すると、
角括弧を省略したときに
どんな小道具も受け付けません.

 const Title: FC = () => {
  // ...
 } 

オプション小道具

あなたがコンポーネントに渡すすべての小道具が必要であるというわけではありません.

インターフェイスにクエスチョンマークを追加することで、プロップをオプションにすることができます.

 interface TitleProps {
  title: string; // required
  subtitle?: string; // optional
 }

これにより、プロップを省略することができます.

FCインターフェイスの代替案

あなたがタイプスクリプトを知っているならば、あなたはなぜ私が関数パラメタ自体に支柱インタフェースを適用していないかについて考えるかもしれません.

const Title = ({ title, subtitle }: TitleProps) => {
  // ...
}

この構文はうまく動作し、このようなスクリプトで関数を書くことができます.

しかし、なぜ一般的なタイプを使用したいのかについての特定の理由がありますFC 機能コンポーネントによって要求されるすべての型が付属しているので.

これは暗黙のうちに含みますchildren プロップこれは、任意の機能コンポーネントで定義されたデフォルトのプロップになりますFC インターフェイスは、我々のインターフェイスに追加する必要はありません.

import React, { FC } from 'react';

interface TitleProps {
  title: string;
  subtitle?: string;
}

const Title: FC<TitleProps> = ({ title, subtitle, children }) => {
  return (
    <>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
      <div>{children}</div>
    </>
  );
};

export default Title;

時には不利だFC インターフェイスは常に子プロセスを追加します.

関数コンポーネントの型セーフ状態

機能コンポーネントの状態に安全性を持たせるには、必ずしもコードを変更する必要はありませんuseState フックは、それを初期化するために使用する値から型を継承します.

より複雑な型を使用するか、状態を初期化しない場合は、次のように型を渡すことができます.

const [title, setTitle] = useState<string>(null);