TypeScript

TypeScriptのはじめ方


どうも、ささおです。

今回はTypeScriptのはじめ方をハンズオン形式で書いていきます。

TypeScriptをインストール

まずは作業用ディレクトリを作成して、
作業用ディレクトリに移動してください。

次にインストールするTypeScriptのバージョンを確認します。

すると、最新のバージョンが確認できます。

次に、TypeScriptをインストールしていきます。
先ほど確認した最新バージョンを指定します。

–save-devをつけるとローカルインストールかつpackage.json の devDependencies に追記されるようです。下記の記事がとてもわかりやすいです
勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)

これでTypeScriptのインストールが完了しました。

TypeScriptを使う

次に実際にTypeScriptを使っていきます。

TypeScriptファイルを実行するには以下の流れを踏みます
<div class=”concept-box1″><p>

  1. TypeScriptファイルを作成する
  2. TypeScriptファイルをJavaScriptファイルへコンパイル(トランスパイル)する
  3. JavaScriptファイルを実行する

</p></div>

TypeScriptファイルを作成する

hello.tsというファイルを作成し、以下のコードを書いてください。

TypeScriptファイルをコンパイル(トランスパイル)する

次に作成したファイルをコンパイルします。
tscコマンドを使うことでコンパイルできます。
tscコマンドは node_modules/.bin内にあるので、./node_modules/.bin/tscで実行します。

または、 npxを使っても大丈夫です。 

コンパイルが完了すると、hello.jsというファイルが作成されているはずです。
中を確認しましょう。

このように見慣れたJavaScriptのコードが確認できるはずです。

JavaScriptファイルを実行する

nodeコマンドでJavaScriptファイルを実行します。

するとこのように出力されるはずです。

 

まとめ

TypeScript
  1. npm info typescriptで最新版を確認
  2. npm install –save-dev typescript@最新版 でインストール
  3. tscコマンドでコンパイル

ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1