[初心者向け] Typescriptプロジェクトを始める

# はじめに
TypeScriptを使用することで、型を通じて早期にエラーを発見し、大規模アプリケーションのための強力な機能を活用することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760374/fda2cea0-bfba-8aeb-b486-d2b782dc93cd.png)
# 1. TypeScriptプロジェクトの初期化
プロジェクトにpackage.jsonファイルがまだない場合は、新しいNode.jsプロジェクトを初期化して始めます：
```
npm init -y
```
次に、TypeScriptとts-nodeをインストールします。ts-nodeを通じてTypeScriptファイルを直接実行できます。
```
npm install typescript ts-node @types/node --save-dev
```
```package.json
{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.11.19",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3",
  },
}
```
# 2. TypeScript設定ファイルの作成
下記コマンドでtsconfig.jsonを作成します。
```
npx tsc --init
```
下記の内容でtsconfig.jsonを上書きします。
```tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}
```
<table>
  <thead>
    <tr>
      <th>属性名</th>
      <th>意味</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>target</td>
      <td>コンパイルされたJavaScriptのバージョンを指定する</td>
    </tr>
    <tr>
      <td>module</td>
      <td>モジュールコード生成の種類を指定する</td>
    </tr>
    <tr>
      <td>outDir</td>
      <td>出力されるファイルのディレクトリを指定する</td>
    </tr>
    <tr>
      <td>rootDir</td>
      <td>コンパイルするファイルが含まれるルートディレクトリを指定する</td>
    </tr>
    <tr>
      <td>strict</td>
      <td>すべての厳格型チェックを有効にする</td>
    </tr>
    <tr>
      <td>esModuleInterop</td>
      <td>CommonJSとESモジュール間の相互運用性を有効にする</td>
    </tr>
     <tr>
      <td>include</td>
      <td>typescriptに適用したいファイルのパターンのを指定する<br>"**/*"は、すべてのファイルをtypescriptに適用する<br>"**/*.ts"は、TypeScriptファイルのみ適用する<br>"src/**/*"は、srcディレクトリ配下のものをすべて適用する</td>
    </tr>
    <tr>
      <td>exclude</td>
      <td>typescript適用から除外したいファイルのパターンのを指定する<br>node_modulesは基本的提供したくないので除外する</td>
    </tr>
  </tbody>
</table>

# 3. JavaScriptファイルをTypeScriptに移行
:::note info
簡単なファイルから移行を始め、徐々に複雑なファイルに移行することが可能です
:::
##### 拡張子を変更する
.jsファイルの拡張子を.tsに変更します。プロジェクトでJSXを使用している場合は、.jsxファイルの拡張子を.tsxに変更します。
##### インポートステートメントを調整する
JavaScript (JS) から TypeScript (TS) への移行時には、特に CommonJS スタイルの require() から ES モジュール スタイルの import ステートメントに移行する場合、インポートステートメントを調整する必要があります。
```diff_typescript:foo.ts
-const express = require('express');
-const { myFunction } = require('./myModule');
+import express from 'express';
+import { myFunction } from './myModule';
```
# 4. TypeScriptの機能を使用してコードを更新
ファイルの名前を変更した後、型が不足しているなどの理由でTypeScriptのエラーが発生する可能性があります。例えば：
```
npm install @types/lodash --save-dev
```
# 5. 実行およびビルドスクリプトの更新
typescriptファイルを実行するには下記の行をスクリプトに追加します。
```diff_javascript:package.json
{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "foo": "ts-node foo.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.11.19",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3",
  },
}
```
これで「npm run foo」でfoo.tsを実行できます。
```
npm run foo
```
# まとめ
この記事では、TypeScriptを使用してJavaScriptプロジェクトを開始または移行するための基本的なステップを紹介しました。TypeScriptの導入は、型を通じてコードの信頼性を高め、開発プロセスを改善するための効果的な手段です。

下記記事もおすすめです。

https://qiita.com/oharu121/items/3fc517dbce0a4ec7567f

https://qiita.com/oharu121/items/c4d166e035e200b33b98

https://qiita.com/oharu121/items/98dcc51b5f1ab407f755

https://qiita.com/oharu121/items/df81018ab29eb8daed4e

https://qiita.com/oharu121/items/095cdc34671d4bbbeeb8

https://qiita.com/oharu121/items/3955ada2f2b3c99ede0d