TypeScriptを使ってみる

TypescriptはMicroSoftの開発で今はオープンソースになっていて、大規模プロジェクトで使えるJavaScript上位互換のある「コンパイラ言語」、JavaScriptに型定義などの機能を付加した上位互換なので、JavaScriptの既存ソースはそのまま使えます。

<TypeScriptとは何か>

https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6

コードがある程度以上の規模になったら、スクリプト言語で直接実行は辛くなるから、事前にコンパイルで基本的な文法をチェックしてくれる方がありがたいし、それ以外にもinterface, class, type alias, genericなどの大規模プロジェクト向けの拡張機能が使えます。

<VScodeで使うための設定>

VScodeとの相性が良いから、この環境で使うのが良いだろう。

https://qiita.com/masakinihirota/items/7ee5c2aa405c2b37d1c5

tsc : コンパイラー

ts-node : jsファイルを作成しないで直接実行、VScodeで実行するとjsファイルを作成しないからts-nodeが動いています。

それぞれの版数、

% ts-node -v

v10.9.1

% tsc -v

Version 4.8.4

一番シンプルなコード例、

// .js is a compiled file
// $ tsc ts_basic.ts

function greeter_ts(person: string) {
  return "Hello, " + person;
}

let user_ts = "John";

console.log(greeter_ts(user_ts));

jsファイルにコンパイルすると、

// .js is a compiled file
// $ tsc ts_basic.ts
function greeter_ts(person) {
    return "Hello, " + person;
}
var user_ts = "John";
console.log(greeter_ts(user_ts));

tsファイルで指定した型指定は取れていて、型指定はコンパイル時だけ使用されます、letがグローバル変数にもなっていますが。

<実践的な使い方>

https://reffect.co.jp/html/hello-typescript-tutorial#TypeScript

基本のまとめページです

例えば、VScodeでデフォルトだとtscでコンパイルするとjsファイルが同一ディレクトリに作成されてtsファイルと重複してるとエラーメッセージが出ますが、tsconfig.jsonファイルを作成すれば、jsファイルをtsファイルとは別のディレクトリに格納できるというような実践的な記述があるので有用です。

コンパイル時のjjsファイル出力ディレクトリ設定方法は、

% tsc -init

で作成されたtsconfig.jsonファイルでコメントアウトされているoutDir部分に、

https://www.typescriptlang.org/tsconfig

GitHubのリンクは、

https://github.com/chateight/type_script

admin