はじめに
今回から、TypeScriptを使用したアプリケーション開発の記事を書いていこうと思います。
最終的には、
・electron, typescript, vite, tailwindcss を使用した Win/Mac用 ネイティブアプリ
・next.js (react), typescript, django, docker, mysql, nginx, vps server (ubuntu) を使用したWEBアプリ
・react, typescript, gas, vite, vite-plugin-singlefile, tailwindcss を使用したGAS WEBアプリ
などを開発したいと思っています。
記事は、最低限のコマンドやファイルに絞って記載します。
詳しい解説は、諸先輩方がブログなどで解説された記事におまかせします。
疑問点・不明点は、Chat-GPT, Google Gemini などのAIエンジンで検索してみてください。
また、ココナラDMでわたしへのメッセージも歓迎です。
手段
・プロジェクトディレクトリを作成
・npm初期化
・TypeScriptをインストール
・tsconfig.jsonの作成／設定
・index.tsの作成
・実行
実現方法
```bash
mkdir hello-world
cd hello-world
npm init -y
npm install -D typescript ＠types/node ts-node
※注）＠は半角で入力。（ココナラブログ禁止文字のため）
npx tsc --init
vim tsconfig.json
=== vim tsconfig.json ===
{
"compilerOptions": {
"target": "es2022", /* モダンなJSに出力 */
"module": "commonjs", /* Node.js用 */
"rootDir": "./src", /* ソース置き場 */
"outDir": "./dist", /* 出力先 */
"strict": true, /* 厳格な型チェック */
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
}
}
===
vim src/index.ts
=== vim src/index.ts ===
// src/index.ts
const message: string = "Hello, TypeScript Console!";
console.log(message);
// 簡単なロジックの例
const add = (a: number, b: number): number => {
return a + b;
};
console.log(`1 + 2 = ${add(1, 2)}`);
===
# debug
npx ts-node src/index.ts
# release
npx tsc
node dist/index.js
```
