Fluent UI を触りたくてはじめたシリーズの一つ。前回は React (JavaScript) をやったので、今回から TypeScript 編が始まる。
MS Learn にある 「TypeScript を使用して JavaScript アプリケーションをビルドする」を進めていく。
とりあえず、一から色々書いていると面倒なのでメモしたことを殴り書き。
TypeScript インストール
下記コマンドを実行して TypeScript 環境をインストール
npm install -g typescript
インストールチェックは tsc コマンドを実行して確認
Version 4.6.3 tsc: The TypeScript Compiler - Version 4.6.3
コンパイル方法
拡張子は省略可能
tsc <ファイル名>
コンパイルに成功すると、そのファイルの JavaScript ファイルが生成される。
--target オプションを使用すると JavaScript ファイルのバージョンを変更できる。
tsc <ファイル名> --target "ES2015"
ファイル作成
適当なプロジェクトフォルダを作成して、.ts 拡張子をつけてファイルを作る。
コンパイラオプションを適用する場合は tsconfig.json の生成が必要。次のコマンドを実行すると自動的に作成される。
tsc --init
MS Learn では ES2015 を基準にしているので、少し変更が必要になる。あと、ビルド用にオプションを追加しておく。ここでは build ディレクトリに生成した JS ファイルを出力。
{ "outDir": "./build", }
コードの記述
TypeScript には JavaScript が記述できるが、型が厳格になるので型を付けてあげる。
function addNumbers(x, y){
return x + y;
}
console.log(addNumbers(3, 6));
引数の型には : をつけると型を定義できる。
function addNumbers(x: number, y: number){
return x + y;
}
console.log(addNumbers(3, 6));
コードの実行
コンパイルしたファイル (JavaScript) を実行するには node コマンドを使用する。
node .\build\module01.js
モジュールを読み込ませるためには HTML に script 属性を追加。
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>My First JS</title> </head> <body> <h1>Test JavaScript</h1> <p id="date"></p> <p>This page calls by module01.js</p> <script src="./build/module01.js"></script> </body> </html>
ここまでのファイル構成はこんな感じ
イベントのお知らせ
2022年4月24日（日）に MS Tech Camp #14 を開催します。今回は私「たくのろじぃ」主催で、Blazor を使ったポートフォリオサイト製作と Azure Static Web Apps へのデプロイをやります。 興味がある方は（社会人、学生問わず）ぜひご参加ください！ Youtube での配信ですので、休日はごろごろしながらご覧いただければと思います。もちろん、一緒にやっていただいても結構です！
