How to use the tiny-decoders.optional function in tiny-decoders

// This “decodes” the "type" field using `getUserDecoder`. Remember that a
// decoder is allowed to return whatever it wants. `getUserDecoder` returns a
// _new_ decoder, which we immediately call. I haven’t found a nicer way to do
// this so far.
// $ExpectType Decoder<{ type: "anonymous"; sessionId: number; } | { type: "registered"; id: number; name: string; }>
const userDecoder6 = record((field, _fieldError, obj, errors) =>
  field("type", getUserDecoder)(obj, errors)
);

// Finally, there’s one last little detail to know about: How optional fields
// are inferred.
// $ExpectType Decoder<{ title: string; description: string | undefined; }>
const itemDecoder = autoRecord({
  title: string,
  description: optional(string),
});

// As you can see above, fields using the `optional` decoder are always inferred
// as `key: T | undefined`, and never as `key?: T`. This means that you always
// have to specify the optional fields:
type Item = ReturnType;
// $ExpectError
const item1: Item = {
  //  ^^^^^
  // Property 'description' is missing in type '{ title: string; }' but required in type '{ title: string; description: string | undefined; } ts(2741)
  title: "Pencil",
};
const item2: Item = {
  title: "Pencil",
  description: undefined,
};

// $ExpectType [string]
tuple<[string]>(item => [item(0, string)])(undefined);
// $ExpectType [string, boolean]
pair(string, boolean)(undefined);
// $ExpectType [string, boolean, boolean]
triple(string, boolean, boolean)(undefined);
// $ExpectType {}
autoRecord<{}>({})(undefined);
// $ExpectType { a: string; }
autoRecord({ a: string })(undefined);
// $ExpectType { a: string; b: number; }
autoRecord({ a: string, b: number })(undefined);
// $ExpectType { a: string; b: number; }
autoRecord({ a: string, b: number })(undefined);
// $ExpectType { a: string; b: number; c: boolean | undefined; }
autoRecord({ a: string, b: number, c: optional(boolean) })(undefined);
// $ExpectType string
deep([], string)(undefined);
// $ExpectType string | undefined
optional(string)(undefined);
// $ExpectType string
optional(string, "default")(undefined);
// $ExpectType string | null
optional(string, null)(undefined);
// $ExpectType string
map(string, string)(undefined);
// $ExpectType string | number
either(string, number)(undefined);
// $ExpectType string | number | boolean | { readonly [key: string]: unknown; }
either(either(boolean, string), either(number, mixedDict))(undefined);
// $ExpectType string
lazy(() => string)(undefined);

// $ExpectType [string, boolean, boolean]
triple(string, boolean, boolean)(undefined);
// $ExpectType {}
autoRecord<{}>({})(undefined);
// $ExpectType { a: string; }
autoRecord({ a: string })(undefined);
// $ExpectType { a: string; b: number; }
autoRecord({ a: string, b: number })(undefined);
// $ExpectType { a: string; b: number; }
autoRecord({ a: string, b: number })(undefined);
// $ExpectType { a: string; b: number; c: boolean | undefined; }
autoRecord({ a: string, b: number, c: optional(boolean) })(undefined);
// $ExpectType string
deep([], string)(undefined);
// $ExpectType string | undefined
optional(string)(undefined);
// $ExpectType string
optional(string, "default")(undefined);
// $ExpectType string | null
optional(string, null)(undefined);
// $ExpectType string
map(string, string)(undefined);
// $ExpectType string | number
either(string, number)(undefined);
// $ExpectType string | number | boolean | { readonly [key: string]: unknown; }
either(either(boolean, string), either(number, mixedDict))(undefined);
// $ExpectType string
lazy(() => string)(undefined);

// $ExpectError
boolean(undefined, []);
// $ExpectError

