2021-02-02

久しぶりにOSS活動をした

DeepLAPIのAPIClientを作っているdeep-clientの日本語の値が
間違っていたのでPRを送ったら速攻でマージされた. github.com

送ったPR github.com

たいした修正ではないけど、
やはり承認欲求が得られて良い

ただ、久しぶりにOSS活動するとやり方を忘れるのでメモ

CONTRIBUTE.md があれば読んで、対応する
無い場合はRepositoryをforkする
ローカルでブランチを切って修正をする
PushしてPRを作成すると、どのRepositoryのブランチにマージするか選べる
master or main ブランチに修正内容を添えてPRを作って待つ。

2021-01-27

Nuxt x TypeScript でVuetifyのComponentのメソッドの呼び出し方

VuetifyがまだTypeScriptに対応していない状態なので、
自分でVFormのinterfaceを作成をして、$refsの値をキャストすることで使用できる。

<template>
  <div>
    <v-form ref="form"></v-form>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

interface VForm extends Vue {
  reset(): void
  resetValidation(): void
  validate(): boolean
}

export default Vue.extend({
  mounted() {
    const form = this.$refs.form as VForm
    form.reset()
  },
})
</script>

使用できる関数は公式サイトを見るか vuetifyjs.com

実際にコードを見るか github.com

参考 github.com

2021-01-26

Nuxt x TypeScript の $refs で Vueコンポーネントの関数の呼び方

// components/Hoge.vue

<template>
  <div></div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'Hoge',
  methods: {
    moge(): string {
      return 'moge'
    },
  },
})
</script>

// page/index.vue

<template>
  <div>
    <Hoge ref="hoge" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Hoge from '~/components/Hoge.vue'

export default Vue.extend({
  mounted() {
    const hoge = this.$refs.hoge as InstanceType<typeof Hoge>
    console.log(hoge.moge())
  },
})
</script>

$refsの実装は以下のようになっていた

VueかEelementが返ってくる。 HogeコンポーネントはVueクラスの拡張クラスなので、返り値の抽象化されたVueから辿れるようになっている 👀

readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] }

InstanceTypeの実装は以下になっている

名前と説明の通りで、Constructor関数で作成されるインスタンスの型のTypeを取得する 🚀

/**
 * Obtain the return type of a constructor function type
 */
type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;

www.typescriptlang.org

2021-01-25

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 signature と map を混在していたのが行けないのですが、
UserIdをKeyにして、Userを取得するMapを作成したいだけなら
以下のように書けるのでこっちで使おうと思います。(てか、これがふつう...)

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

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

typescript-jp.gitbook.io

2021-01-22

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

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

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

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

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

f:id:eggpogg:20210122235252p:plain

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

ヤマト運輸のLINEに問い合わせする時に語尾に「にゃ」をつけて猫になるとヤマトさんも猫になってくれるの好きでわりと頻繁にやっちゃう。 pic.twitter.com/qdTGM14PYj
— ichigo (@ichiRingo) 2020年4月7日

2021-01-21

IntelliJの Scratch で TypeScript の実行方法

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

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

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

intellij-support.jetbrains.com