道具がそろったら、小さなTypeScriptプロジェクトを作って一連の流れを試そう。まずは入れ物を用意する。

mkdir hello-typescript
cd hello-typescript
pnpm init
git init

新しいディレクトリを作って移動し、pnpmとGitの管理を始めたところですね。

次に、開発用の道具を入れる。typescript が型をチェックする側、tsx がTypeScriptをそのまま実行する側だ。

pnpm add -D typescript tsx
pnpm exec tsc --init

tsconfig.json ができました。これは何ですか？

TypeScriptをどれくらい厳しくチェックするかの設定だ。中身は今は読まなくていい。「ここはTypeScriptのプロジェクトです」という目印になる、とだけ覚えておこう。

記録したくないものも先に決めておく。.gitignore を作ろう。

node_modules

ここまでで準備は終わりだ。index.ts を作って、最初のコードを書こう。

const userName = 'Engineer';
const message = `Hello, ${userName}!`;

console.log(message);

保存したら、ターミナルから実行する。

pnpm exec tsx index.ts

Hello, Engineer! と表示されました。短いけれど、自分で作って動かせました。

それが最初の大事な一歩だ。次は、型チェックの方も走らせてみよう。

pnpm exec tsc --noEmit

何も表示されませんでした。

問題がないという意味だよ。わざと間違えてみると、この道具の役割がはっきりする。userName を数値に変えて、もう一度実行してごらん。

const userName = 42;
const message = `Hello, ${userName.toUpperCase()}!`;

Property 'toUpperCase' does not exist on type 'number'. と出ました。

実行する前に、その値にはできない操作だと教えてくれたわけだ。読めたら元に戻しておこう。

毎回長いコマンドを打つのは面倒だから、package.json に名前をつけておく。

{
  "scripts": {
    "dev": "tsx index.ts",
    "typecheck": "tsc --noEmit"
  }
}

これで pnpm dev と pnpm typecheck で呼べるんですね。前回出てきた scripts は、これのことでしたか。

そう。自分で書いてみると、他のプロジェクトの scripts も読めるようになる。最後に、ここまでの変更をGitへ記録しよう。

git status
git add .
git commit -m "Create first TypeScript project"

.gitignore を先に作ったから、node_modules は記録されない。git status で、意図したファイルだけが並んでいることを確かめてからコミットしよう。

道具を用意して、コードを書いて、動かして、型を確かめて、記録する。ひと通りつながりました。

ここまでできれば、学ぶの記事に出てくるコードを手元で書き換えて試せる。読むだけでなく、値や処理を変えて結果を予想するところから、エンジニアリングは始まるよ。