TypeScriptのメモ

どうでもいい前書き

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

ここ2,3年は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"
}