目次
疑問1 TypeScriptとは？
回答1 マイクロソフトが開発したプログラミング言語
TypeScriptはマイクロソフトが開発したプログラミング言語で使用する際はTypeScriptをJavaScriptに変換する。
TypeScriptはscriptタグで直接読み込むことはできない。
// 下記のように直接読み込めない <script src="foo.ts"></script>
疑問2 TypeScriptをJavaScriptにするには？
回答2 TypeScriptをインストールする
下記のコマンドでTypeScriptをインストールする。
$ npm install -g typescript
typescriptのインストールが完了している場合はtsc -vでVersionが返ってくる。
$ tsc -v Version 3.4.1
tscコマンドを使用してtsファイルからjsファイルに変換するには下記のようにする。
$ tsc foo.ts
foo.tsに問題がなければfoo.jsが生成される。
疑問3 なぜTypeScriptを使用するのか？
回答3 型の指定などができるから
TypeScriptを使用する理由は色々あるが、一番多い理由は「型の指定」ができるから。
TypeScriptを使用すれば型推論による自動変換によるミスを防ぐことができる。
例えば下記のように2つの引数を足した数値を返す関数を作成してもJavaScriptだと文字列の12を返してしまう。
function add(a, b) {
return a + b
}
console.log(add(1, '2'))
対してTypeScriptは引数などに型を指定すれば引数が間違っている場合はエラーで変換自体が行われない。
下記は引数にnumberを指定している。ちなみにconstructorでも使用できる。
function add(a: number, b: number):number {
return a + b
}
console.log(add(1, '2'))
疑問4 型は何種類あるのか？
回答4 基本は7種類
TypeScrptの型の基本はnumber, string, boolean, null, undefined, void, anyの7種類。
number[]のようにすれば配列の数値の型になる。
function addAll(arr: number[]): number {
return arr.reduce((a, b) => a + b)
}
console.log(addAll([1, 2, 3, 4]))
// => 10
疑問5 複数の型が必要な場合は？
「|」のように区切る。
疑問6 オブジェクト型はない？
回答6 オブジェクト型はないがkeyの型は指定できる
interface data {
foo: number,
bar: string
}
const obj: data = {
foo: 1,
bar: 'A'
}
疑問7 修正するたびにtscコマンドを実行するのは面倒
回答7 -wでwatchオプションが使える。
上書き保存するたびにfoo.jsが生成される。
$ tsc -w foo.ts
疑問8 jsファイルをminifyしたい
回答8 tscに圧縮オプションはない。
tscに圧縮オプションはないのでuglify-jsなどで別途圧縮する必要がある。
$ npm install uglify-js -g $ tsc foo.ts && uglifyjs foo.js -c -o foo.min.js
疑問9 簡単にTypeScript環境を構築したい
回答9 Parcelで環境構築する。
以下のコマンドを実行するだけで簡単にParcelによる環境構築ができる。
最初に「TypeScriptはscriptタグで直接読み込むことはできない。」と書いたが、Parcel使用時はscriptタグのsrcにindex.tsを記述する。(ビルド時にindex.jsを読み込むようになる)
$ npm init -y && npm i -D parcel $ mkdir src && mkdir src/scripts && touch src/index.html && touch src/scripts/index.ts $ npx parcel src/index.html --open または npx parcel build src/index.html
Parcelに関しては以下の記事に詳細な説明がある。
TypeScriptのビルド環境が3分でできるParcel入門
