どーも、フリーランスエンジニアのyutaです。
前回、Reactの記事書きましたが、今回はプラスでReactにTypeScriptを導入しよう編です。
ちなみに前回記事が気になる方はこちらどうぞ。
目次
ReactをTypeScriptで書くメリット
ReactをTypeScriptで書くメリットとしては、TypeScriptによる「型宣言」によって、チームでの開発効率を上げつつ、安全なアプリケーションが作れることです。
TypeScriptとは一言でいうと「型宣言ができるJavaScript」です。
これまでaltJSというジャンルで、それぞれコンパイルすることでJavaScriptになる代替言語が多くありましたが、近年その中で後発ながらTypeScriptがシェアを占めるようになってきました。(それまではCoffee Scriptというのが多く使われてました。)
環境
前提
- Mac環境であること
- Homebrewがインストール済み
- nodebrewがインストール済み
Homebrew、nodebrewのインストール方法については記事にしてます。もしまだインストールしてなかったら参考にどうぞ。
Create React Appでサンプル作成
まずは下記コマンドを実行しプロジェクトを作成します。割りと色々なパッケージがインストールされますが、待ちます。
npx create-react-app hello-react-typescript --template typescript終わると下記のようにコマンド例を出してくれますので起動してみます。
Success! Created hello-react-typescript at /hello-react-typescript
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd hello-react-typescript
yarn start
Happy hacking!この中だとyarn startですね。実行します。
そうするとhttp://localhost:3000/が起動し、reactのロゴがくるくる回る画面になると思います。
可愛いですね。
ホットリロードが効いてますので、なにか変更を加えるとすぐに反映してくれます。
試しに画像に書いてあるとおりにsrc/App.tsxで「Learn React」の文言変えてみると分かりやすいです。
あと他にはyarn testでテストも走らせてくれます。
ただこれだけですど、tsやtsxファイルでTypeScript使ってはいるけども、特にTypeScriptで何か書いてるわけではないです。
これからちゃんとTypeScriptを使うためにも、React.js + TypeScriptの時の書き方を確認します。
React + TypeScriptでの書き方
型定義の使い方
親から子に渡すpropsについてはこんな感じで型定義することができます。サンプルのsrc/App.tsxに書いてみます。
type Props = {
linkName: string;
}
function App(props: Props) {
return (
<div className="App">
//省略
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
{props.linkName}
</a>
</header>
</div>
);
}内容としてはlinkNameというstring型のみを許可してるイメージです。
そうするとsrc/index.tsx側のAppでエラーが起きてます。
Propsのtypeが必要だよと怒られてるわけですね。チーム開発で自分が実装してない関数を使う場合に何を渡せば良いのか分かるので助かりますね。
ちなみにこれ、下記のようにany型を利用すると怒られなくなります。ただこれはTypeScriptのメリットが無くなるので、あまり使わないようにしましょう。だいたいチーム開発だとレビューで指摘されます。
function App(props: any) {
return (
);
}こんな感じでAppにちゃんと渡してあげるとコンパイルも正常に通ります。
ReactDOM.render(
<React.StrictMode>
<App linkName={"test"}/>
</React.StrictMode>,
document.getElementById('root')
);ちなみにlinkName= 1とするとこれもまた怒られます。分かりやすいですね。
これからもっと使っていきたいと思います。
最後に
最近のReactはReact Hooksというのも出て、クラスコンポーネントは使わなくなったりしてて、自分が使ってた頃と色々変わってきたなぁと。
使わなくなると置いていかれますね。。。
