反応とタイプスクリプトから始める

WebサイトとWebアプリケーションの開発になると反応し、TypeScriptは素晴らしい組み合わせになります.素晴らしいユーザーインターフェイスを作成し、TypeScriptの能力を入力する私たちのコードをチェックするには、反応の焦点を使用して、それは決して簡単に素晴らしいユーザーエクスペリエンスを開発することはなかったよ.

必要条件

始める前にNODEJSとNPMをインストールする必要があります.試みhere あなたのコンピュータでそれをインストールする方法についての指示を見つけるために.
また、反応を使用して知識のビットを持っている必要があります.そうでなければ、私は非常にバニラJavaScriptを使用して反応を学習を開始することをお勧めします.

クリエイトアプリ

Facebookの作成反応アプリは素晴らしい開発体験の反応を提供しているプレビューです.すぐにコードを書き始めることができます.
ドキュメントをチェックするhere あなたが質問をしている場合やタッチの深さに深くどのようにツールが動作するようにしたい.
要約では、アプリケーションを作成する我々のための完全な開発環境を作成する反応.それは設定し、私たちのためにすべての我々が集中する必要があるビルドツールの設定を隠す私たちのコードです.ここではいくつかのツールをcraは(作成反応アプリ)を設定します.

Babel

Webpack

ESLint

TypeScript

私たちのtypescript/反応開発環境を作成するには、このツールを使用してみましょう.次のコマンドを使用して新しいTypeScript反応アプリを生成します.

npx create-react-app my-app --template typescript

糸を使用する場合は、次のコマンドを使用します.

yarn create react-app my-app --template typescript

ツールが実行を終えたら、ディレクトリをmy-app コマンドを実行するnpm start あなたの開発環境をスピンします.一旦それがロードされるならば、我々はlocalhostを見なければなりません:3000は開きます.

フォルダ構造

を作成するアプリの足場を反応folder structure 私たちのためのアプリケーションの場合は、アイデアから生産に行くに書き込む必要があるコードの量を最小限に抑えます.
以下に注意してください.

-パブリック/インデックス。HTML -これは、作成された反応アプリの隠しツールで生成されたバンドルを消費するHTMLファイルです。

src/index.tsx - これはTypeScriptエントリポイントファイルです.すべてのプロジェクトの依存関係は、このファイルを使用して、Webpack(CRAによって目に見えないものに設定されている)によってマップされます.生成されたバンドルをpublic/index.html . このファイルにはいくつかの責任があります.最も重要なのは、

import 主な反応コンポーネント

アプリケーションコンポーネントをDOMにReactDom.render()

src/App.tsx - これは、メインの反応コンポーネントです.The .tsx 拡張子は、ファイルが両方のtypescriptとjsxを使用していることを伝えます.これは、私たちのアプリケーションでは、DOCTomによってreactdomにレンダリングされている主要なコンポーネントです.私たちはこのファイルの中でほとんどの時間を使います.

tsconfig.json - これはタイプスクリプト設定ファイルです.このファイルは、我々のために生成反応アプリによって生成され、我々は自由に我々のニーズに合わせて、この構成を自由に編集することができます.

こんにちは、世界-タイプスクリプトと反応で

コーディングしましょう.
物事を整理して新しいフォルダを作るsrc/components と新しいコンポーネントを作成します.src/components/HelloWorld.tsx . このファイルでは、2行のコードを書きます.

const HelloWorld = () => <h1>Hello, World!</h1>
export default HelloWorld

最初の行は新しいコンポーネントを定義します.それは単にいくつかのJSXを返す関数です.この場合、それは私たちの“こんにちは、世界です!”見出しタグ.2行目はコンポーネントをエクスポートし、他のモジュールがインポートできるようにします.
このコンポーネントをインポートして使用するにはsrc/App.tsx 次の手順を実行します.

含めるimport HelloWorld from './components/HelloWorld' ファイルの一番上にコンポーネントをインポートするには

コンポーネントを使用してコンポーネントを使用して<HelloWorld /> .

リファクタリング後App.tsx 以下のようになります.

import './App.css';
import HelloWorld from './components/HelloWorld'

