Typescriptの index signature の key には 他の type は使えないよって話

type UserId = string
type Users = {
  [key: UserId]: User
}

// error: An index signature parameter type cannot be a type alias. Consider writing '[key: string]: string' instead.

index signature の key には string or number しか使えないので、 上記のようなエラーが出ます。

同じようなことで、issueもいくつかあり討論されています。 github.com

僕が index signaturemap を混在していたのが行けないのですが、
UserIdをKeyにして、Userを取得するMapを作成したいだけなら
以下のように書けるのでこっちで使おうと思います。(てか、これがふつう...)

type UserId = string
type Users = Map<UserId, User>

言語仕様も知らないで適当に使っているのは本当に行けないんだなと反省しました...

typescript-jp.gitbook.io

LINEの料金プランを調べた思ったこと

仕事でLINEのボットを作るかもということで、料金体系を調べた。

ベース料金 + メッセージの従量課金 で利用料金がかかるだけだった。
LINEログインや友達登録は課金対象ではない LINE さん すごい! とおもったのですが、

f:id:eggpogg:20210122234949p:plain www.linebiz.com

100万人のユーザを抱えているサービスのボットが、
平均月1回ユーザにメッセージを送ると、200万ほどかかるみたいだった... 😓

f:id:eggpogg:20210122235252p:plain

だから何?って感じでもあるんだけど、クロネコヤマトさんのボットとかで
再配達の連絡したあとに、 にゃんにゃん ってだけのメッセージを送って遊んでたんだけど、
それもヤマトさんの負担になっていたと思うと気がきでならない....(ごめんよぉ。)

IntelliJの Scratch で TypeScript の実行方法

結論から書くとこのプラグインを入れるだけ plugins.jetbrains.com

すると、scratch.ts で自動でファイルの拡張子から
実行するConfigurationを組み立ててくれる 🚀 f:id:eggpogg:20210122002225p:plain


intellij typescript scratch run とかでググってみると
以下のようなフォーラムとか出てきて、
nodeConfigurationparameter--require ts-node/register
設定とか出てくるけど、お便利プラグインがあったよって話

intellij-support.jetbrains.com

macOSでfinderからビデオサイズを小さくする方法

githubで動画投稿ができるようになったけど、10mb未満しか対応していないので
動画をエンコードしてサイズを小さくする方法を調べたのでメモしておく。

外部アプリを入れるくことなく、finderから該当のファイルで右クリックをして
サービス -> 選択したビデオファイルのエンコード でできる。 f:id:eggpogg:20210120235948p:plain

動画のサイズを変更できるので、お好みに変更をする。 f:id:eggpogg:20210121000145p:plain f:id:eggpogg:20210121000159p:plain

今回は H.264 480p を選択した
もともと大きいファイルじゃないので 1mb ほどしか小さくならなかった。 f:id:eggpogg:20210121000350p:plain

アプリを入れずにサクッとできるので、とりあえず使ってみる。
理想は 10mb以下に確実にしてほしい...

Heroku x Route53 でルートドメインで遷移できるようにする

Heroku x Route53 でルートドメインに接続するときにハマったのでメモ

公式では以下のように説明されている devcenter.heroku.com

  1. ドメイン名と同じS3のバケットを作る
  2. S3を静的ホスティングの設定をして、遷移先のドメイン www.example.com にする
  3. Route53でルートドメイン example.com のAレコードをS3のエイリアスで設定をする

だけど、こちらの方法だとhttps のリクエストが出来なかったので、 Route53 と S3 の間に CloudFront を挟む必要がある。

1. ドメイン名と同じS3のバケットを作る
2. S3を静的ホスティングの設定をする
3. 遷移先をドメイン www.example.com にする
4. プロトコルを https にする

f:id:eggpogg:20210120000524p:plain

5. 設定を保存した時に吐き出される、バケットウェブサイトエンドポイントのURLを保存する

f:id:eggpogg:20210120000528p:plain

6.バージニア北部のリージョンで example.com のACMを作成をする

f:id:eggpogg:20210120000532p:plain

7. CloudFrontを作成する
  • Origin Domain Name に S3 の バケットウェブサイトエンドポイントのURL を入力をする
  • Origin ID は自動で入力される f:id:eggpogg:20210120000537p:plain

  • Alternate Domain Names に example.com を入力する

  • Custom SSL Certificate で 作成した ACM を選択する f:id:eggpogg:20210120000541p:plain

あとはデフォルトでも問題ない

8. CloudFront作成後に吐き出せれるエンドポイントのURLを保存する
9. Route53 にexample.com のA レコードで  CloudFrontのエンドポイントにエイリアスを設定する

10分程すると http://example.com , https://example.com がそれぞれ www.example.com にリダイレクトされるようになる。

prettierは改行を保持できない....ということを知った

コードを書く時に、下に長く書く事が多いタイプです。
なので、チェーンで繋いでいる時にも下に書いていきたいのですが、
prettierformatterに使っていると、改行が保持されずに削除されてしまう...

これが

this.$store
  .state
  .map((it) => it.moge)

こうなってしまう

this.$store.state.map((it) => it.moge)

github.com

調べてみるとオプションなどもなく、prettierの実装思想からずれるみたい...

ぐぐってみると、僕とはちょっと違うけどprettier疲れをしている人がいて完全に同意と感じた qiita.com

eslintだけにしようかな...

Typescript x ESLint で引数のみ使用を許可する方法

Javaでやってきた身としては、エラーではなく残しておいてほしかったので調べた。

// .eslint.js

  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }],
  },

オプションの詳しいのはここ乗っている。
eslint.org