読者です 読者をやめる 読者になる 読者になる

nprogram’s blog

フロントエンド開発の学習内容を記載していきます。

Visual Studio Codeを用いたTypeScriptのコンパイル方法について (npm使用)

TypeScript Knockout Tutorial

Visual Studio Codeをインストールしましょう

まずはホームページからVisual Studio Codeをダウンロードしてきます。

そして、以下のように、エクスプローラー関連のチェックボックスにチェックを入れてインストールしてください。

f:id:nprogram:20160621225242p:plain

次に、適当なフォルダ[例]C:\VSCODE_TypeScriptを作成してフォルダ内で右クリックしてOpen with Codeをクリックします。

f:id:nprogram:20160621225823p:plain

その後、画面上で、Ctrl+Shift+Cか右クリック(コマンドプロンプトで開く)で、コマンドプロンプトを開きます。 この操作をすると、このフォルダ階層C:\VSCODE_TypeScriptコマンドプロンプトが開かれます。

Node.jsでJavaScriptコードを実行しましょう

試に、簡単なJavaScriptプログラムを実行して、node.jsを使って実行できるかテストします。 VSCODE_TYPESCRIPTフォルダ階層の横で、ファイルボタンを押して、index.jsファイルを作成します。

f:id:nprogram:20160621231934p:plain

次に、index.jsファイルには、'console.log("Hello. Node.js World!!");'と記載してください。

f:id:nprogram:20160621232507p:plain

最後に、コマンドプロンプト上で、node index.jsを実行すると、Hello. Node.js World!!が表示されます。

f:id:nprogram:20160621233125p:plain

npmを用いて、TypeScriptコンパイラをインストールしましょう

npmコマンドnpm initを実行してpackage.jsonファイルを生成します。 nameは適当な値を入力して、あとはEnterを連打してください。

なお、npmコマンドを使用するためには、先に、node.jsをインストールする必要があります。

package.jsonファイルが生成されました。

f:id:nprogram:20160621231214p:plain

次に、TypeScriptコンパイラをnpmコマンドを用いてインストールします。

次のように入力してください。npm install typescript --save-dev

--save-devはinstallしたlibraryの情報を自動でpackage.jsonに書いてくれるoptionです。

TypeScriptコードをビルドして実行しましょう

先ほどのindex.jsファイルを削除して、同じフォルダ階層にindex.tsファイルを作成して以下のように記述してください。

class Main  // classを指定してクラス化 
{ 
    // コンストラクター 
    constructor() 
    { 
        console.log("Hello! Node.js × TypeScript from Class"); 
    } 
} 

// Mainクラスのインスタンスを作る 
var main:Main = new Main(); 

次に、コマンドプロンプト上で、node_modules\\.bin\\tsc index.tsと入力すると、 index.jsファイルがindex.tsと同じ階層に作られます。 次に、node index.jsを実行すると以下のように表示されます。

f:id:nprogram:20160621234340p:plain

package.jsonの記述で、ビルドして実行をしましょう

package.jsonファイルを以下のように修正します。 修正した箇所は、scriptsフィールドの箇所のみ。

{
  "name": "temp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"node_modules/.bin/tsc index.ts",
    "start":"node index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^1.8.10"
  }
}

index.jsファイルを削除して、コマンドプロンプト上で、npm run buildを入力すると、ビルドが実行されます。 index.jsファイルが生成されるので、コマンドプロンプト上で、'npm run start'を入力すると、JavaScriptコードが実行されます。

f:id:nprogram:20160622000214p:plain

では、次は、ビルドと実行を一度に行いましょう。 scriptsフィールドに'prestart'を追加します。jsonファイルには、以下のように記載します。

{
  "name": "temp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"node_modules/.bin/tsc index.ts",
    "start":"node index.js",
    "prestart":"node_modules/.bin/tsc index.ts"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^1.8.10"
  }
}

npm startコマンドプロンプト上で実行すると、ビルドと実行を同時に行うことができます。

f:id:nprogram:20160622002130p:plain

tsconfig.jsonファイルを用いて、ビルドを制御しよう。

sconfig.jsonファイルを生成するためにコマンドプロンプトnode_modules\\.bin\\tsc --initと入力します。

続きはまた書きます。

npmコマンド学習サイト

以下のページを用いて、私も学習していきます。