TypeScript Advent Calendar 2018 16日目の記事です。
こんにちは@mrsekutです。
つい先日、TypeScriptの3.2がリリースされました。
新しい機能がいろいろ入ったので早速使ってみようと思ったのですが、既存の環境をアップデートして使える状態にするまでにもにょもにょしたのでその時のメモです。
今回は大きく分けて、TypeScript、node.js、VSCodeの3つの設定を触りました。
一つずつ書いていきます。
既存の環境が整っていることを前提に、例としてバージョン3.2を使えるようにする手順を紹介します。
TypeScriptのアップデート
まずTypeScriptのバージョンを上げます。
プロジェクトごとに上げると良いと思いますが、支障がなければグローバルに上げてしまっても良いと思います。
$ npm i typescipt@3.2.1
「@」を付けることでバージョンを指定してインストールできます。-gオプションを付ければ、グローバルにインストールできます。
次に、tsconfig.jsonファイルを編集します。
今回は以下の2点を編集しました。
target: "esnext"
lib: ["esnext"]
「target」で指定するのはコンパイル後のECMAScriptのバージョンになります。
ES2016やES2017などがありますが、今回はESNextを指定します。
ESNextは、将来サポートされる機能も入ったECMAScriptです。
「lib」には、コンパイルに含まれるライブラリを指定できます。
同様にESNextを指定しました。
【参考】What’s new in TypeScript · Microsoft/TypeScript Wiki
Node.jsのアップデート
コンパイル後のJavaScriptをCLIで実行しようとしたのですが動かなかったので、Node.jsのバージョンも上げました。
この機会にnodeのバージョン管理をしてくれるnodebrewを入れました。$ brew install nodebrew
以下のコマンドで、利用可能な最新バージョンを取得します。$ nodebrew install-binary latest
インストール済みのバージョン一覧を確認$ nodebrew ls
今回は、最新のv11.3.0を使います。$ nodebrew use v11.3.0
確認します。$ node -v
これで、実行できるようになりました。$ node hoge.js
【参考】MacにNode.jsをインストール – Qiita
VSCode
最後にVSCodeの設定します。
以上の設定で動くのは動くのですが、新しい文法などはVSCode上では文法エラーとみなされ赤線が引かれてしまいます。
ですので、それに対応するようにVSCodeの設定をしてあげます。
【参考】TypeScript Programming with Visual Studio Code
今のVSCodeがTypeScriptのどのバージョンに設定されているかは、tsファイルを開いた状態で右下に表示されています。
使いたいものがまだ入っていないようなので、最新バージョンのTypeScriptをグローバルにインストールします。
$ npm i -g typescript@3.2.1
cmd-,でVSCodeの設定を開き「typescript.tsdk」で検索をかけてpathを設定します。
ここには自分の環境のtsserver.jsが入っている場所のpathを指定してください。
場所は以下のコマンドで探せます。$ npm list -g typescript
ですので、この場所のlibフォルダのpathを記述します。
僕の環境では以下のように書きました。
"typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
これで赤線も消え、環境構築が整いました。
以上3つの設定のうちVSCodeのもの以外は、アップデートされるたびに行う必要があるかもしれません。
ご参考までに。
補足
書いた後に気づいたのですが、VSCodeのPrettierが対応していないっぽいですね。
新しい記法(例えばBigint)などを一部で使うと、フォーマットされないです。
どなたか解決策をご存知の方がいらっしゃれば教えて頂けると嬉しいです。