IT二刀流にはプロモーションが含まれています。

初めてのTypeScript入門編、チュートリアル的にとりあえず動かしてみる。

TypeScriptロゴ

この記事はTypeScriptに興味があるけど、何から始めていいのかわからない。

そんな時に、「とりあえず動かす」ことを目的とした入門編です。

私自身初めてTypeScriptを触った時の記事です、備忘録みたいな。

実験環境

下記の環境で実験しました。

  • Windows 10
  • npm 6.6.0
  • TypeScript 3.2.4

事前に必要なこと

npmが必要です、事前にインストールしてください。

TypeScript用のエディタがあれば便利かもしれません、簡単な動作確認なので私はメモ帳で書きました。

TypeScript導入(インストール)

TypeScriptコンパイラ

コマンドプロンプトを起動して下記のコマンドを実行。

>npm install -g typescript

インストール確認

インストールされているか確認します、Versionが表示されればOK。

>tsc -v
Version 3.2.4

Hello world

実際に簡単なTypeScriptを書いてコンパイルして実行してみましょう。

作業ディレクトリ作成

TypsScript(.ts)プログラムを置くディレクトリを作成します。

>mkdir tsc_test

プログラム作成

作成したディレクトリ(tsc_test)の中に下記のTypeScriptプログラムを配置します。

hello.ts

const message:string = "Hello! World!";
console.log(message);

コンパイル

hello.tsプログラムがあるディレクトリで下記のコマンドを実行します。

>tsc hello.ts

コンパイルがエラー無く終わると、hello.jsというJavaScriptファイルができています。

TypeScriptのhello.tsからJavaScriptのhello.jsが作成されました。

実行

コンパイルして出来上がったhello.jsを実行します。

今回はnodeで実行します。

>node hello.js
Hello! World!

「Hello! World!」が表示されたでしょうか?

ここまでがTypeScriptの導入・作成・コンパイル・実行のとりあえずの流れです。

まぁ、これくらいならJavaScript直接書いたほうが楽でしょうけど。

ただ、基本的な流れは押さえられたと思います。

TypeScriptでコードを書いて、コンパイルでJavaScriptにして実行です。

ちょっと実践編

初めてのTypeScript入門編としてチュートリアル的な簡単な流れを説明しました。

しかし、このままではTypeScriptコンパイル必要なのか、めんどくせー。

「JavaScript直接書いたほうが早くない?」「動かせたけど実践で使えるの?」なんて声が聞こえてきそうです。

私もまだ始めたばかりの初心者なので詳しいことは難しいですが、もうちょっと実践で使えそうなことを書きます。

自動コンパイル

やっぱり気になるのが、わざわざ毎回コンパイルしないといけないことです。

めんどくさいので、tsファイルを編集したら自動でjsファイルにコンパイルする設定をします。

package.jsonの作成

TypeScriptのプロジェクトフォルダに移動して下記のコマンドを実行します。

-yオプションを付けるとめんどくさい問い合わせをなしにできます。

>npm init -y

実行するとpackage.jsonファイルが作成されます。

{
  "name": "tsc_test",
  "version": "1.0.0",
  "description": "",
  "main": "hello.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

これを下記のように変更します。

{
  "name": "tsc_test",
  "version": "1.0.0",
  "description": "",
  "main": "hello.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "watch": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

tsconfig.jsonの作成

TypeScriptのプロジェクトフォルダで下記のコマンドを実行します。

>tsc --init
message TS6071: Successfully created a tsconfig.json file.

ごちゃごちゃ書かれたtsconfig.jsonができますが、ほとんどコメントなので必要なものだけ残します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist/js",
    "rootDir": "./src/ts",
    "strict": true,
    "esModuleInterop": true
  }
}

outDirはJavaScriptを出力するディレクトリ、rootDirはTypeScriptを配置するディレクトリです。

ディレクトリ構成を整える

プロジェクトディレクトリの下にTypeScriptやらJavaScriptなどを、ずらずらと並べてはエレガントではありません。

ディレクトリ構成を整えます。

tsc_test
├dist/
│└js/
├src/
│└ts/
│ └hello.ts
├package.json
└tsconfig.json

src/tsの下にTypeScriptの.tsファイルを作成します。

コンパイル後はdist/jsの下に.jsファイルができます。

自動コンパイル実行

プロジェクトフォルダ(package.json)がある場所で下記のコマンドを実行します。

>npm run watch

tsc -wが実行されます。

これでsrc/tsのhello.tsがコンパイルされ、dist/jsにhello.jsが作成されます。

tsc -wが実行されている間はTypeScriptのhello.tsが変更されると自動的にhello.jsが更新されます。

終了する時は「Ctrl + c」を押すと止まります。

まとめ

初めてのTypeScript入門編でチュートリアル的に初歩的な内容をまとめました。

しかし、旅は始まったばかりです、やっとTypeScriptの世界に1歩踏み入れた段階です。

いや、「ナイフとランプ鞄に詰め込んだ」だけかもしれません。

共に頑張っていきましょう!

ITエンジニアの転職

いまITエンジニアの需要は急拡大しています。
ITエンジニアの経験があれば好条件で転職することも難しくありません。

転職ドラフト

☆ 支援ご協力のお願い ☆

この記事が「役に立った」と感じたら

投げ銭の「OFUSEで応援」で支援して頂けたら励みになります!

OFUSEのやり方(説明)

関連記事
記事特集