華麗なるTypeScriptのインストールと実行

作成日: 2021-02-02
更新日: 2023-12-24
カテゴリ: TypeScript

TypeScriptのインストールと実行

マイクロソフト社が開発しているプログラミング言語TypeScriptは、JavaScriptに静的型付けを実装したものです。
TypeScriptを使えばトランスパイル時に型エラーがないかチェックすると同時に、JavaScriptのコードを生成することが出来ます。

この記事ではLinux(Ubuntu)の環境にnpmを使ってTypeScriptをインストールし、「Hello, World!」プログラムを実行するところまで解説します。

具体的には↓を見ていきます。

TypeScriptとは？
npmとは？
TypeScriptのインストール
TypeScriptのコンパイル
プログラムの実行

TypeScriptとは？

TypeScript（タイプ・スクリプト）とはWindowsで有名なマイクロソフト社が開発しているオープンソースのプログラミング言語です。
JavaScriptのような文法になっていて、それに加えて型を使うことが出来ます。
TypeScriptで書かれたコードをトランスパイラでトランスパイルすることで、JavaScriptのコードに変換することが出来ます。
変換されたJavaScriptのコードはブラウザで実行できるという寸法です。

TypeScriptのコード
↓トランスパイル
JavaScriptのコード

TypeScriptは静的な型付けを採用しています。
このためC/C++のように静的な型付けによるエラーを検出することが可能です。
最近のWebのフロントエンドではJavaScriptの需要が非常に高まっており、またそれに伴い大規模なJavaScriptによる開発も需要が高まっています。
大規模な開発やセキュアなプログラムの開発では型が必要になることが多いです。そのためTypeScriptの需要は年々高まっていると言えます。

TypeScriptの言語的な特徴としては以下があげられます。

インターフェース、クラス
JavaScript の最新の仕様 ES2018 が使える
ジェネリック可能
型の使用
上位互換（JavaScriptnの）
null/undefinedを安全に使える
エディタによる強い入力補完
外部ライブラリも型を利用可能（型定義ファイルによって）

(参考: TypeScript の概要 - Qiita)

npmとは？

TypeScriptのインストールにはnpmというパッケージマネージャーを使います。
npmはNode.jsのパッケージを管理できるパッケージマネージャーで、Node.jsで動いています。
npmは「Node Package Manager」の略です。

TypeScriptのコードのトランスパイルにはtypescriptというパッケージを使います。
これを使うことでTypeScriptで書かれたコードをJavaScriptのコードに変換することが出来ます。

npmを動かすには環境にNode.jsが必要です。
Node.jsのインストールにはnvmというマネージャーを使うと楽にインストールできます。
これはNode.jsのバイナリを管理するマネージャーです。

npxとは？

npmはバイナリをインストールすることも出来ます。
このバイナリを使用するにはpackage.jsonというファイルにスクリプトのコマンドラインを書いておく必要がありました。
それはめんどくさいということで、npxというコマンドラインからバイナリを実行できるコマンドがnpmにバンドルされるようになっています。
バンドルされるというのはnpmが使える環境であればnpxも使えるということになります。

npxを使えばpackage.jsonにコマンドを記述しなくてもバイナリを実行することが可能です。
実行方法は↓のようになります。

$ npx 実行ファイル名

TypeScriptのインストール

TypeScriptをインストールするには、最初にnpmで↓のようにプロジェクトを作成します。

$ mkdir prj  
$ cd prj  
$ npm init

npm initを実行すると現在のディレクトリのnpmのための初期化が始まります。
この初期化は具体的にはpackage.jsonファイルの作成です。
npm initを実行すると対話的に初期化のための項目の入力がうながされます。
そのため1つずつ入力して行ってpackage.jsonを作成します。
めんどくさい場合はエンターキーを連打しておきましょう。
それかnpm init --yesで入力を省略できます。

npmによるディレクトリの初期化が完了すると↓のようにディレクトリ内にpackage.jsonが作成されます。

$ ls  
package.json

この状態になればTypeScriptのインストールが可能です。
↓のコマンドでtypescriptをインストールします。

$ npm install typescript

↑のコマンドを実行するとインストール画面が表示されます。
インストールが完了するとpackage.jsonは↓のような内容になります。

{  
  "name": "prj",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
  "dependencies": {  
    "typescript": "^4.1.3"  
  }  
}

dependenciesの項目にtypescriptが追加されているのがわかります。

  "dependencies": {  
    "typescript": "^4.1.3"  
  }

このようにnpmではインストールしたパッケージをpackage.json内に記録します。
つまり、環境が壊れてもpackage.jsonが無事であれば、他の環境に元の環境を復元できるということになります。

TypeScriptのコンパイル

↓のようなHTMLファイル「index.html」を作成しておきます。

<html>  
<head>  
    <script src="main.js"></script>  
</head>  
<body>  
</body>  
</html>

scriptタグでmain.jsというファイルを読み込んでいます。
このmain.jsはトランスパイルされた結果のJavaScriptのコードです。

それから「main.ts」というTypeScriptのファイルを↓のような内容で作成します。

console.log('Hello, World!')

このmain.tsはTypeScript用のファイルです。拡張子のtsはTypeScriptを表しています。
このmain.tsをトランスパイルするとmain.jsというJavaScriptのファイルが生成されます。

それでは実際にmain.tsをトランスパイルします。
↓のコマンドを実行します。

$ npx typescript main.ts

トランスパイルが完了すると、実行したディレクトリ以下にmain.jsというファイルが作成されます。

$ ls  
index.html  main.js  main.ts  node_modules  package.json  package-lock.json

プログラムの実行

ブラウザでindex.htmlを開くと、コンソール画面に「Hello, World!」と出力されます。
TypeScriptのコードをトランスパイルしてJavaScriptに変換し、そのJavaScriptのコードをブラウザで実行できたわけです。
これがTypeScriptによる開発の一連の流れです。

おわりに

今回はTypeScriptのインストールと実行まで解説しました。
TypeScriptの人気は年々高まっていますが、どこまでこの人気が続くか見ものですね。

🦝 < フロントエンドは流行り廃りが速いからね

🐭 < 本当にね

ユーニックス総合研究所