要約
- 「5分で実行TypeScript」みたいなテキストがあったので動かしてみた
- グローバルにTypeScriptをインストールするのはポータビリティが下がるので避けたかったが、
-gをつけないサンプルがすぐには見つけられなかったので、tsファイルをコンパイルできるようになるまでの手順を記録しておこうと思った
背景
仕事でフロントを少し触るもののはまだよくわからず、javascriptは静的型付けではないので大規模開発では大変そうという印象ばかり先行していたところ、型があるということで同僚にも勧められたTypeScriptを始めようと思いました。
目標
Microsoftの「TypeScript in 5 minutes」というテキストがあったのでこれにそってtsファイルをjsにしてみる。
https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tutorials/TypeScript%20in%205%20minutes.md
環境
Node.js: v9.7.1 (ndenv管理)
npm: 5.6.0
コマンド
package.json作成
% cd ~/typescript-tutorial-qiita
% npm init
とりあえず名前以外は全部yesにしておきます。
{
"name": "typescript-tutorial-qiita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Toriyabot",
"license": "ISC"
}
typescriptのインストール
% npm install --save-dev typescript
11 "devDependencies": {
12 "typescript": "^2.8.1"
13 }
package.jsonのdevDependenciesにTypeScriptが入りました。
(参考)--saveと--save-devの使い分け
https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95
tsconfig.jsonの設定
tsconfig.jsonがあるディレクトリがTypeScriptのルートになります。
空でも実行できます(デフォルトの値でコンパイルされるようですね?)。
設定例
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../../built/local/tsc.js",
"sourceMap": true
},
"include": [
"src/**/*",
"*.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
include, excludeはコンパイルに含めるかどうかなのでそのままの意味ですね。
ひとまずプロジェクトのルートに適当なtsファイルをあとで作るのでそれも指定しておきます。
(参考) tsconfig.jsonについて
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
tsファイル
動かしてみるだけなので型アノテーションだけでコンパイルを試してみます
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Toriyabot User";
document.body.innerHTML = greeter(user);
npm run tsc greeter.ts
npm ERR! file ~/project/typescript-tutorial-qiita/package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected token } in JSON at position 182 while parsing near '...ied\" && exit 1",
npm ERR! },
npm ERR! "author": "Tori...'
npm ERR! File: ~/project/typescript-tutorial-qiita/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse
npm ERR! A complete log of this run can be found in:
npm ERR! ~/.npm/_logs/2018-04-09T14_48_33_273Z-debug.log
おや、package.jsonの記述が足りなかったですね。
tscの登録
scriptsに "tsc": "tsc"を追記しました。
tscはtypescript compilerの略です。
{
"name": "typescript-tutorial-qiita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"tsc": "tsc"
},
"author": "Toriyabot",
"license": "ISC",
"devDependencies": {
"typescript": "^2.8.1"
}
}
% npm run tsc greeter.ts
> typescript-tutorial-qiita@1.0.0 tsc ~/project/typescript-tutorial-qiita
> tsc "greeter.ts"
% ls
greeter.js greeter.ts node_modules package-lock.json package.json
jsファイルが生成されました。
function greeter(person) {
return "Hello, " + person;
}
var user = "Toriyabot User";
document.body.innerHTML = greeter(user);
成果物の確認
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
予定通りjsが機能したようです 