初心者が学ぶ TypeScript 入門 Ver.1.0

前回のあらすじ

TypeScript入門 Ver.0.2

TypeScript入門 Ver.0.5

TypeScriptを扱うにあたって、node.jsを一度勉強してみる事にした。

• Hello World
• URL ルーティング
• HTMLファイルの読込
• テンプレートエンジンの使用

さて、ついに本題！！ TypeScript!

そもそも TypeScript とは

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。
(Wikipediaより)

公式サイト

• JavaScriptによる大規模開発に対応するために設計された言語
• JavaScriptのスーパーセットであり"静的型付け"が大きな特徴であり、コンパイルする事でJavaScriptのコードに"トランスパイル"される。

取り敢えず、TypeScriptで書いてコンパイルしてjsにしてつかう、って感じで使ってみる。

TypeScript書いてみる。

まず開発環境構築

# node 環境を作成
$ npm init -y
# typescriptをinstall
$ npm install --save-dev typescript
# Node.jsの型定義ファイルを取得
$ npm install --save @types/node

次に TypeScriptのコンパイル設定を行う。

$ touch tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "sourceMap": true,
    "types" : ["node"]
  },
  "exclude": [
    "node_modules"
  ]
}

ディレクトリ構成を作る。

開発を進めるにあたって、特に指定等は無いですが、より把握しやすいように、という意味もこめて、以下のような構成ですすめていきます。

/
├node_modules ... ライブラリ管理
├src/ ... typescriptファイルを入れる。
│└app.ts
├package-lock.json
├package.json
└tsconfig.json

実際に書いていく

• まずは Hello World

src/app.ts

console.log("Hello! Node.js × TypeScript");

かけたぞ！

TypeScriptのビルド

ビルドしてみる。

# ルートディレクトリ上で実行.
$ node_modules/.bin/tsc

ビルドすると2ファイルが追加されたぞ！

差分

├src/ ... typescriptファイルを入れる。
+││app.js
+││app.js.map
│└app.ts

typescriptをコンパイルしたファイルを実行

$ node src/app.js
Hello! Node.js × TypeScript

きた！！ やったぞ！ マスターした。

（これ・・・コンパイルしただけじゃん。。。)

型アノテーションをつけてビルドしてみる。

src/app.ts

let message : String = '';
message = "TypeScript World"
console.log("Hello!" + message);

ビルドするとこうなった。

src/app.js

let message = '';
message = "TypeScript World";
console.log("Hello!" + message);
//# sourceMappingURL=app.js.map

途中で別の型の値をいれてみる.

src/app.ts

let message : String = '';
message = 2;
console.log("Hello!" + message);

ビルドするとこうなった。

$ node_modules/.bin/tsc
src/app.ts:2:1 - error TS2322: Type '2' is not assignable to type 'String'.


2 message = 2;
  \~~~~~~

おお！ちゃんと弾いてる。 2 is not assignable to type 'String'
ちゃんと型チェックしてくれてていい！

if文とかどうなの？

if (評価式) 良くも悪くも、 評価式に なんでも入れる事ができるのは JavaScriptの良さだったりするんだけど、どうだろう？ Swiftとかだと Bool型とか入れられない。

src/app.ts

let value : number = 0;
if (value) {
    console.log("定義済み!");
} else {
    console.log("未定義");
}

ちなみに 数値型は number なのねー。

さて、ビルドしてみる。 お、通ったｗ

src/app.js

let value = 0;
if (value) {
    console.log("定義済み!");
}
else {
    console.log("未定義");
}
//# sourceMappingURL=app.js.map

違う型は比較できる？

src/app.ts

let value : number = 1;
let str : String = "1";

if (value == str) {
    console.log("同じ");
} else {
    console.log("違う");
}

さて、ビルドしてみる。 お、失敗するねー。

$ node_modules/.bin/tsc
src/app.ts:4:5 - error TS2365: Operator '==' cannot be applied to types 'number' and 'String'.

4 if (value == str) {
      ~~~~~~~~~~~~

型違いだからNGだよ、と。

まとめ

取り敢えず、ざっと書いてみた。

JS部分の良くも悪くも雑（褒め言葉です！！）な部分はそのままに硬さを出した書き方ができるな、って印象。

これなら僕も JSが好きになれそう。

あ、よりJSが好きになれそう！

宣伝

転職をきっかけにいろいろな試みをやってます。

ほぼ日AWS

ほぼ日AWS

AWSの各ソリューションについて 「このソリューションはどういうもの？」 って観点でまとめてみたものです。

もくもく独書 for Swift実践入門

もくもく独書 for Swift実践入門

Swift実践入門の書籍を毎日読みながら必要に応じてコードを書いてまとめていっているものです。