【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. 参考

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. TypeScript

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

  2. TypeScript

    【TypeScript】Vitestを使ってみる

  3. 【React】FullCalendarのカレンダーを整えるためのTip…

  4. 【React】FullCalendarを使用してカレンダーを表示するた…

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

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

最近の記事

  1. raspberrypi

制作実績一覧

  1. Checkeys