Vue Composition API에 금형이 망가져서 너무 좋았어요.

이것은 bosyu Advent Calendar 2019 4일째 보도입니다.
잘 부탁드립니다.
bosyu의 프론트 데스크톱은 Vue를 사용하지만 최근 Composition API가 상승했으니 사용하세요~~
이런 느낌.
https://github.com/vuejs/composition-api
이거?
하지만 이런 곳도 가끔 있는데, 며칠 전에 재미있는 곳을 발견해서 적어 놓았어요.
요즘 고칠지도 몰라요.

무슨 일

제목과 같지만 모양이 신기해졌다.
구체적인 코드를 쓰면 다음과 같은 형식이 있다????하계.
nazo.vue

export default createComponent({
  setup () {
    const state = reactive({
      status: 'hoge',
      value: 'fuga'
    });
    const v = state.value;
  }
});

여기서 state 기대는 다음과 같다.

type State = {
  status: string;
  value: string;
}

VScode 등으로state는string

왜?

그래서 어떤 느낌인지 봅시다.

export function reactive<T = any>(obj: T): UnwrapRef<T> {
  if (process.env.NODE_ENV !== 'production' && !obj) {
    warn('"reactive()" is called without provide an "object".');
    // @ts-ignore
    return;
  }

  if (!isPlainObject(obj) || isReactive(obj) || isNonReactive(obj) || !Object.isExtensible(obj)) {
    return obj as any;
  }

  const observed = observe(obj);
  def(observed, ReactiveIdentifierKey, ReactiveIdentifier);
  setupAccessControl(observed);
  return observed as UnwrapRef<T>;
}

이런 느낌이에요.return의 금형이 as로 바뀌어 강도를 느꼈다.
그것은 잠시 언급하지 않겠습니다. 이것은 UnwrapRef<T> 엽서입니다.
저것 좀 봅시다.

export type UnwrapRef<T> = T extends Ref<infer V>
  ? UnwrapRef2<V>
  : T extends BailTypes
      ? T // bail out on types that shouldn’t be unwrapped
      : T extends object ? { [K in keyof T]: UnwrapRef2<T[K]> } : T

// prettier-ignore
type UnwrapRef2<T> = T extends Ref<infer V>
  ? UnwrapRef3<V>
  : T extends BailTypes
      ? T
      : T extends object ? { [K in keyof T]: UnwrapRef3<T[K]> } : T

// ...

// prettier-ignore
type UnwrapRef10<T> = T extends Ref<infer V>
  ? V // stop recursion
  : T 

이런 느낌이에요.ConditionalTypes 금형을 판정한다.
http://www.typescriptlang.org/docs/handbook/advanced-types.html#conditional-types
다음은 이 Ref 의 정의를 살펴보겠습니다.

export interface Ref<T> {
  value: T;
}

태그 요소의 표시 속성을 수정합니다.
즉, value을 구성원으로 보유한 상황에서 Ref를 extends로 간주한다UnwrapRef2UnwrapRef3...흘러간다.
최종 도착UnwrapRef10V.
결과는 처음 쓴 것처럼statestring이 되었다.

파다

https://github.com/vuejs/composition-api/pull/167
홍보는 있지만 Object 중 Object 같은 문제가 생기면 곤란하다.
간단하게 뭘 할 수 있는 느낌은 아니기 때문에 가능하다면 value 최대한 사용하지 않는 것이 최선의 대책이다.
또 Vue-next는 같은 문제가 발생하지 않도록 조치를 취한 것 같다.
https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/ref.ts
그래서 이것과 같은 설치composition-api를 PR로 하는 건가요?
이런 느낌이야.
그 다음은 사악하지만

createComponent({
  setup () {
    const state = reactive({
      status: 'hoge',
      value: 'fuga'
    }) as unknown as { status: string, value: string };
    const v = state.value;
  }
});

unknown라 any라 금형을 한 번 망가뜨려서 겨우 만들었다.
제일 안 되는 느낌이지만

총결산

방법은 매우 어렵다.

즐거웠어요.

as unknow as Hoge이 가장 흉악하다.