Node.js + TypeScript で動かす最小の Hello World

コンピュータ
最近はJavaScriptを直書きせずに、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で書いたコードとほぼ同じように見えます。

コメント