最近はJavaScriptを直書きせずに、TypeScriptから生成するのが主流という話を聞きました。
Node.jsを導入したことでもありますしTypeScriptも試してみたいと思います。

Node.jsを導入したことでもありますしTypeScriptも試してみたいと思います。

Windows11でscopeからnode.jsをインストールした話
パッケージ管理システムscoopを使ってnode.jsをインストールした記録です。名前で検索したところ複数ヒットPS F:\git\memoClone\memo> scoop search nodejsResults from local ...
TypeScript のインストール
Node.js が入っているのでTypeScript のコンパイラ(tsc)は npm でインストールすることができました。
npm install -g typescript
プロジェクトを作成
cd (mkdir ts-hello)
TypeScript 設定ファイル(tsconfig.json)の生成
npx tsc --init
生成されたtsconfig.jsonの内容
{
// Visit https://aka.ms/tsconfig to read more about this file
"compilerOptions": {
// File Layout
// "rootDir": "./src",
// "outDir": "./dist",
// Environment Settings
// See also https://aka.ms/tsconfig/module
"module": "nodenext",
"target": "esnext",
"types": [],
// For nodejs:
// "lib": ["esnext"],
// "types": ["node"],
// and npm install -D @types/node
// Other Outputs
"sourceMap": true,
"declaration": true,
"declarationMap": true,
// Stricter Typechecking Options
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
// Style Options
// "noImplicitReturns": true,
// "noImplicitOverride": true,
// "noUnusedLocals": true,
// "noUnusedParameters": true,
// "noFallthroughCasesInSwitch": true,
// "noPropertyAccessFromIndexSignature": true,
// Recommended Options
"strict": true,
"jsx": "react-jsx",
"verbatimModuleSyntax": true,
"isolatedModules": true,
"noUncheckedSideEffectImports": true,
"moduleDetection": "force",
"skipLibCheck": true,
}
}
Hello World を書く(TypeScript)
touch main.ts
code .
ファイル名:main.ts
// main.ts
function hello(name: string): string {
return `Hello, ${name}!`;
}
console.log(hello("TypeScript"));
JavaScript とほぼ同じですが、引数 name: string が TypeScript ならでは。
TypeScript をコンパイルして JavaScript を生成
TypeScript は直接実行できないので、JavaScript に変換する。
npx tsc
出来上がったファイルの一覧
Directory: J:\html\ts-hello
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a--- 2025/11/26 18:30 45 main.d.ts
-a--- 2025/11/26 18:30 95 main.d.ts.map
-a--- 2025/11/26 18:30 209 main.js
-a--- 2025/11/26 18:30 226 main.js.map
-a--- 2025/11/26 18:28 121 main.ts
-a--- 2025/11/26 18:24 1164 tsconfig.json
Node.js で実行
実行
node main.js
結果
Hello, TypeScript!
生成されたjsファイル
ファイル名:main.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// main.ts
function hello(name) {
return `Hello, ${name}!`;
}
console.log(hello("TypeScript"));
//# sourceMappingURL=main.js.map
- “use strict” について
- JavaScript の「strict mode(厳格モード)」を有効にするための宣言。
- Object.defineProperty(exports, “__esModule”, { value: true });
- TypeScript のモジュールシステム(ES Modules と CommonJS の互換)を維持するための補助コード。
どちらも TypeScript が生成したコードを JavaScript として正しく動作させるための補助処理であり、特に気にする必要はなさそうです。
型の指定している部分がなくなっているだけで、ほかはtsで書いたコードとほぼ同じように見えます。

コメント