Typescript入門１(Typescriptについて、Javascriptとの違い、環境構築手順)

## 備忘録 Web：Typescript①
※調べた内容を後日見返せるように本記事を作成しています。

Typescriptに関する備忘録を残す。
今回は以下の項目で説明を行う。
1. Typescriptとは
1. TypescriptとJavascriptの違い
1. 環境開発の流れ

### 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
```typescript
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」コマンドが使えるようにするための設定を記述する。
書き込む前の内容は以下の通り
```json
{
  "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」を作成し、以下コードを記述する。
```ts
import {Item} from './item';
var dog = new Item('ハチ公',8);
dog.say();
```

次に「src」フォルダ直下に「Item」クラスを記述する、「item.ts」を作成し、以下コードを記述する。
```ts
export class Item {
   constructor(private name:string, private age:number){}
　
   public say() : void {
       console.log('家で飼っている犬の名前は' + this.name + 'です。年齢は' + this.age + '才になりました。');
   }
}
```

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

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

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