※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。
次のページ＞
TypeScriptの型システムの基礎

Ubuntu20.04LTSでTypeScriptの環境を構築

web開発 javascript フロント開発 トランスパイル TypeScript ts ubuntu

投稿日：2020年11月8日

このエントリーをはてなブックマークに追加

はじめに

この記事ではUbuntu20.04LTSにTypeScriptの環境をインストールする方法について解説していきます。

TypeScriptとは

TypeScriptはJavascriptのベースの機能を拡張し、静的型付けの機能を追加した言語です。

この言語はJavascriptにトランスパイルすることができます。

自分が大きく感じるメリットとしては以下のような点があります。

  • サーバー側とフロント側で同じ仕様で記述できる
  • 変数に型をつけることができる
  • プログラム中のバグを公開前のトランスパイルの時点で発見することができる
  • 新しい言語仕様を利用できる
  • エディタのインテリセンスを効果的に利用できる

TypeScriptのインストール

nodejsのインストール

まずはパッケージマネージャaptをつかってnodejsをインストールします

。

ターミナル
$ sudo  apt update  # パッケージマネージャの更新
$ sudo apt install nodejs  # nodejsのインストール
$ node --version  # インストールの確認
v10.15.0

npmのアップデート

nodejsにはCLIのnpmというパッケージマネージャも付属しています。

一応、このnpmを最新のものにアップデートしておきましょう。

ターミナル
$ npm --version
6.10.2
$ npm install --global npm@latest  # npmのアップデート
$ npm --version
6.14.8

typescriptのインストール

アップデートしたnpmを使ってTypeScriptをインストールしましょう。

ローカルの環境全体で使えるようにするには--global、または-gオプションをつけます。TypeScriptはトランスパイルにだけ使用して、デプロイする対象に含める必要はないため、グローバルのインストールで問題ないでしょう。

もし、特定のワーキングディレクトリでのみ使用したい場合にはnpm initでディレクトリを初期化した後、--save-devオプションを付けたnpm installコマンドを実行しましょう。

ターミナル
$ npm install --global typescript  # インストール
$ tsc --version   # インストールの確認
Version 4.0.5

HelloWorldでインストールを確認

ここで簡単なサンプルプログラムを動かして、TypeScriptが問題なく動くことを確認

しましょう。

まずは作業ディレクトリを作ります。

$ mkdir ts_sample
$ cd ts_sample

.ts形式のサンプルプログラムを作成しましょう。

ts_sample/hello-world.ts
/**
 * 
 * @param message 表示したいメッセージ
 */
function say (message: string){

    console.log(message);
}

let message: string = "Hello World";

say(message);

JavaScriptにトランスパイルしてみましょう。

ターミナル
$ tsc hello-world.ts

トランスパイルで生成したJavascriptファイルをnodejsで実行してみましょう。

ターミナル
$ node hello-world.js
Hello World

これでフロントで利用できる以下のようなJavaScriptが生成されます。

ts_sample/hello-world.js
/**
 *
 * @param message 表示したいメッセージ
 */
function say(message) {
    console.log(message);
}
var message = "Hello World";
say(message);

トランスパイルによって空行が削除され、letがvarになっていることが確認できます。

さいごに

参考書籍

このエントリーをはてなブックマークに追加
次のページ＞
TypeScriptの型システムの基礎
関連記事
記事へのコメント
　　　　
検索
カテゴリ
Web開発
機械学習
プログラミング
その他
サーバー開発
Linux
目次