タイプセーフを使用してTypeセーフ

少し背景
過去4ヶ月間、私は反応を学んできたし、プロのコンテキストでアプリケーションを構築するために使用します.スパイスをするために、私はTypesScriptを使っていました.タイプシステムTypeScriptの提供は、JavaScriptの世界から来て驚異的です.つを組み合わせるだけで簡単に(それは簡単になると言っていない)すべてになります.この記事はあなたのすべての問題を解決するつもりはありません.これは、あまりにも圧倒されない方法で、反応とTSに優しい紹介を与える試みです.
幸せな悲しい瞬間もたくさんありました.悲しいことに、私は自分のキャリアの選択を考えていた(農家であると思っていた)ので、私はエラーメッセージを理解し、その周りを投げることができなかったのでany タイプ(私のアドバイスをとってください)、あなたがデータ型が何であるかについてわかっているならば、これを試みることさえ考えないでください😂). また、私が間違いを避けるのを助けたので、私はTyposのように愚かに分類して、私が配列であると思うものの配列メソッドを使用するが、実際にオブジェクトで、JavaScriptで多くの時間を節約するのを保存します.
私はJSについて考えるのが好きです、そして、それは彼らの子供が間違いをするのを見る親です、そして、「meh ...彼らは彼らの間違いから学びます」、そして、彼らが滑らかな幼児期を持つことを確認するために最善を尽くす過保護親としてTSをします.あなたがこのトピックについてのあなたのヒントのいくつかを共有したいならば、コメントでそれを共有してください😁.
あなたが言うことができるように、私はこれらの2つの話題の専門家ではありません、しかし、私は私のコードの品質を改善しようとする試みで新しいものを学んでいます.それは、包括的でありません、ちょうど短くて、甘い.私は、私がより深い理解を得るのを助けた資源へのリンクを残すつもりです.

地上工事
私がこれを書いている仮定は、あなたが反応で精通していて、ちょうどTSで始まって、両方の世界を最大限に利用したいということです.私たちは使用するつもりですcreate-react-app また、次のようなフレームワークやライブラリを使用している間、プロジェクトでTSを使用することは可能です.JSとギャツビー.
TypesScriptで新しい反応プロジェクトを開始するのはかなり簡単です.

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

既存のプロジェクトにTSを追加する場合は、次の依存関係を追加し、名前を変更します.ジェイ.jsxファイルを.TSXこれは、私たちがプロジェクトのタイプスクリプトを利用するのを許します.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

あなたが電子商取引アプリを働いていると言いましょう、そして、あなたは製品構成要素を作成したいです.このコンポーネントは、いくつかの小道具、IDなどの製品の詳細、名前、説明、価格の可用性とイメージが表示されます.例は少し粗いかもしれませんが、ここで私に耐えてください.
十分な話、ちょうどコードに飛び込んでみましょう.

インタフェースとタイプ
インターフェイスと型は、データの構造、または「青写真」を記述するのに使用されます.この場合は、製品ですので、先に行きましょうし、インターフェイスを作成しましょう.

interface ProductProps {
    id: string;
    name: string;
    description: string;
    price: number;
    availability: "SOLD OUT" | "IN STOCK";
    imageUrl: string | null; // this means imageUrl can return either a string or null
}

// this is how the type would look like
type ProductProps = {
    id: string
    name: string;
    description: string;
    price: number;
    availability: "SOLD OUT" | "IN STOCK";
    imageUrl: string | null;
}

私は正直です、私は2つの違いを知りません.たくさんのgooglingの後さえ.しかし、彼らは私がそれを理解する方法から、同じくらい働きます.違いはそれらの構文と実装です.あなたがこの違いを理解することが起こるならば、コメントで私にそれを説明してください

反応する.FCまたはFC
インターフェイス/タイプ準備ができたので、製品コンポーネントを作成しましょう.私はすべてのシンプルでクリーンなので、クラスのコンポーネントに機能的なコンポーネントを好む….ああ、フックも.😀.
ここで機能的なコンポーネントを作りましょう.それはいくつかの小道具も期待することを忘れないようにしましょう.ProductProps ,

import React, { FC } from 'react'

export interface ProductProps {/**...*/}

export const ProductComponent: FC<ProductProps> = (props) => {
    return (
        {/** some jsx here... div soup probably, guilty as charged 😂*/}
    )
}

上の例からFC 機能コンポーネントと<ProductProps> コンポーネントに渡される小道具を表します.小道具を構造化するのを選ぶかもしれません、そして、あなたはintellisenseがあなたのインターフェースまたはタイプの中で見つけられる特性を示唆すると気がつきます.

APIリクエスト
あなたの反応アプリは、おそらくAPIと通信し、いくつかのデータを送信または受信します.何がそれにあるか推測しようとする代わりに、このデータに何があるかを知っていることはうれしいです.正しい?それで、あなたがここで流すかもしれない涙を減らすようにしましょう😅.
外部ライブラリを用いないネットワーク要求の共通パターン法fetch . 私は人生を変える方法について話したいreact-query しかし、それは別の日のためです.
ネットワーク要求がなされたとき、それは約束を返します.特定のタイプのデータを返すという約束を拡張できます.この例では、型のオブジェクトのリストを受け取ります.

export const getProducts = async (): Promise<ProductProps[]> =>
  await fetch('https://some_backend.api/products').then(data => data.json())

APIを呼び出す
あなたがこれまでに私と一緒に耐えるならば、我々は現在、ほとんど行われます.
最後に残ったのは、useState フック.useState は主にコンポーネントの状態を管理するために使用されます.我々は、我々が作成した関数を使用してデータを取得するコンポーネントを持つことによって、すべてをまとめますuseEffect (マウント時にのみ実行したいので依存関係はありませんでした.

import React, { FC, useState, useEffect } from 'react';
import { ProductProps, ProductComponent } from './ProductComponent';
import { getProducts } from './api/products';

const ProductsPage: FC = () => {
    const [products, setProducts] = useState<ProductProps[]>([])
    /** you could probably create an abstraction of this into a custom hook or use react-query but let's keep this simple...*/
    const [error, setError] = useState(false)
    const [isLoading, setLoading] = useState(false)

    useEffect(() => {
    setLoading(true)
    getProducts()
      .then(data => {
        setProducts(data)
        setLoading(false)
      })
      .catch(error => {
        setLoading(false)
        setError(error)
      })
  }, [])

    return(
        <>
            <h1>Next Gen Consoles</h1>
            <p>This is a dummy example </p>
            {products.length ? 
                    products.map(product => (
                    <ProductComponent key={product.id} {...product} />
                        ))
                : <p>Check in again pretty soon</p>}    
        </>
    )
}

... それは今のところです.私は、あなたがタイプ安全な反応アプリケーションをつくるので、この記事があなたを助けたことを望みます..less any コードベースの型😉.

資源
The TypeScript Handbook
Write a React component with TypeScript フランツによって
React + TypeScript Cheatsheets
Ultimate React Components patterns with TypeScript 2.8
React Hooks in TypeScript