Nuxt3 から typescript 導入

# はしがき

プログラミングの効率向上のため、typescript を使うように、計画しました。
自分は入社前から、typescript を使っていて、typescript の利益など知っているので、みんな一緒に使って、効率をあげたかったので、導入しました。

typescript を使う方ならば、javascript の経験が結構あると思っていて、javascript の説明は飛ばします。

# typescript はなに？

https://www.typescriptlang.org/

```plaintext
JavaScript and More
TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.

A Result You Can Trust
TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.

Safety at Scale
TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.
```

実際に build して、web browser から、確認するまえに javascript に type を追加して、IDE から、コードのエラーを catch できます。

build する前にエラーが確認できるって、すごいと思います。

## typescript の利益

### 強力な type check system

`type` なので、使います。type inference を通じて、これがなんの変数か、数字か、文字列か、リストか boolean か...を確かめます。

Javascript は Dynamically typed language です。なので、このコードの type やエラーがあるかどうかは実際に実行する前にはわかりません。
しかし、Typescript は statically typed language です。compile する language なので、実際に実行する前に(build するとき)どこからエラーがあるか確認できます。

https://rollbar.com/blog/top-10-javascript-errors-from-1000-projects-and-how-to-avoid-them/

ある site からアンケートしたことです。javascript から多いエラーの7個が type エラーです。
最近 IDE や plugin(vscode の extension のようなこと)がいろいろ発展しましたと言っても、type エラーを100%知ることが難しいです。

### 高い効率の type

javascript でコードを作成したときは、object や function の parameter の値の type がなんなのか？確認するためにいろいろ頑張りましたが、typescript を使ったら、その type を記憶する必要がありません。
IDE が自動でリストアップしますので、コードの生成の効率が上がります。

### javascript と互換性

typescript は javascript と100%互換できると言われるほど、javascript との互換性が高いです。
javascript file その extension を変更するだけで、動ける場合もあります。
これは Typescript が ES6 を基盤して、作られた language なので、できます。

「だったら、typescript から作られたコードは ES5 以下の browser から使える？」かもしれません。
typescript は compile しながら、ES6 を ES5(もしくは ES3)への変更します。

# 導入方法

https://nuxt.com/docs/getting-started/installation

nuxt3 の project がすでに作られている前提で話します。

build するとき、type check しますので、 `vue-tsc` や `typescript` を install します。

```bash
yarn add -D vue-tsc@^1 typescript
```

この nuxt3 project に適用する必要があるので、nuxt.config.ts もしくは、nuxt.config.js に以下のように typeCheck を true に します。

```javascript
export default defineNuxtConfig({
  // ... your option
  typescript: {
    typeCheck: true
  }
  // ... your option
})
```

この nuxt.config.ts もあくまで `ts` なので、build するとき、typeCheck されます。
config file を例外するのは `tsconfig.json` から、設定するので、これからしましょう。

https://nuxt.com/docs/guide/directory-structure/tsconfig

```javascript
{
  "compilerOptions": {
    "allowJs": true, // javascript から gradually typescript への migration をしています。
    "declaration": false, // project 全ての js もしくは ts に対して、.d.ts を作ります
    "baseUrl": ".",
    "paths": { // nuxt.config.ts と alias が共有しないので、記入する必要があります。
      "@/*": ["*"],
      "my-alias": ["my/path/file.js"]
    }
  },
  "extends": "./.nuxt/tsconfig.json", // nuxt の公式 default setting
  "exclude": [
    "nuxt.config.ts" // 自分は元々 nuxt.config.js を使っていたし、まだ、type がちゃんと設定されていないこともあるので、exclude します。
  ]
}
```

また、CommonJS の書き方を ES6 の書き方への migration が必要です。

```javascript
// 例
// CommonJS
const MyPlugin = require('./plugins/myPlugin')
module.export = MY_PLUGIN
// ES6
import MyPlugin from './plugins/myPlugin'
export default MY_PLUGIN
```

このようにしたら、typescript を使えます。`*.ts` もしくは vue file から`<script lang='ts'>` を使ったら、使えます。

# 参考&関連 URL

https://nuxt.com/docs/guide/concepts/typescript

https://www.typescriptlang.org/

https://www.typescriptlang.org/tsconfig/