ユーザー定義のTypeGurdを理解した気がするので

TypeGurdについて、理解が浅く実装で困った場面があったのですが、
理解した気がするので、備忘録として記載します。

---

前提

formikというライブラリを使用しており、
以下のような実装をしました

main-component.tsx

import React from 'react';
import {useFormik, FormikContext} from 'formik';
import ChildComponent from './child-component';

export type InitialValues = {
  id: number;
  name: string;
};

const initialValues: InitialValues = {
  id: 1,
  name: '山田 太郎',
};

const MainComponent: React.FC = () => {
  const formikBag = useFormik({
    initialValues,
    onSubmit: () => {},
  });

  return (
    <FormikContext.Provider value={formikBag}>
      <ChildComponent />
    </FormikContext.Provider>
  );
};

export default MainComponent;

child-component.tsx

import {useFormikContext} from 'formik';

const ChildComponent: React.FC = () => {
  const {values} = useFormikContext();

  const displayInfoId = values.id;
  const displayInfoName = values.name;

  return <>{`${displayInfoId}${displayInfoName}`}</>;
};

export default ChildComponent;

「main-component.tsx」のinitialValuesを「child-compnent.tsx」で使用してます。

---

問題

「child-component.tsx」内のvaluesに対し、エラーが検出されます

オブジェクト型は 'unknown' です。

ん？valuesからid,nameが取得できない・・・


となったので、どうにかして取得するため
「child-component.tsx」を以下のように書き換えました。

child-component.tsx

import {useFormikContext} from 'formik';
import {InitialValues} from './main-component';

const ChildComponent: React.FC = () => {
  const {values} = useFormikContext();

  const typeGurdFormikVal = (
    formikValues: unknown,
  ): formikValues is InitialValues => {
    return formikValues !== undefined;
  };

  const displayInfoId = typeGurdFormikVal(values) ? values.id : '';
  const displayInfoName = typeGurdFormikVal(values) ? values.name : '';

  return <>{`${displayInfoId}${displayInfoName}`}</>;
};

export default ChildComponent;

無事、エラーが検出されなくなりました。