TypeScript講座

TypeScriptを始めよう

by

TypeScriptはMiroSoft社が開発したオープンソースのプログラミング言語になります。Javascriptにデータタイプの制限を加え、開発時に起こりうるバグを防ぐために作られました。

TypeScriptを始める前に知っておくべきこと

TypeScriptはJavaScriptにコンパイルできる言語ですので基本のJavaScriptが理解できていないとその良さも生かせません。

まずTypeScriptを学ぶ前に下記のJavaScriptの基本だけは知っておくようにしましょう。

  • 変数
  • 配列
  • オブジェクト
  • 関数
  • アロー関数
  • 分割代入、など

TypeScriptってなに？

JavaScriptを使い始めると色々な部分で変だな、ふにゃふにゃしているなと思う事がありませんか？特に変数にデータタイプを指定する必要がないので下記のようなコードが実行できてしまいます。

let str = "5";
let num = 5;
console.log(str + num);　//55

let total = str + num;
console.log(typeof(total));　//'string'

これはJavaScriptはDynamically Typed Language（動的型付け言語）であるからです。

ブラウザがJavaScriptコードを実行する際に勝手にデータタイプを変更してしまうので、できるだけ正解に近いものを返してくれるようになります。

これは使い勝手は良いですが、バグが発生する原因になりがちです。

これらの問題を解決するために作られたのがTypeScriptです。TypeScriptではデータタイプを指定する必要があるので静的型付け言語（static typing）といえます。

静的型付け言語動的型付け
言語TypeScript
C/C++
C#
Java
Go
Scala
Swift		JavaScript
Python
Ruby
PHP
メリットコンパイル時にエラーが出てくれる
エラーが事前にわかるのでコンパイル時にデバッグができます。
例：
・整数型変数なのに文字列を代入しようとしてる
・型の違うデータで関数を呼ぼうとしている
記述量が大幅に減る
データ型の記載が不要になるので、書くコード量が減る。

比較的簡単にプログラムが書ける
データタイプを気にしなくてよい。

TypeScriptはJavaScriptのすべての機能を持つ以上に開発時に変更点のフィードバックが分かるのでデベロッパーの強い味方といえます。

なのでVSCodeなどのテキストエディタで.tsのタイプスクリプトファイルの変数のデータタイプを変更しようとすると下記のようにエラーがでます。

let str = 5;
str = "Hi";
//Type 'string' is not assignable to type 'number'.

TypeScriptの難点

①TypeScriptをJavaScriptコードにコンパイルしないといけない。→TypeScriptのコードはブラウザが理解できないのでJavaScriptのコードに変換（コンパイル）してあげないといけないです。

②コードの制限が細かい。→JavaScriptと比べてコードを書く量が増え、データタイプをいちいち宣言しないといけません。スケールの小さいプロジェクトの場合はJavaScriptだけで対応することも検討すべきです。

TypeScriptのプロジェクトを作成する

TypeScriptを使用するにあたりNode.jsを使います。まずは使用するマシンにNode.jsがインストールされていることを確認しましょう。

node --version
#v18.14.2

つぎにtypescriptのライブラリをグローバルにインストールします。

npm i -g typescript
#Linux
#sudo npm i -g typescript

#TypeScriptコンパイラのバージョンを確認
tsc -v
#Version 5.0.2

テキストエディタ

テキストエディタはVSCodeをお勧めします。

ではテキストエディタを開いて、.tsファイル（TypeScriptファイル）を作成しましょう。今回はindex.tsファイルを作成してみます。

ちなみに.tsファイルにはタイプを指定しない普通のJavaScriptを書くこともできます。

ではターミナルを開いて.tsファイルをコンパイルしてみましょう。

VSCodeのターミナルが開けたらtscのコマンドを使ってJavaScriptファイルにコンパイルしてみましょう。

tsc index.ts

そうすると新しく.jsファイルが作成されたことが確認できます。

データタイプの指定

TypeScriptでデータタイプを指定するには変数の宣言の際に：タイプの形式で記載することができます。

let age: number = 20;

では、再度.tsファイルをコンパイルしてみます。中身を見てみましょう。

var age = 20;

変数のletがvarになっていることが分かりますね。これはコンパイル時にES5（ECMAScript）の基準に従って古いブラウザでも実行できるファイルに変換しているからです。なのでアロー関数を使った場合もES5の基準に従って変換してもらえます。

もしES6の基準で.tsファイルをコンパイルしたい場合は–targetフラグを使用してください。

tsc index.ts --target es6

TypeScriptのコンフィグファイル

ではターミナル（コマンドプロンプト）から下記のコマンドでTypeScriptのコンフィグファイルを作成してみましょう。

tsc --init

#tsconfig.jsonが作成される

コマンドの実行後にtsconfig.jsonファイルが作成されました。

この中身を見てみると多くのコンフィグがコメントアウトされています。これを必要に応じて設定することができます。説明はコンフィグの右側にあります。ではtargetフラグを見てみます。

    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */

では中身を消して””だけ残してみましょう。その後にカーソールが””の中にある際に、コントール+スペースバーを押すとすべてのオプションを見ることができます。

そのほかに、rootDir、outDirで.tsファイルを読み込むディレクトリ、書き出し先を設定できます。これでファイルを指定せずにコンパイルを実行することができます。

また“removeComments”: trueに設定することで.jsファイルにコメントを除くことができます。これは便利ですね。

“noEmit”: trueを設定すると、エラーがある際にはコンパイルが実行されません。

また、TypeScriptに慣れた時点でコンフィグ設定を学ぶことになるので、現段階ですべてを理解する必要はありません。

では、次回以降にTypeScriptのデバッグの仕方、詳しい書き方を説明していきたいと思います。

お疲れ様でした。