備忘録 Web：Typescript①

※調べた内容を後日見返せるように本記事を作成しています。

Typescriptに関する備忘録を残す。
今回は以下の項目で説明を行う。

Typescriptとは
TypescriptとJavascriptの違い
環境開発の流れ

Typescriptとは

Javascriptを拡張して開発されたプログラム言語
2012年10月にMicrosoftが公開
Javascriptと互換性が高く、大規模開発でもエラーを防ぐように設計されている
Javascriptの機能のほかに、省略も可能な静的型付け(※1)とクラスベースオブジェクト指向(※2)を加えた言語となっている。

※1 値やオブジェクトの型安全性を、コンパイル時に検証するという方法
※2 クラスを定義し、それを元にインスタンスを生成するスタイルのオブジェクト指向
　オブジェクト指向とは、モノとモノとの関係性を定義することでシステムを作る考え方

TypescriptとJavascriptの違い

Javascriptは実行するまでエラーを確認できないが、Typescriptでは、あらかじめ変数の型を定義する静的型付けを行うことで、未然にエラーを発見できる。
ただし、開発時はJavascriptのフレームワークを使用することが多いため、完全に無視できるわけではない。

環境開発の流れ

PC環境を整える
公式サイトからNode.jsをインストールする。
[https://nodejs.org/en/download]
Typescriptをインストール
コマンドプロンプトやターミナルなどを開き、以下2つを実行する。
$ npm install -g ts-node
$ npm install -g typescript

インストール確認として以下コマンドを実行する。
tsc -v
成功時は「Version x.x.x」と出力される。

Typescriptを実行
Typescriptを使用して、「Hello World!」を出力する。
下記ソースコードをhelloworld.tsというファイルに記述する。

helloworld.ts

const hello:string = 'Hello World!';
console.log(hello);

下記コマンドを実行し、コンパイルを実行する。
tsc helloworld.ts
「helloworld.js」というファイルが作成されていれば成功

jsファイルの実行コマンドを実行する。
node helloworld.js

下記内容が出力されていれば成功
Hello World!

プロジェクトフォルダ作成
TypeScriptで開発を行うためにすることが開発環境の構築が必要なため、フォルダを作成する。
ここでは「test1」というフォルダを作成する。
コマンドプロンプトやターミナルなどで以下を実行してフォルダを作成する。
$ mkdir test1
$ cd test1
$ npm init -y
ツール類のインストール
開発で必要なWebpackなどのツールをインストールする。
$ npm install --save-dev typescript
$ npm install --save-dev ts-node-dev
$ npm install -D typescript @types/node
設定ファイルの準備
以下2つのファイルを設定する。
・package.json
・tsconfig.json

package.json

「npm start」コマンドが使えるようにするための設定を記述する。
書き込む前の内容は以下の通り

{
  "devDependencies": {
    "@types/node": "^20.12.2",
    "ts-node-dev": "^2.0.0",
    "typescript": "^5.4.3"
  },
  "name": "y",
  "version": "1.0.0",
  "main": "index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "acorn": "^8.11.3",
    "acorn-walk": "^8.3.2",
    "anymatch": "^3.1.3",
    "arg": "^4.1.3",
    "balanced-match": "^1.0.2",
    "binary-extensions": "^2.3.0",
    "brace-expansion": "^1.1.11",
    "braces": "^3.0.2",
    "buffer-from": "^1.1.2",
    "chokidar": "^3.6.0",
    "concat-map": "^0.0.1",
    "create-require": "^1.1.1",
    "diff": "^4.0.2",
    "dynamic-dedupe": "^0.3.0",
    "fill-range": "^7.0.1",
    "fs.realpath": "^1.0.0",
    "function-bind": "^1.1.2",
    "glob": "^7.2.3",
    "glob-parent": "^5.1.2",
    "hasown": "^2.0.2",
    "inflight": "^1.0.6",
    "inherits": "^2.0.4",
    "is-binary-path": "^2.1.0",
    "is-core-module": "^2.13.1",
    "is-extglob": "^2.1.1",
    "is-glob": "^4.0.3",
    "is-number": "^7.0.0",
    "make-error": "^1.3.6",
    "minimatch": "^3.1.2",
    "minimist": "^1.2.8",
    "mkdirp": "^1.0.4",
    "normalize-path": "^3.0.0",
    "once": "^1.4.0",
    "path-is-absolute": "^1.0.1",
    "path-parse": "^1.0.7",
    "picomatch": "^2.3.1",
    "readdirp": "^3.6.0",
    "resolve": "^1.22.8",
    "rimraf": "^2.7.1",
    "source-map": "^0.6.1",
    "source-map-support": "^0.5.21",
    "strip-bom": "^3.0.0",
    "strip-json-comments": "^2.0.1",
    "supports-preserve-symlinks-flag": "^1.0.0",
    "to-regex-range": "^5.0.1",
    "tree-kill": "^1.2.2",
    "ts-node": "^10.9.2",
    "tsconfig": "^7.0.0",
    "undici-types": "^5.26.5",
    "v8-compile-cache-lib": "^3.0.1",
    "wrappy": "^1.0.2",
    "xtend": "^4.0.2",
    "yn": "^3.1.1"
  },
  "description": ""
}

「scripts」を以下内容に設定する。

  "scripts": {
    "test" : "echo \"Error: no test specified\" && exit 1",
    "start": "ts-node-dev --respawn --transpile-only src/index.ts"
  },

tsconfig.json

tsconfig.jsonファイルはないため、以下コマンドにて作成する。
npx tsc --init

以下コードがコメントアウトされていないかのみ確認する。

{
  "compilerOptions": {
    "target": "es2018",          // コンパイルする ECMAScript のバージョン
    "module": "commonjs",        // モジュールシステム
    "rootDir": "./src",          // ソースファイルが置かれているディレクトリ
    "outDir": "./dist",          // トランスパイルされたファイルを出力するディレクトリ
    "esModuleInterop": true,     // default exportを使用するための設定
    "strict": true               // 厳格な型チェックオプション
  },
  "include": ["src/**/*"],       // コンパイルするファイルのパターン
  "exclude": ["node_modules"]    // コンパイルから除外するファイル
}

Typescriptを作成する
設定が完了したため、簡単なプログラムを作成する。
まず、「test1」フォルダ直下に作っていきます。ここでは「src」を作成する。

次に「src」フォルダ直下に「index.ts」を作成し、以下コードを記述する。

import {Item} from './item';
var dog = new Item('ハチ公',8);
dog.say();

次に「src」フォルダ直下に「Item」クラスを記述する、「item.ts」を作成し、以下コードを記述する。

export class Item {
   constructor(private name:string, private age:number){}
　
   public say() : void {
       console.log('家で飼っている犬の名前は' + this.name + 'です。年齢は' + this.age + '才になりました。');
   }
}

実行確認
以下コマンドを実行し、実行結果を確認する。
$ npm start

標準出力に以下内容が出力されることを確認する。
家で飼っている犬の名前はハチ公です。年齢は8才になりました。

以上が、Typescriptに関する内容と環境構築手順となる。