31
40

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TypeScriptを環境構築をして試してみよう

Last updated at Posted at 2022-05-11

はじめに

筆者はWindows環境を使用していますので、
もしOSが違う場合は、コマンド部分など自身の環境によって、
適宜読み替えて頂けると良いかと思います。

Node.jsをインストール

TypeScriptは、最終的にJavaScriptにコンパイル(トランスパイル)されます。
そのためTypeScriptコンパイラのためのNode.jsが必要になります。

こちらからインストーラーをダウンロードします。
特に理由がなければ最新版で良いかと思います。

TypeScriptコンパイラをインストール

ターミナルやコマンドプロンプトでコマンドを入力し実行します。

npm install -g typescript

これでtscコマンドが使用可能になったので、
バージョンを確認してみます。

tsc -v
Version 4.6.4

このように表示できればOKです。

tsファイルの作成して画面表示する

拡張子.tsはTypeScriptで使われる拡張子です。
Hello, world!を表示させるために、まずはtestフォルダを作成しその内にHTMLファイルとtsファイルを用意します。

test.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1 id="test1"></h1>
</body>
<script src="test.js" type="text/javascript"></script>
</html>
test.ts
const message:string = "Hello, world!";
window.onload = () => {
    const test1 = document.getElementById("test1");
    test1.innerText = message;
}
test
├─ test.html
└─ test.ts

画面に文字を表示するだけの非常に簡単なコードです。

tscコマンドでコンパイルする

tsファイルをjsファイルにコンパイルします。

tsc test.ts

コンパイルが成功すると、このようなjsファイルが生成されます。
中身もしっかり変わっています。

test.js
var message = "Hello, world!";
window.onload = function () {
    var test1 = document.getElementById("test1");
    test1.innerText = message;
};

フォルダ構成は以下のようになります。

test
├─ test.html
├─ test.js
└─ test.ts

画面を表示する

あとは、
Chromeを起動して表示できるかを確認します。

start chrome C:\hoge\test\test.html

スクリーンショット.png

このように表示できれば成功です。
非常に簡単でしたね。

参考

31
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
40

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?