環境構築

TypeScriptとは

JavaScriptを拡張して作られたプログラミング言語です。
大きな違いは「型定義」ができる事となります。
型定義をする事で各変数やオブジェクトの役割が明確となり、主に大規模開発ではミスが軽減する事が期待できます。

環境構築

JavaScriptはそのままブラウザ上で動きますが、TypeScriptはJavaScriptに変換してからでないと動きません。
よって、TypeScriptコンパイラを使って、TypeScriptをJavaScriptに変換する必要がでてきます。

○ インストールできる環境か確認

ターミナルで以下を叩く

C:\xxx> node -v
v22.17.0

C:\xxx> npm -v
10.9.2

C:\xxx> tsc -v
'tsc' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。

上記状態の場合、TypeScriptのみインストールされていない状態です。
「node」「npm」がインストールされていない場合は、以下から「Node.js」をダウンロードし、インストールしてください。
　※ https://nodejs.org/ja/

○ TypeScriptインストール

ターミナルで以下を叩く

C:\xxx> npm install -g typescript
added 1 package in 13s
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.7.0
npm notice To update run: npm install -g [email protected]
npm notice

C:\xxx> tsc -v
Version 5.9.3

設定ファイルの作成

○ ディレクトリ構造

[ROOT]
　　|
　　+----- [ts]
　　+----- [js]
上記の様に、元ファイルとコンパイルした「.js」ファイルを別ディレクトリに格納したい場合。
ターミナルから以下を叩きます。
　C:\xxx\ROOT> tsc --init
同ディレクトリに『tsconfig.json』が作成されます。
コンパイル先の設定も含め、以下に色々便利な設定内容を紹介します。

tsconfig.json

{
    "compilerOptions": {
        "rootDir": "./ts",
        "outDir": "./js",
・・・
        "module": "ESNext",
        "target": "ES2020",
        "types": [],
・・・
        "sourceMap": false,
        "declaration": false,
        "declarationMap": false,
・・・
        "verbatimModuleSyntax": false,
        "isolatedModules": false,
        "moduleDetection": "auto",

○ 黄色設定

コンパイル元ファイル（.ts）とコンパイル先ファイル（.js）の設定です。
設定ファイルのある「C:\xxx\Root」内から《tsc》コマンドを叩く事でコンパイルが実行されます。

○ 青色設定

コンパイル内容設定となります。
この設定でピュアな「.js」ファイルが生成されます。

○ 緑色設定

こちらもコンパイル内容設定となります。
「.js」ファイル以外の余計なファイルを生成しないようにします。

ポイント

正しい設定をしないと、コンパイルした際に以下の様な余計なコードが挿入される事があります。
　① Object.defineProperty(exports, "__esModule", { value: true });
　② export {};
これは、node.jsを実行する場合に必要なコードですが、ピュアなJavaScriptの実行には支障となります。

TypeScriptでjQueryを使いたい

JQueryはJavaScriptのライブラリとして非常に有名で、TypeScript内でも使用できると非常に便利です。
JQueryを使用するには、型定義ファイルをインストールする必要があります。

ターミナルで以下を叩く

C:\xxx> npm install jquery
up to date, audited 4 packages in 629ms

C:\xxx> npm install --save-dev @types/jquery
npm warn idealTree Removing dependencies.@types/jquery in favor of devDependencies.@types/jquery
up to date, audited 4 packages in 805ms

「.ts」ファイル内では、行頭に以下コードを追記してください。
　declare var $: any;