How to use the @polkadot/types.getTypeDef function in @polkadot/types

return ['Vec'].includes(type)
          ? 'Vec'
          : 'Vec';

      default:
        return type;
    }
  })(def);

  let Component = findOne(type);

  if (!Component) {
    try {
      const instance = createType(registry, type as any);
      const raw = getTypeDef(instance.toRawType());

      Component = findOne(raw.type);

      if (Component) {
        return Component;
      } else if (instance instanceof BN) {
        return Amount;
      } else if ([TypeDefInfo.Enum, TypeDefInfo.Struct].includes(raw.info)) {
        return findComponent(raw, overrides);
      }
    } catch (error) {
      // console.error(error.message);
    }

    // we only want to want once, not spam
    if (!warnList.includes(type)) {

return ['Vec'].includes(type)
          ? 'Vec'
          : 'Vec';

      default:
        return type;
    }
  })(def);

  let Component = findOne(type);

  if (!Component) {
    try {
      const instance = createType(type as any);
      const raw = getTypeDef(instance.toRawType());

      Component = findOne(raw.type);

      if (Component) {
        return Component;
      } else if (instance instanceof BN) {
        return Amount;
      } else if ([TypeDefInfo.Enum, TypeDefInfo.Struct].includes(raw.info)) {
        return findComponent(raw, overrides);
      }
    } catch (error) {
      // console.error(error.message);
    }

    console.warn(`Cannot find Component for ${type}, defaulting to Unknown`);
  }

return GenericCall.filterOrigin(meta).map((arg): { name: string; type: TypeDef } => ({
    name: arg.name.toString(),
    type: getTypeDef(arg.type.toString())
  }));
}

const params = value.typeDef.map(({ type }): { type: TypeDef } => ({
    type: getTypeDef(type)
  }));
  const values = value.data.map((value): { isValid: boolean; value: Codec } => ({

function formatVector (vector: Vec): React.ReactNode {
  const type = getTypeDef(vector.Type);
  const values = vector.toArray().map((value): { isValid: boolean; value: Codec } => ({
    isValid: true,
    value
  }));
  const params = values.map((_, index): { name: string; type: TypeDef } => ({
    name: `${index}`,
    type
  }));

  return (
    
  );

useEffect((): void => {
    let typeDef;
    try {
      const rawType = createType(registry, type.type as any).toRawType();
      typeDef = getTypeDef(rawType);
    } catch (e) {
      typeDef = type;
    }

    setParams((typeDef.sub as TypeDef[]).map((type): ParamDef => ({ name: type.name, type })));
  }, [type]);

useEffect((): void => {
    try {
      const rawType = createType(registry, type.type as any).toRawType();
      const typeDef = getTypeDef(rawType);

      setParams((typeDef.sub as TypeDef[]).map((type): ParamDef => ({ name: type.name, type })));
    } catch (e) {
      setParams(((Array.isArray(type.sub) ? type.sub : [type.sub]) as TypeDef[]).map((subType): ParamDef => ({ name: subType.name, type: subType })));
    }
  }, [type]);

useEffect((): void => {
    const rawType = createType(registry, type.type as any).toRawType();
    const typeDef = getTypeDef(rawType);
    const subTypes = typeDef.sub as TypeDef[];

    setOptions({
      options: subTypes.map(({ name }): Option => ({
        text: name,
        value: name
      })),
      subTypes
    });
    setCurrent([{ name: subTypes[0].name, type: subTypes[0] }]);
  }, [type]);

const params = GenericCall.filterOrigin(value.meta).map(({ name, type }): Param => ({
      name: name.toString(),
      type: getTypeDef(type.toString())
    }));
    const values = value.args.map((value): Value => ({