• ..

styled-components

    環境構築から JavaScript に変換まで

    ざっとこのようになります。ちなみにyarnを使います。

    1. package.jsonを作ってプロジェクト化する
    2. typescriptインストール
    3. TypeScript の設定ファイルを作る
    4. 適当に.tsファイルを作る
    5. 変換して.jsファイルを作る

    package.json を作ってプロジェクト化する

    適当なディレクトリに移動するか作成して、yarn init -ypackage.jsonを生成します。

    以下の例では/tmp/ts2jsというディレクトリで作業する想定です。

    mkdir -p /tmp/ts2js
    cd /tmp/ts2js
    yarn init -y

    typescript インストール

    /tmp/ts2jsディレクトリ上で以下でインストールします。

    yarn add -D typescript

    package.jsondevDependenciesセクションにtypescriptが追加されれば完了です。

    {
      "devDependencies": {
        "typescript": "^3.4.4"
      }
    }

    TypeScript の設定ファイルを作る

    /tmp/ts2js/tsconfig.jsonとなるようにtsconfig.jsonを作ります。これは「どのファイルを変換対象にするか」や「どこまで TypeScript の機能を使うか」などを設定する為のファイルです。

    ここでは/tmp/ts2js/src/index.tsをこれから作り、/tmp/ts2js/dist/index.jsとなるように出力させたいと思います。なのでそのindex.tsが変換対象できるような設定を追加します。

    これにはincludeセクションとcompilerOptions.outDirセクションをtsconfig.jsonへ置きます。それぞれ、「どのファイルを変換対象にするか」と「どこへ出力するか」の設定です。

    {
      "include": ["src"],
      "compilerOptions": {
        "outDir": "dist"
      }
    }

    srcと設定していますがこれはsrc/**/*のようなものでそのディレクトリ以下すべてのファイルという意味になります。

    では確認するためにindex.tsファイルを作ります。

    mkdir -p /tmp/ts2js/src/
    touch /tmp/ts2js/src/index.ts
    yarn tsc --showConfig

    yarn tsc --showConfigは先ほど作ったtsconfig.jsonを見てちゃんと設定されているか確認するためのコマンドです。実はincludeというのは動的なオプションで変換コマンド実行時にsrc以下のファイルをチェックして都度変換ファイルに含めてくれるセクションです。

    うまく行けばこのようにfilesというセクションが追加された状態のものが表示されると思います。これが動的に設定された変換対象ファイルになります。

    {
      "compilerOptions": {
        "outDir": "dist"
      },
      "files": [
        "./src/index.ts"
      ],
      "include": [
        "src"
      ]
    }

    index.ts ファイルを編集する

    確認のために型を使う簡単な.tsファイルを作ります。こんな感の1足すだけのplusOneを定義・使ってみました。

    const plusOne = (num: number) => num + 1;
    console.log(plusOne(2));

    変換して JavaScript ファイルを作る

    これも以下を実行するだけです。

    yarn tsc

    問題が無ければ/tmp/ts2js/dist/index.jsというファイルが作られているはずです。ついでに実行してみます。

    node dist/index.js
    # 3

    ちゃんと3が得られたのでうまく動いてるようです。