スロットとは？ 親コンポーネント側で子コンポーネントの表示内容をガチャガチャやるための仕組み 名前付きスロット 子コンポーネント <template lang="pug"> div slot(name="header") p header（slotの中身はフォールバックコンテンツ・指定がなければこの内容を表示） slot(name</template>…

リクエスト中にページ遷移すると、もう必要ないのにバックエンドでは実行中のリクエスト達がひたすら応答を待ち続けていました。 あまり好ましくないのでページ遷移の際にこいつらを駆逐することにしました。 ポイントは3つ！！！ リクエストの際、CancelTok…

router/index.ts このパラメータ「id」を取得したい { path: '/users/:id', name: 'UserDetailPage', props: true, component: () => import('@/views/UserDetailPage.vue'), }, ↑で「props: true」を定義した上で、以下のように取得した ※props引数から取得…

インストール yarn add vue-router@^4.0.3 src/router/index.ts を作成 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Home", component: () => import("@/views/Home.vue"),</routerecordraw>…

Mapped Typesについて 既存の型を元に動的に新しい型を作る方法を提供する 構文 {[P in K]: T} P はこのMapped Typeの引数型 (parameter type) K はこのMapped Typeの制約型 (constraint type) T はこのMapped Typeのテンプレート型 (template type) 下記の…

keyofについて keyofにオブジェクトを指定すると、そのオブジェクトのいずれかのキー（プロパティ名）を許容するUnion Typeが返却される interface SampleInterface { a: string; b: number; c: boolean; } type Keys = keyof SampleInterface; const aKey: …

継承 abstract class Horse { private jockey: string; constructor(private jockey: string) { } run() { console.log(`${this.getName()}が${this.jockey}を乗せて走る`); } abstract getName(): string; } class MihonoBourbon extends Horse { construct…

Type Alias 再利用したい型に対して名前をつけて管理するための仕組み type User = { id: number, name: string }; const u: User = { id: 1, name: "Jack" }; 交差型で拡張 交差型を使えばインタフェースの継承のようなことができる type GooType = { goo: …

インタフェース interface SquareConfig { color?: string; width?: number; } function execute(config: SquareConfig): void { console.log(config); } // implementsする必要はなくて、型チェッカーはプロパティが一致してるかをチェックする execute({ c…