| /* | |
| * With [email protected], Effect-A is triggered, then Effect-B is triggered. (expected) | |
| * With [email protected], Effect-B is triggered, then Effect-A is triggered. | |
| * | |
| * `useLayoutEffect` is more appropriate for Effect-A, maybe. | |
| * | |
| * BTW, behaviours will be same if removing React.memo call (line.39) | |
| */ | |
| const EditorWrapper_: React.VFC<{ |
| import heapq | |
| from typing import List, Tuple | |
| def calc_costs(N: int, MAP: List[Tuple[int, int]], start: int) -> List[int]: | |
| """ | |
| 指定された都市から各都市への最小コストを計算する | |
| MAP: list of { index: 都市, value: (行先の都市, コスト) } | |
| """ |
| from collections import deque | |
| K = int(input()) | |
| TEXT = input() | |
| N = len(TEXT) | |
| ORD_A = ord('a') # 97 | |
| # a ～ z の文字ごとの出現位置 | |
| alphabets = [deque() for _ in range(26)] | |
| min_index = 0 |
vue-class-component + vue-property-decorator で作ったコンポーネントをなるべくストレスなくTSXで使うための仕組みを考えていて、 vue-tsx-supportにこんな感じのHelperを追加しようかと検討中
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { DefineProps, TsxEvent, InnerScopedSlot } from "vue-tsx-support";
@Component
class MyComponent extends Vue {
| SOLVED! | |
| 1 2 3 4 5 | |
| A ○ ○ ○ ○ ○ | |
| B ○ ○ ○ ○ ○ | |
| C ○ ○ ○ ○ ○ | |
| D ○ ○ ○ ○ ○ | |
| E ○ ○ ○ ○ ○ | |
| step 1: E5 |
仮に、Vue.extendに渡されたオプションの型を出来上がったコンポーネントから参照可能になるとする。 これはそれを疑似的に可能にするためのヘルパ
/*
* const Component = createComponentExperimental({ ... }); でコンポーネントを定義すれば
* typeof Component["_options"] でオプションの型を取得できる
*/
import Vue, { VueConstructor } from "vue";
import { ThisTypedComponentOptionsWithRecordProps } from "vue/types/options";
| import Vue, { VNode, CreateElement } from "vue"; | |
| import { RecordPropsDefinition } from "vue/types/options"; | |
| import { TsxComponent } from "vue-tsx-support"; | |
| export function vueAsync<Props>(definition: { | |
| props?: RecordPropsDefinition<Props>; | |
| renderAsync(this: Vue & Props, h: CreateElement): Promise<VNode>; | |
| loading(this: Vue & Props, h: CreateElement): VNode; | |
| }): TsxComponent<Vue, Props> { | |
| const { props, renderAsync, loading } = definition; |
| import Component from "vue-class-component"; | |
| import { Base, PropsDef, ScopedSlots } from "vue-tsx-support/lib/experimental"; | |
| @Component | |
| class App extends Base { | |
| // decoratorの引数に入れる代わりにここで指定する | |
| // $propsの型が { message: string, important: boolean } として推論される | |
| // 外部のtsxからAppを使う場合はimportantは省略可能になる | |
| // | |
| // static propsDef = { ... } にしていないのは、App<T>みたいなコンポーネントを書いたときに |
| import { RecordPropsDefinition } from "vue/types/options"; | |
| // Propsの定義から、required指定されたprop名を抽出する | |
| // const a = { foo: String, bar: { type: String, required: true as true }, baz: { type: String, required: false } }; の時、 | |
| // RequiredPropNames<typeof a> は "bar" | |
| export type RequiredPropNames<PD extends RecordPropsDefinition<any>> = ({ | |
| [K in keyof PD]: PD[K] extends { required: true } ? K : never | |
| })[keyof PD]; | |
| // Propsの定義から、required指定されていないprop名を抽出する |
| // モジュールをマークするためのマーカーインターフェイス | |
| interface Module { | |
| _module_: 1 | |
| } | |
| // テスト用インターフェイス | |
| interface Test { | |
| foo: string; | |
| bar: number; | |
| baz: { |