初学者がTypeScript開発環境をコマンド2つで構築する
結論
npm create vite@latest ./ -- --template vanilla-ts
npm i -D
Vite
TypeScriptの学習を始めるにあたって、どういう環境を用意すればいいのか調べるうちに、「次世代フロントエンドツール Vite」を使えば楽そう、という結論に至りました。
上記コマンドは、テンプレートを元にプロジェクトを作成するものです。
さまざまな開発環境のテンプレートが用意されているので、テンプレートの部分を変更することで、目的に応じた環境が手元に用意できます。
上記では ./になっていますが、ディレクトリ名を入れることで、サブディレクトリに開発環境が構築されます。
Viteの楽なところ
くわしくは「なぜViteなのか？」をご覧ください。
初学者的に非常に良いと思ったのは次のような点です。
- テンプレートから環境を構築できて簡単
- ローカルサーバーが立ち上がる（デフォルトでlocalhost:3000）
注意点
TypeScriptの項によると、
Vite は .ts ファイルに対してトランスパイルをするだけで、型チェックは 実行しません。型チェックは IDE とビルドの過程にて実行されることを前提としています
とのことですので、コーディング段階で適切な警告が出る開発環境があるといいようです。
私はVSCodeを使っています。
SCSS
CSSプリプロセッサも動作させることができます。
npm add -D sass
これで、scssファイルを変換してくれるようになります。
余談ですが、npm installって、いろんな書き方できるんですね。
aliases: add, i, in, ins, inst, insta, instal, isnt, isnta, isntal, isntall
iだけでええんとちゃうんか…。
開発開始とビルド
npm run dev
で、ウォッチが開始されて開発が始められます。
npm run build
で、ビルドされます。
デフォルトでは、開発ディレクトリのなかに「dist」ディレクトリが作成されます。
変更する場合は、開発ディレクトリの中に「vite.config.js」ファイルを作成して、設定を記入します。
import { defineConfig } from 'vite'
export default defineConfig({
base: "",
build: [
outDir:"/built"
]
})
デフォルトでは、htmlからの参照がルートからの絶対パスになるので、baseで相対パスになるようにしています。
outDirで、distにかわるディレクトリを指定します。
とりあえず、以上でTypeScriptの開発ができる最低限の環境ができるかと思います。
Discussion