【TypeScript】触ってみる

TypeScript

1. 概要

こちらのTypeScriptのTutorialをコード中心に書いていきます。

  • 型ヒント
    • TypeScriptのコア機能は、その型システム

2. TypeScript と JavaScript の互換性

TypeScript と JavaScript の互換性

3. Visual Studio Codeをインストール

3-1. こちらを参考

4. TypeScriptのコンパイラをインストール

sudo npm install -g typescript

5. tsconfig.json を生成 + 修正

5-1. 練習するディレクトリを作成し、その中で実行

tsc --init

5-2. 修正(2ヵ所)

修正前

    "target": "es2016",
    // "outDir": "./",

修正後

    "target": "ES2015",
    "outDir": "build",
  • ディレクトリ「build」を作成

5-3. コマンド実行

tsc

※これにより、tsconfig.json ファイルが読み取られ、オプションがリセットされる。

5-4. ディレクトリ構成

tree
.
├── build
└── tsconfig.json

1 directory, 1 file

6. コードを書いて確認

6-1. JavaScriptコード

VSCode上で「module01.js」としてファイルを作成

function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers(3, 6));
  • 実行
    • node module01.js
  • 実行結果
    • 9

数値の値を文字列に変更

function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers('three', 6));
  • 実行
    • node module01.js
  • 実行結果
    • three6
      • これを望んでいるわけではない

ディレクトリ構成

tree
.
├── build
├── module01.js
└── tsconfig.json

1 directory, 2 file

6-2. TypeScriptファイルを作成し、上記と同じコードを書く

VSCode上で「module01.ts」としてファイルを作成

※「module01.js」は、削除

function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers(3, 6));

VSCode上だと、こんな感じで赤い波線が表示される

Paramter 'x' implicitly has an 'any' type.

6-3. TypeScriptコード(型を指定)

function addNumbers(x: number, y: number) {
    return x + y;
}
console.log(addNumbers(3, 6));

6-4. TypeScriptのコンパイル

tsc

コンパイル後、ディレクトリ構成

tree
.
├── build
│   └── module01.js
├── module01.ts
└── tsconfig.json

1 directory, 3 files
  • 「build」ディレクトリに「module01.js」が生成される

「build/module01.js」の中身

"use strict";
function addNumbers(x, y) {
    return x + y;
}
console.log(addNumbers(3, 6));
  • 実行
    • node build/module01.js
  • 実行結果
    • 9

6-5. 型不一致の値を設定してみる

※上記「js」で試したのと同じ内容

function addNumbers(x: number, y: number) {
    return x + y;
}
console.log(addNumbers('three', 6));

VSCode上だと、こんな感じで赤い波線が表示される

Argument of type 'string' is not assignable to parameter of type 'number'.

この状態でコンパイルしてみる

tsc
module01.ts:4:24 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

4 console.log(addNumbers('three', 6));
                         ~~~~~~~


Found 1 error in module01.ts:4
  • エラー
    • とても助かる

7. HTMLファイルを作成して確認

7-1. HTMLコード

VSCode上で「module01.html」としてファイルを作成

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   <meta charset="UTF-8">
   <title>Test JavaScript</title>
</head>
<body>
   <h1>Test JavaScript</h1>
   <p id="date"></p>
   <p>This page calls the script module01.js and is used for testing.</p>
   <script src="./build/module01.js"></script>
</body>
</html>

ディレクトリ構成

tree
.
├── build
│   └── module01.js
├── module01.html
├── module01.ts
└── tsconfig.json

1 directory, 4 files

ブラウザで確認

  • 「9」が出力されている

8. 備考

下記についてでした。

  • TypeScriptのインストール
  • コンパイル
    • ts ⇒ js
  • 実行し、結果確認

9. 参考

関連記事

  1. 【React×TypeScript】環境構築メモ

  2. 【React】FullCalendarのカレンダーにイベントを表示する…

  3. TypeScript

    【TypeScript】インターフェイスの実装

  4. 【React】FullCalendarのヘッダーツールバーを整えるため…

  5. 【TypeScript】filterを使って配列からundefined…

  6. TypeScript

    【TypeScript】TypeScriptで変数の型を宣言する

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS
  8. AWS

制作実績一覧

  1. Checkeys