教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
この節では、一般的なTypeScriptのプロジェクトの始め方を紹介します。TypeScriptを始めるにあたって、NodeJSを導入する必要があります。公式のガイドに従って、導入を行なってください。NodeJSのバージョンを細かく管理したい場合は、nodebrew, nodeenv, nvm, voltaなどを調べお使いください。仕事として、TypeScriptを使う場合には、何のツールを使ってバージョン管理がされるか決まっていることがあるので、チームの郷に従うと良いでしょう。
この資料では、nodeのバージョンv18.0.0
で環境構築を行います。必ずしも、バージョンを合わせる必要はありませんが、プロジェクト構築の結果、若干の差異が生じるかもしれませんので、ご認識ください。
NodeJSの導入が成功している場合、npm
コマンドが使えるようになっているはずなので、適当なディレクトリ(フォルダ)を作り、その中で以下のコマンドを入力してください。
Copied!$ npm init
すると、以下のような文字列がターミナルに出力されるはずです。
Copied!This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
対話型のコマンドのため、プロジェクト名を求められます。どのような名前でも構いませんが、今回は「typescript-project」のような命名でタイプしたいと思います。
Copied!package name: (desktop) typescript-project
さらに続けて、様々な質問が続きますが、基本的にエンターキーを押し続けて構いません。
Copied!version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
プロジェクトの内容は、package.jsonに出力されます。作られるプロジェクトの内容は以下で良いですか?と出力されます。
Copied!About to write to [任意のディレクトリ]/package.json:
{
"name": "typescript-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
もし問題なければ、yes
とタイプします。
Copied!Is this OK? (yes) yes
この時点で、NodeJSによるプロジェクトが作成されるので、ここにTypeScriptのコンパイラをインストールします。
Copied!$ npm install -D typescript
added 1 package, and audited 2 packages in 1s
found 0 vulnerabilities
以下のコマンドを打つことで、TypeScriptコンパイラのバージョンが確認でき、ちゃんとコンパイラが導入されていることを確認できます。以下のバージョンナンバーは、NodeJSのバージョンや今後TypeScriptのバージョンが進化し続けることで変わるので、一致しなくても心配しなくて構いません。
Copied!$ npx tsc -v
Version 4.6.4
次に、TypeScriptの初期設定を行います。以下のコマンドを実行しましょう。細かいオプションの説明は、ここでは割愛させていただきます。
Copied!$ npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs
現時点で、ディレクトリ(フォルダ)の中身を見てみると、以下のファイルが並んでいるはずです。
Copied!$ ls # windowsはdirコマンド
node_modules/ package-lock.json package.json tsconfig.json
作られたファイルの簡単な説明は以下のようになります。
ここまで準備ができれば、TypeScriptのファイルを書いて実行することができます。
以下のようにプロジェクトルートにsrc
ディレクトリ(フォルダ)を作り、その中に、TypeScriptのファイル(main.ts
)を用意してみましょう。
Copied!src
└── main.ts
package.json
tsconfig.json
中身はどんなものでも良いですが、以下のようなHello Worldプログラムを用意してみました。
src/main.ts1234 Copied!const hello: string = "hello";
const world: string = "world";
console.log(`${hello} ${world}`);
1つ目のコマンド(TypeScript コンパイラ)でコンパイル。2つ目のコマンドで実行になります。
TypeScriptがどんなJavaScriptファイルに変換されるか、想像をしながら覗いてみてください。
また、今まで試したTypeScriptのコードを試しても良いでしょう。
Copied!$ npx tsc -p .
$ node lib/main.js
こちらを実行すると、以下のような実行結果が表示されるはずです。
Copied!hello world
もし、今までにフロントエンドフレームワーク(Angular, React, Vue等)を導入したことがある方は、直接的、もしくは間接的にNodeJSによるプロジェクト構築をしているはずです。TypeScriptと同様に品質や生産性、開発体験を上げるためには現状NodeJSとフロントエンド開発は切っても切れない関係になりますので、思い悩みすぎない程度に徐々に学んでいくと良いでしょう。
以上がプロジェクトの始め方になります。続いて、TypeScriptプロジェクトに導入すると良いエコシステムについて説明をしていきます。