TypeScriptによるカレンダー

これは何?

以前作ったJavaScriptによるカレンダーをTypeScriptで書き直してみました。

GitHubにも置いてあります。ソースはそちらを参照してください。

https://github.com/kmaebashi/tscalendar

実際に動くものを貼っておきます。以下です。

――まあ、JavaScript版と何も変わりませんけれども。

使い方もJavaScript版と同じですので、そちらを参照してください。

環境構築

TypeScriptは環境構築が必要なので、一応手順を書いておきます。

Node.jsのインストール
TypeScriptのコンパイラであるtscはNode.jsで動くので、まずNode.jsをインストールします。
https://nodejs.org/en/
TypeScriptのインストール
Node.jsを入れたら、npmでTypeScriptをインストールできます。
```
C:\test>npm install -g typescript
```
tsconfig.jsonを作る
コンパイルオプションとか、ソースの場所とか、コンパイル後のJavaScriptの置き場所を指定するファイルtsconfig.jsonを作ります。まず、「tsc --init」で雛型を作ります。
```
C:\test>tsc --init
```
中身を見るとほとんど「//」でコメントアウトされていますが、必要な部分のみ設定します。今回は、カレントディレクトリ以下のtsフォルダにTypeScriptのコードを置いて、コンパイルすることでjsフォルダにJavaScriptが出力されるように設定します。
```
{
  "include": [
    "ts/**/*.ts"
  ],
  "compilerOptions": {
  (中略)
    "outDir": "./js",
  (後略)
```
includeを追加してコンパイル対象のソースを指定します。「ts/**/*.ts」と指定すると、ts以下のすべてのフォルダのすべての.tsをコンパイルします。そして、出力先のフォルダは、outDirで設定します。コメントアウトしてあるoutDirの行を探して「//」を外し、js以下に出力するよう設定します。
コンパイルする
あとは、tsフォルダの下にTypeScriptのソースを置いて、tsconfig.jsonのあるフォルダでtscを実行するだけです。
```
C:\test>tsc
```
これで、jsフォルダの下にJavaScriptが出力されます。

公開日: 2024/11/09

不具合等ありましたら、掲示板にご連絡願います。

ひとつ上のページに戻る