// $ExpectType { a: string; }
autoRecord({ a: string })(undefined);
// $ExpectType { a: string; b: number; }
autoRecord({ a: string, b: number })(undefined);
// $ExpectType { a: string; b: number; }
autoRecord({ a: string, b: number })(undefined);
// $ExpectType { a: string; b: number; c: boolean | undefined; }
autoRecord({ a: string, b: number, c: optional(boolean) })(undefined);
// $ExpectType string
deep([], string)(undefined);
// $ExpectType string | undefined
optional(string)(undefined);
// $ExpectType string
optional(string, "default")(undefined);
// $ExpectType string | null
optional(string, null)(undefined);
// $ExpectType string
map(string, string)(undefined);
// $ExpectType string | number
either(string, number)(undefined);
// $ExpectType string | number | boolean | { readonly [key: string]: unknown; }
either(either(boolean, string), either(number, mixedDict))(undefined);
// $ExpectType string
lazy(() => string)(undefined);

// $ExpectError
boolean(undefined, []);
// $ExpectError
number(undefined, []);
// $ExpectError
string(undefined, []);
// $ExpectError

async restorePosition() {
    if (!PROD) {
      if (this.hasRestoredPosition) {
        return;
      }
      this.hasRestoredPosition = true;
      const recordProps = {
        expandedPerfTabIds: optional(
          map(array(string), ids =>
            ids.filter(id => ({}.hasOwnProperty.call(this.state.perf, id)))
          ),
          ([]: Array)
        ),
        expandedPerf: optional(boolean, false),
        expandedDebug: optional(boolean, false),
        scrollY: optional(number, 0),
      };
      const data = await browser.storage.local.get(Object.keys(recordProps));
      const decoder = autoRecord(recordProps);
      const { scrollY, expandedPerfTabIds, ...state } = decoder(data);
      this.setState({ ...state, expandedPerfTabIds }, () => {
        window.scrollTo(0, scrollY);
      });
    }
  }

async restorePosition() {
    if (!PROD) {
      if (this.hasRestoredPosition) {
        return;
      }
      this.hasRestoredPosition = true;
      const recordProps = {
        expandedPerfTabIds: optional(
          map(array(string), ids =>
            ids.filter(id => ({}.hasOwnProperty.call(this.state.perf, id)))
          ),
          ([]: Array)
        ),
        expandedPerf: optional(boolean, false),
        expandedDebug: optional(boolean, false),
        scrollY: optional(number, 0),
      };
      const data = await browser.storage.local.get(Object.keys(recordProps));
      const decoder = autoRecord(recordProps);
      const { scrollY, expandedPerfTabIds, ...state } = decoder(data);
      this.setState({ ...state, expandedPerfTabIds }, () => {
        window.scrollTo(0, scrollY);
      });
    }
  }

const userDecoder2 = record(field => ({
  id: field("id", either(string, number)),
  name: field("name", string),
  age: field("age", number),
  active: field("active", boolean),
  country: field("country", optional(string)),
  type: field("type", constant("user")),
}));

async restorePosition() {
    if (!PROD) {
      if (this.hasRestoredPosition) {
        return;
      }
      this.hasRestoredPosition = true;
      const recordProps = {
        expandedPerfTabIds: optional(
          map(array(string), ids =>
            ids.filter(id => ({}.hasOwnProperty.call(this.state.perf, id)))
          ),
          ([]: Array)
        ),
        expandedPerf: optional(boolean, false),
        expandedDebug: optional(boolean, false),
        scrollY: optional(number, 0),
      };
      const data = await browser.storage.local.get(Object.keys(recordProps));
      const decoder = autoRecord(recordProps);
      const { scrollY, expandedPerfTabIds, ...state } = decoder(data);
      this.setState({ ...state, expandedPerfTabIds }, () => {
        window.scrollTo(0, scrollY);
      });
    }
  }

async restorePosition() {
    if (!PROD) {
      if (this.hasRestoredPosition) {
        return;
      }
      this.hasRestoredPosition = true;
      const recordProps = {
        expandedPerfTabIds: optional(
          map(array(string), ids =>
            ids.filter(id => ({}.hasOwnProperty.call(this.state.perf, id)))
          ),
          ([]: Array)
        ),
        expandedPerf: optional(boolean, false),
        expandedDebug: optional(boolean, false),
        scrollY: optional(number, 0),
      };
      const data = await browser.storage.local.get(Object.keys(recordProps));
      const decoder = autoRecord(recordProps);
      const { scrollY, expandedPerfTabIds, ...state } = decoder(data);
      this.setState({ ...state, expandedPerfTabIds }, () => {
        window.scrollTo(0, scrollY);
      });
    }