Published on

typescriptの簡単なセットアップ方法

Authors
  • avatar
    Name
    ssu
    Twitter

たまに「今の環境とは別に切り離して、typescriptをちょっと動かし、新しいライブラリの動作を試したい」みたいな時があるのですが、いつもセットアップすべきものを忘れてしまうので、typescriptの簡単なセットアップ方法をメモ的に残し、紹介したいと思います。

setupのステップは4つだけです。

1. package.jsonを作ります

まずは、任意のdirectoryを作り。そこで、

yarn init -y

します。そうすると、package.jsonができると思います。

2. typescriptをインストール

次に、typescriptをインストールします

yarn add -D typescript

3. tsconfig.jsonを作る

そして、tsconfig.jsonファイルを作ります。

yarn run tsc --init

これでtsconfig.jsonが出来上がり、typescriptの動作環境は出来上がりました。ちなみに、tsconfig.jsonファイルとは、typescriptがあるディレクトを示し、中にはさまざまなトランスパイルに関する設定を記述することができます。

4. トランスパイルして実行可能にする

最後に、typescriptのファイルをトランスパイルして、実行できるようにします。

touch index.ts

でindex.tsファイルを作ります。 そして、package.jsonファイルを以下のように編集します。

{
  "name": "sample typescript script",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "s": "tsc index.ts && node index.js"
  },
  "devDependencies": {
    "typescript": "^4.8.4"
  }
}

これで、yarn s または、yarn run sで、index.tsがトランスパイルされて、index.jsが実行されるようになります。

P.S 今回は、簡易にtypescriptの環境をセットアップする方法を紹介しました。プロダクションでは、src化にindex.tsを入れたり、buildしたものはbuildディレクトリに分たりした方が良いです。

参考: Download TypeScript

Discuss on Twitter • View on GitHub