##概要
ここにあるようにNode.jsをインストール後、Windows(Win7)64bit版でコマンドライン(コマンドプロンプトからの操作)でTypescriptのインストール・設定を行ったときの記録です。 Node.jsは20160406時点の最新安定板のバージョン5.10.0を使用して作業を行いました。
やっている作業は単純にTypescriptの機能だけを取り込んで、Typescriptファイル作成、Javascriptファイルに変換、HTMLファイルよりJavascriptファイルを読み込み・表示、となります。
##Node.jsのnpmによるTypescriptのインストール
npm install typescript --save-dev
または
npm install typescript -D
を使用したインストールもあるようですが、
今回はわかりやく自PCのどこからでもTypescriptコマンドが使用できるように以下のようにグローバルインストールを行いました。
npm install -g typescript
Typescript用の作業用の適当なフォルダを作成し(フォルダ名テキトーでOK)
mkdir Typescript
cd Typescript
自分の場合さらにもう少しフォルダ構成を切り分けるために、最初のTypescriptプログラム用フォルダとして以下のようなフォルダも作成(フォルダ名テキトーでOK)してその中で作業
mkdir FirstApp
cd FirstApp
最終的には作成した
.../Typescript/FirstApp
フォルダ下に
hello.ts hello.js index.html
の３ファイルがある構成になりました。
以下、サンプルを参考に実際に作成したファイルです。
##Typescriptファイル作成、コンパイル、実行(HTMLよりJS取込表示)
作業用フォルダ内にてソースファイルの hello.ts を作成
class Greeter {
private greeting: string;
constructor(message: string) {
this.greeting = message;
}
public greet() {
console.log("Hello, " + this.greeting);
}
}
var greeter = new Greeter("TypeScript");
greeter.greet();
hello.tsをtscコマンドでコンパイルしhello.jsを生成
tsc hello.ts
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
console.log("Hello, " + this.greeting);
};
return Greeter;
}());
var greeter = new Greeter("TypeScript");
greeter.greet();
変換した hello.js を取り込み・表示する index.html を作成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Typescript!</title>
</head>
<body>
<h1>Hello Typescript!</h1>
<script type="text/javascript" src="hello.js">
</script>
</body>
</html>
あとはindex.htmlを開くと以下のように表示されました。 表示に使用したブラウザはFirefoxのVer.45.0.1です。
console.logによる出力はFirefoxのコンソール表示で見ることができます。 コンソール表示はFirefoxの「ツール」→「Web 開発」→「Web コンソール」→画面下部の「コンソール」タブ選択から表示させることができます。
参考サイト Typescriptインストール・設定
TypeScriptを始める – tscコマンド、Grunt導入、型定義ファイルの使用、tslintで構文チェックなど
TypeScript プログラミング >はじめに >インストール
TypeScript の開発環境構築と周辺ツールの紹介