TypeScriptのメモ

どうでもいい前書き

そもそもプログラマーでもなんでもないので TypeScript だとか知らないのである

ここ２，３年は Discord bot のために python 触ったくらいである

C や C#で遊んでいたのは遠い日の過去である

ググりにググった記録である

配列を json 文字列にする

---
// array配列
JSON.stringify(array);

TypeScript で json ファイルを読み込む

tsconfig.json に以下のように追記する

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": [
        "src/components/*"
      ],
      "@layouts/*": [
        "src/layouts/*"
      ],
      "@styles/*": [
        "src/styles/*"
      ]
    },
    "strict": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true
  },
  "extends": "astro/tsconfigs/strict"
}

あとは普通に import できる

---
import DoujinItems from "../data/doujin.json";

配列の map の return 省略

そもそも javascript をまったくわかっていないのだからいろいろやりようがなかったので map とアロー演算子 (=>) を調べた。

return があったりなかったりすることがあったので調べたら以下のようなことだった。

---
// returnを省略しない
<ul class="tags">
  {
    tags.map((tag: string) => {
      return (
        <li class="tag">
          <a href={`/tags/${tag}`}>{tag}</a>
        </li>
      );
    })
  }
</ul>

// returnを省略
<ul class="tags">
  {
    tags.map((tag: string) => (
      <li class="tag">
        <a href={`/tags/${tag}`}>{tag}</a>
      </li>
    ))
  }
</ul>

TypeScript で import するとき

tsconfig.json で path を指定しておけば以下のようにディレクトリ位置を気にせずにインポートできる。

---
// 以下は例です
// @components = パス名
// Tag.astro パッケージ名

import "@components/Tag.astro";

以下は Astro の tsconfig.js

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@styles/*": ["src/styles/*"]
    },
    "strict": true
  },
  "extends": "astro/tsconfigs/strict"
}