React Native開発のためにTypeScriptを導入する

投稿者: | 2020年4月26日

TypeScript の導入

古くから開発をやってきた人にとって JavaScript といえば幾らでもわかりにくいコードが書けてしまう「ヤバい」言語というイメージがあるのではないだろうか?

私もその一人で、できれば関わり合いになりたくない言語の一つである。

React Native で開発を行うにあたり、TypeScript を使うという選択肢がある。端的に言って JavaScript に Type の概念を導入した Microsoft が作り上げた言語である。

「JavaScript に」導入と言うことで分かるように TypeScript は JavaScript の拡張であり、JavaScript の全てを含んでいる。if 文や演算子など基本的な構文や要素は JavaScript のものを踏襲するのだ。.ts が TypeScript のソースコードの拡張子だが、中身は完全な JavaScript でも OK なのである。

node.js のインストール

  1. (入れていなければ)homebrew をインストール https://brew.sh/ を参照
  2. nodebrew のインストール 公式サイトは https://github.com/hokaccha/nodebrew にある。インストールは
 % curl -L git.io/nodebrew | perl - setup
  1. node のインストール 公式サイト https://nodejs.org/en/ で最新版等の確認を行っておく。

    インストール、使用するバージョンを決めたら以下ののようにしてインストールし、使うものを選択する。

 % nodebrew install 12.16.2
 % nodebrew use 12.16.2

TypeScript のインストール

npm を使ってインストールする。

npm install -g typescript

バージョン確認

% tsc -v
Version 3.8.3

TypeScript Playground

色々と実験をするのに Playground があった方がいいだろう。

ブラウザで開くページである。

https://www.typescriptlang.org/play/

Visual Studio Code

現代において vi や emacs のような editor で開発を行う人は少ない。Integratied Development Environment: IDE(統合開発環境)を使うのが主流だ。

TypeScript の場合、Visual Studio Code を使うのが一般的だ。

https://code.visualstudio.com/

他には JetBrains の IntelliJ IDEA が挙げられる。後者は時々使ってみようと思っている。

https://www.jetbrains.com/idea/

無料ではないからこそ、充実した機能がある。

コメントを残す