TypeScriptを書く環境を3分で構築。Parcelで。

カテゴリ フロントエンド

タグ ,

TypeScriptが便利だ。生のJavaScriptを触るのが怖く感じる程度に。

環境構築

# ディレクトリ作成
mkdir hello-typescript
cd hello-typescript

# package.json 作成
# -y オプションですべてYESで答えておくと楽
yarn init -y

# parcel コマンド `yarn parcel` を使えるようにする
# package.json の scripts 内では、`parcel` が利用できるようになる
yarn add -D parcel-bundler

# ソースディレクトリ src/ を作っておく
mkdir src

次に、必要そうなファイルをコピペする。

.editorconfig

# editorconfig.org

root = true

[*]
end_of_line = lf
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{php,py}]
indent_size = 4

[*.blade.php]
indent_size = 2

[Makefile]
indent_style = tab

[*.{txt,tsv,csv}]
indent_style = tab
insert_final_newline = false
trim_trailing_whitespace = false

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    ".git",
    "node_modules",
    "**/*.spec.ts"
  ]
}

package.jsonscripts を追加したりしたら、

package.json

{
  "name": "hello-typescript",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "yarn clear && parcel build src/index.html --no-source-maps",
    "clear": "rm -rf dist"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.3"
  }
}

コーディングに取り掛かることができる。

src/index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Hello world!</p>
  <script src="script.ts"></script>
</body>
</html>

src/script.ts

console.log('hello')

<script src="script.ts">のように、いきなり .ts ファイルを書けるのがすごい。

style.css の箇所も、拡張子を .sass とか .scss にするだけでSassとして読み込むことができる。

次に開発サーバを起動する。

yarn dev
> yarn run v1.15.2
> $ parcel src/index.html
> Server running at http://localhost:1234
> ✨  Built in 801ms.

あとは http://localhost:1234 をブラウザで開くだけで確認することができる。ソースを保存した瞬間にブラウザが更新されるホットリロードにも対応。

ここで package.json を確認してみると。

package.json

"devDependencies": {
  "parcel-bundler": "^1.12.3",
+  "typescript": "^3.5.1"
}

自動的に typescript が追加されている。すばらしい。

まとめ

Parcelを使って気軽にTypeScriptにチャレンジしてみよう。