こんにちは。
本日はTypeScriptについて簡単にご紹介したいと思います。
～ TypeScriptとは ～
TypeScriptとは、マイクロソフト社が開発した言語で、JavaScript に型定義などの機能を追加したものです。
TypeScriptによる開発を行うことで、以下のようなメリットがあります。
・「型宣言」によって開発効率と安全性を高めることができる
・「クラスベース」のオブジェクト指向開発ができる
・「コンパイル」によって古いブラウザに対応したJavaScriptを生成できる
1. インストール無しに試す方法
公式サイトからインストールせずに実行できます。
TS Playground
左側にTypeScriptを入力し、「Run」で実行すると右側に実行結果のJavaScriptが表示されます。
2. TypeScriptのインストール方法
【事前準備】
TypeScriptをインストールする前に、VSCodeとNode.jsを準備しましょう。
VSCodeのインストール
Node.jsのインストール
上記の準備ができたら、VSCodeからctrl+@でターミナルを開き、以下のコマンドを打ちます。
それぞれバージョン番号が表示されればNode.jsのインストールは成功しています。
$ node -v $ npm -v
【TypeScriptのインストール】
TypeScriptで開発する用のディレクトリをあらかじめ作成し、そのフォルダに移動後、ターミナルに以下のコマンドを入力します。
npmとはNode Package Manager の略で、Node.jsのパッケージを管理するものです。TypeScriptもnpmのパッケージの一つです。
入会申込
ログイン$ npm init
// npm init で package.json (npm の設定ファイル)ができます。
$ npm install --save typescript
// npm install --save typescript で package.json に typescript が追加されます。
$ npx tsc --init
// npx tsc --init で tsconfig.json (tsc(=TypeScript)の設定ファイル)ができます。
【TypeScriptのコンパイル】
実際に簡単なプログラムを書いてコンパイルしてみましょう。
TypeScriptのファイルは拡張子を .ts にします。下記のソースコードをインストール時に作成したフォルダにhello.tsという名前で保存してください。
function sayHello(name: string): void {
console.log(`Hello ${name}!`);
}
const anExampleVariable = "TypeScript"
sayHello(anExampleVariable);
そして、ターミナルに以下のコマンドを入力してください。
$ npx tsc hello.ts
hello.jsが生成されます。
変換後のJavaScripは以下のコマンドで実行できます。
$ node hello.js
実行するとターミナルで”Hello TypeScript!”と表示されます。
以上でTypeScriptの開発環境は整いました！次回はもう少し詳細にTypeScript基本的な書き方などをまとめようと思います。