const App = () => {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

上の例では、デフォルトのスタイルを残し、HelloWorldコンポーネントをインポートし、App だから<HelloWorld /> .

ビットスクリプトの追加

いくつかのtypescript機能を使用して、コードの安全性を高めましょう.
これが我々のsrc/components/HelloWorld.tsx 今のように見えます.

const HelloWorld = () => <h1>Hello, World!</h1>
export default HelloWorld

TypeScriptの巨大な利点は、実行時にコードを実行する前にエラーをキャッチするのに役立つことです.コードにバグを紹介しましょう.
HelloWorldコンポーネントをリファクタリングします.

const HelloWorld = () => "Hello, World!"
export default HelloWorld

これは有効なJavaScriptですが、有効な反応はありません.機能コンポーネントはJSX(またはnull)を返さなければなりません.文字列を返すことはできません.我々は、このエラーを認識して作成するときに我々のコードを構築しようとするアプリケーションを反応させる.

いくつかのタイプスクリプト機能を使用するためにコードをリファクタリングしましょう.

import { FC } from 'react'
const HelloWorld: FC = () => "Hello, World!"
export default HelloWorld

The import ステートメント関数の型をインポートするFC , そして、それが有効なJSXを返すことを確実とするために、我々の機能的な構成要素をタイプするのを許します.機能を入力することで、我々のエディタはすぐに私たちのエラーを表示することができます.クリックhere typescriptの機能をタイプすることの詳細については.

タイプスクリプトは、私たちが戻り型のstring 機能部品に.今、このスクリプトは私たちにこのエラーを示しました.

import { FC } from 'react'
const HelloWorld: FC = () => <h1>Hello, World!</h1>
export default HelloWorld

関数を修正してJSXを返します.HelloWorld TypeScriptの型チェックを渡し、エラーはスローされません.結果として、我々のプロジェクトは構築し、再び動作します.

タイプスクリプトの利点

前の例に示すように、TypeScriptはコードエディターを離れる前にエラーをキャッチするのに役立ちます.TypeScriptは、あなたが書くようにアクティブにコードをデバッグするので、これはより速い発展に終わります.ランタイム中にエラーを引き起こす誤ったエラーよりも愚かなエラーをすぐにキャッチします.
タイプを強制する方法が私たちが早くエラーを捕えるのを助けることができる方法のもう一つの例を示しましょう.
新しい反応コンポーネントを作成します.List . この新しいコンポーネントは、プロップとして文字列データの配列を取り、<ul> タグとデータのリストを繰り返します<li> データの各部分について.
ここでは、このコンポーネントの私のバージョンは、より多くのタイプセーフティTypesScriptから含まれることができるものです.src/components/List.tsx

import { FC } from 'react'

const List: FC<{ data: string[] }> = ({ data }) => (
  <ul>
    {data.map(item => <li>{item}</li>)}
  </ul>
)

export default List

我々の前の例と同じように、我々は輸入しますFC からreact そして、我々の機能を入力するために使用します.我々がしていることは、我々のためにタイプを定めることですdata プロップこの例ではdata はarray 文字列.それがどのように文書化するかに注意してください.これは、typescriptの巨大な利点です.
では、このコンポーネントをsrc/App.tsx , それをデータの配列に渡し、少しより多くのタイプスクリプトに振りかけてください.src/App.tsx

import './App.css';
import { FC } from 'react'
import HelloWorld from './components/HelloWorld'
import List from './components/List'

const avengers = [
  'Captain America',
  'Iron Man',
  'Black Widow',
  'Thor',
  'Hawkeye',
]

const App: FC = () => {
  return (
    <div className="App">
      <HelloWorld />
      <List data={avengers} />
    </div>
  );
}

export default App;

私たちはavengers Avengersチームのメンバー5人.その後、データのこのリストをプロパティとして渡しましたList . この例は定義しているので動作しますList 文字列の配列を受け入れる.タイプスクリプトエラーを引き起こして、それをより多様な配列に送りましょう.

import './App.css';
import { FC } from 'react'
import HelloWorld from './components/HelloWorld'
import List from './components/List'

const avengers = [
  'Captain America',
  'Iron Man',
  'Black Widow',
  'Thor',
  'Hawkeye',
  {
    name: 'Vision',
  },
  {
    name: 'Hulk',
    color: 'green',
  },
]

const App: FC = () => {
  return (
    <div className="App">
      <HelloWorld />
      <List data={avengers} />
    </div>
  );
}

export default App;

我々は、2つの新しい英雄を加えましたavengers 配列、ビジョン、ハルクですが、文字列ではなくオブジェクトとして追加しました.これにより、エラーがスローされます.

タイプスクリプトは、我々のデータがdata プロップそれも、この支柱が定められるところで、我々に正確に指摘します.ストリングの代わりにオブジェクトの配列を送るべきであると仮定しましょう.すべてが再び動くように、我々のファイルをリファクタリングしましょう.src/App.tsx

import './App.css';
import { FC } from 'react'
import HelloWorld from './components/HelloWorld'
import List from './components/List'

const avengers = [
  { name: 'Captain America' },
  { name: 'Iron Man' },
  { name: 'Black Widow' },
  { name: 'Thor' },
  { name: 'Hawkeye' },
  { name: 'Vision' },
  { name: 'Hulk' },
]

const App: FC = () => {
  return (
    <div className="App">
      <HelloWorld />
      <List data={avengers} />
    </div>
  );
}

export default App;

src/components/List.tsx

import { FC } from 'react'

const List: FC<{ data: { name: string }[] }> = ({ data }) => (
  <ul>
    {data.map(({ name }) => <li>{name}</li>)}
  </ul>
)

export default List

我々は、我々を変えましたList コンポーネント定義を明示的に型付けし、文字列型nameプロパティを含むオブジェクトの配列を明示します.明示的にタイピングdata Prop、我々は、このコンポーネントは、これとは異なる形のこのコンポーネントを送信する場合は、その正確な形状を知ってキャッチすることができます.

結論

JavaScriptの上にタイプ層を加えることによって、TypeScriptは正常に開発者の時間と欲求不満を保存します.確かにあなたの反応のアプリケーションを入力することを学ぶためにはるかに残っているが、これは良いプラットフォームである必要がありますが、プールの深い端には、話しを開始する必要があります.
ハッピーコーディング!
このドットラボは、企業のデジタル変換の努力を実現支援に焦点を当てた現代のWebコンサルティングです.専門家の建築指導、訓練、またはコンサルティング、角度、Vue、Webコンポーネント、Graphql、ノード、バゼル、またはポリマー、訪問thisdotlabs.com .
このドットメディアは、すべての包括的で教育的なウェブを作成することに集中します.我々は最新のイベント、ポッドキャスト、および無料のコンテンツを介して近代的なWebの進歩と最新の状態に保つ.学ぶthisdot.co .