はしがき
プログラミングの効率向上のため、typescript を使うように、計画しました。
自分は入社前から、typescript を使っていて、typescript の利益など知っているので、みんな一緒に使って、効率をあげたかったので、導入しました。
typescript を使う方ならば、javascript の経験が結構あると思っていて、javascript の説明は飛ばします。
typescript はなに？
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 するとき)どこからエラーがあるか確認できます。
ある 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)への変更します。
導入方法
nuxt3 の project がすでに作られている前提で話します。
build するとき、type check しますので、 vue-tsc や typescript を install します。
yarn add -D vue-tsc@^1 typescript
この nuxt3 project に適用する必要があるので、nuxt.config.ts もしくは、nuxt.config.js に以下のように typeCheck を true に します。
export default defineNuxtConfig({
// ... your option
typescript: {
typeCheck: true
}
// ... your option
})
この nuxt.config.ts もあくまで ts なので、build するとき、typeCheck されます。
config file を例外するのは tsconfig.json から、設定するので、これからしましょう。
{
"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 が必要です。
// 例
// 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