TypeScript

TypeScriptのはじめ方


どうも、ささおです。

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

TypeScriptをインストール

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

$ mkdir StartTypeScript
$ cd StartTypeScript

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

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

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

$ npm install --save-dev typescript@3.8.3

–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というファイルを作成し、以下のコードを書いてください。

let message: string = 'Hello World'; 
console.log({ message });

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

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

$ ./node_modules/.bin/tsc hello.ts

または、 npxを使っても大丈夫です。 
$ npx tsc hello.ts

コンパイルが完了すると、hello.jsというファイルが作成されているはずです。
中を確認しましょう。
var message = 'Hello World';
console.log({ message: message });

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

JavaScriptファイルを実行する

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

$ node hello.js

するとこのように出力されるはずです。
{ message: 'Hello World' }

 

まとめ

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