
Viteを使った方が楽だけど、できるだけシンプルな環境を作りたい気持ちでesbuildを触っています。


### configファイルを作成する場合
watchオプションを有効にした時、ビルド情報を出力するため[logLevel](https://esbuild.github.io/api/#log-level)をinfoにすると良い。
```javascript
// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  logLevel: 'info',
})
```
```json
// package.json
{
  ...
  "scripts": {
    "build": "node esbuild.config.js",
  }
  ...
}
```



### CSS Module + TypeScriptで利用したい場合
`esbuild-css-modules-plugin`をインストールしPluginとして読み込む([GitHubリポジトリ](https://github.com/indooorsman/esbuild-css-modules-plugin))


declareファイルを`src/`以下に置いておく。
```typescript
// index.d.ts
declare module '*.css' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}
```


### 周辺用語
- CSS modules
- PostCSS


### 参考文献
- [GitHubリポジトリ - esbuild](https://github.com/evanw/esbuild)
- [How to set up CSS Modules with esbuild](https://how-to.dev/how-to-set-up-css-modules-with-esbuild)
- [GitHubリポジトリ - esbuild-css-modules-plugin](https://github.com/indooorsman/esbuild-css-modules-plugin))
- [esbuild の機能が足りないならプラグインを自作すればいいじゃない](https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin)

esbuildを触った際の雑記

### 結論
ts-jest?esmで書いてるから？とりあえずでimportするのやめよう。

### 状況
Jestの右も左もわからないがfetcをmockしてゴニョゴニョしていた。  
[公式の例](https://jestjs.io/docs/mock-function-api/#jestmockedsource)にもnode-fetchを使った例が載ってるぐらいなので、コピペして動かそうとしていたら問題発生。


以下のエラーが発生した。
```jsstacktrace
TypeError: mockGetImageFromWeb.mockClear is not a function
  23 |
  24 |   afterEach(() => {
> 25 |     mockGetImageFromWeb.mockClear()
     |                         ^
  26 |   })
  27 |   test('should be defined', () => {
  28 |     expect(getImageFromWeb).toBeDefined()
```

コピペしたコードはこれ
```js
import {expect, jest, test} from '@jest/globals';
import type {fetch} from 'node-fetch';

jest.mock('node-fetch');

let mockedFetch: jest.Mocked<typeof fetch>;

afterEach(() => {
  mockedFetch.mockClear();
});

test('makes correct call', () => {
  mockedFetch = getMockedFetch();
  // ...
});

test('returns correct data', () => {
  mockedFetch = getMockedFetch();
  // ...
});
```


### 対応
コピペしてきたtestファイルで以下のインポート文を削除したら動いた。
```js
import { expect, jest, test } from '@jest/globals'
```

### 参考文献
- [Mock Functions · Jest](https://jestjs.io/docs/mock-function-api/#jestmockedsource)
- [How To Mock Fetch in Jest | Leigh Halliday](https://www.leighhalliday.com/mock-fetch-jest)




Jest(ts-jest)で作ったはずのmockがundefinedになるエラー


### TL;DR
個人的推しは2個目のこっち。
```ts
type Impossible<K extends keyof any> = {
  [P in K]: never;
};

type NoExtraProperties<T, U extends T = T> = U & Impossible<Exclude<keyof U, keyof T>>;
```

### 解決したい事象
次のようなコードはTypeScriptではエラーになりません。
```ts
interface User {
  name: string
  email: string
}
const user = {
  name: 'John',
  email: 'john@sample.example',
  password: 'password'
}

// passwordは型定義にはない
function checkUser(input: User): boolean {
  return !!input.name && !!input.email
}
checkUser(user)
```

これでは必要のないpasswordというプロパティも取り回してしまい、不都合がある場合もあります。


### 解決策
stack overflowでは次の2019年に投稿された2つの解決策が支持を得ていました。

#### 解決策1
```ts
type StrictPropertyCheck<T, TExpected, TError> = Exclude<keyof T, keyof TExpected> extends never ? {} : TError;
```
これを先ほどの例に当てはめれると次のようになります。
```ts
function checkUser<T extends User>(
  input: T & StrictPropertyCheck<T, User, 'MyError'>
): boolean {
  return !!input.name && !!input.email
}
checkUser(user)
```

```jsstacktrace
型 '{ name: string; email: string; password: string; }' の引数を型 '{ name: string; email: string; password: string; } & "MyError"' のパラメーターに割り当てることはできません。
  型 '{ name: string; email: string; password: string; }' を型 '"MyError"' に割り当てることはできません。ts(2345)
```


#### 解決策2
```ts
type Impossible<K extends keyof any> = {
  [P in K]: never;
};

type NoExtraProperties<T, U extends T = T> = U & Impossible<Exclude<keyof U, keyof T>>;
```
例は以下
```ts
function checkUser<T extends User>(input: NoExtraProperties<User, T>): boolean {
  return !!input.name && !!input.email
}
checkUser(user)
```
```jsstacktrace
型 '{ name: string; email: string; password: string; }' の引数を型 'NoExtraProperties<User, { name: string; email: string; password: string; }>' のパラメーターに割り当てることはできません。
  型 '{ name: string; email: string; password: string; }' を型 'Impossible<"password">' に割り当てることはできません。
    プロパティ 'password' の型に互換性がありません。
      型 'string' を型 'never' に割り当てることはできません。ts(2345)
```
どのプロパティがエラーとなるのかがわかりやすい点と利用するときの記述の簡単さが推しポイントです。  
その代わり、Impossibleの使い道が他に思いつかない点が少し気がかりです。  
コチラの方が個人的には好みです。  


### 参考文献
- [Forcing excess-property checking on variable passed to TypeScript function - Stack Overflow](https://stackoverflow.com/questions/54775790/forcing-excess-property-checking-on-variable-passed-to-typescript-function)
- [Is it possible to restrict TypeScript object to contain only properties defined by its class? - Stack Overflow](https://stackoverflow.com/questions/49580725/is-it-possible-to-restrict-typescript-object-to-contain-only-properties-defined)

オブジェクトのプロパティを検査したい時の解決策を2つ紹介

TypeScriptでオブジェクトのプロパティをチェックしたい時の解決方法2選


## はじめに
私はTypeORMについてかなりネガティブ寄り
な意見を持っています。  
これはTypeScript環境でのORMは[Prisma](https://www.prisma.io/)が1強とされる2023年、そんな時期に”Tier2以下”とされるORMを使うことを強いられたからにほかならないと思いますが、その”Tier2以下”から見える景色というのは貴重だという思いで、自分から見えた景色を書いていきます。  
ORMの厳密な定義はわかりませんが、ORMかそうじゃないかという論争をたまに見かけます。自分には判断がつかないのでTypeORMやPrismaによき期待される層のことを総称してORMとこの記事の中では呼びます。  

## ここがだめだよTypeORM
### 型が取り出しづらい
まずTypeORMのテーブル定義はClassとデコレータで行われます。
```ts
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm"

@Entity({ database: "secondDB" })
export class User {
    @PrimaryGeneratedColumn()
    id: number

    @Column()
    firstName: string

    @Column()
    lastName: string
}
```

リレーションの記述もこれに従います。  

```ts
@Entity({ database: "secondDB" })
export class User {
    @PrimaryGeneratedColumn()
    id: number

    @Column()
    firstName: string

    @Column()
    lastName: string

    @OneToMany(() => Photo, (photo) => photo.user)
    photos: Photo[]
}
```

次にUserテーブルから条件に一致するデータを取り出すときはこう書きます。
```ts
userRepository.find({
      where: {
        firstName: "Timber",
        lastName: "Saw",
    },
})
```
ここにもうTypeORMの嫌なところが顔を出します。  
上のコードの返り値からPromiseを解決させると`Userインスタンス`が現れます。  
つまり、この型には`{ photos: Photo[] }`が含まれています。もちろん実行結果にはphotosは含まれず、relation先も含めて取得する場合はそれ用のオプションがあります。  
最悪ですね。  
  
対応作はもちろんあって、元のUserからOmitしたものをベースに使用し、オプション次第で自分たちで型を組み立てるということもできるわけですが、二度手間です。Prismaならここらもうまくやってくれます。  

ちなみに[クエリビルダ](https://typeorm.io/update-query-builder)として使っても一緒です。（Prismaは最近クエリビルダでSQLを書いたらそのSQLに応じた型を提供してくれるようになったというニュースを最近みました。実際にまだ使ってないのでどの程度のものなにかは知りません。）  

### いまだにメジャーバージョンがリリースされてない

TypeORMの名前はよく聞くかと思いますが、実はまだv0.3あたりで、数年前にでました。それまでv0.1やv0.2です。  
0.2から0.3で破壊的な変更も入っています。  

## 個人的な所感
TypeORMはTypeScriptバックエンドの初期を担ったツールという印象で、今ではもう時代遅れだと感じます。  
その理由は自分の中で明確で、テーブル定義もTypeScriptで行おうとした点にあると思っています。  
リレーショナルデータベースでよく使う機能に限って言っても、デコレータは使わないシンプルなTypeScriptの表現力でカバーしきれていません。そこを近道的にクラスとデコレータで表現をしたため行き詰まり、Prismaにその座を奪われたという印象です。PrismaはDSLですしね。  
ソフトウェアの栄枯盛衰のサイクルについて学びがあったような、なかったような気がします。  
素直に時代にあった選択肢を選択しよう。  


### 参考文献
- [Prisma | Simplify working and interacting with databases ](https://www.prisma.io/)
- [Update using Query Builder | TypeORM](https://typeorm.io/update-query-builder)


私が知ってるTypeORMについて、またはPrismaとの比較


### 疑問
typescriptをjavascriptを挟まずにネイティブコードにコンパイルするようなプロジェクトはないのか？

### 自分なりの回答
ないよ。

DenoがTypeScriptコードをサポートしているが、中ではコンパイラが一度JavaScriptに変換している。

マイクロソフトがTypeScriptコンパイラAPIをwikiにしてくれている。
[https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API)

僕の疑問に追記する形で更新しています。

ikmnjrd.github.io

TypeScriptの投稿記事一覧