const obj = {
  a: 'hello',
  b: 1,
  c: undefined,
  d: {
    toJSON() {
      return 42;
    }
  },
  e: () => console.log('hi from e')
}

const str = JSON.stringify(obj);//?
//    ^?

const parsed = JSON.parse(str);
//     ^?

writePersonObject('');


function writePersonObject(str: Stringified<{firstname: string, lastname: string}>) {

}

type JsonifiedValue<T> = T extends string | number | null | boolean
? T 
: T extends {toJSON(): infer R} ? R
: T extends undefined | ((...args: any[]) => any) ? never
: T extends object ? JsonifiedObject<T>
: never;

type JsonifiedObject<T> = {
  [Key in keyof T as [JsonifiedValue<T[Key]>] extends [never] ? never : Key]: JsonifiedValue<T[Key]>
}

parsed.b

type Stringified<ObjType> = string & {source: ObjType};

interface JSON {
  stringify<T>(value: T, replacer?: null | undefined, space?: string | number): Stringified<T>;
  parse<T>(str: Stringified<T>, replacer?: null | undefined): JsonifiedObject<T>;
}

// hooks/global_utils.js

// @ts-check

/**
 * Check if a parameter is empty.
 * @param {string | null | undefined} param - param to check
 * @param {any} default_value - value to return if param is empty
 * @returns {any}
 */
function isParamEmpty(param, default_value) {
    if (param === "" || param === undefined || param === null) {
      return default_value;
    }
    return param;
  }

  module.exports = {
    isParamEmpty,
  };

// index.js

       * @typedef {Object} GlobalUtils
       * @property {(param: string | null | undefined, default_value: any) => any} isParamEmpty - Checks if a parameter is empty and returns a default value.
       */

      /** @type {GlobalUtils} */
      const { isParamEmpty } = require(`${__hooks}/global_utils.js`);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];
    if (!selectedFile) return;

    // https://developer.mozilla.org/en-US/docs/Web/API/FileReader
    // The FileReader API is used to read the contents of a Blob or File.
    // It makes it possible to read the contents of a file in JavaScript.
    const reader = new FileReader();

    // The onload event is fired when the file has been read successfully.
    // The event handler is passed the result of the file read as an argument.
    // The result is an ArrayBuffer which is a typed array of integers.
    reader.onload = (e) => {
      if (e.target?.result instanceof ArrayBuffer) {
        setFile(e.target.result);
      }
    };

    // The onerror event is fired when there is an error reading the file.
    // The event handler is passed the error as an argument.
    reader.onerror = (e) => {
      console.error("Error reading file:", e);
    };

    // The onabort event is fired when the file read has been aborted.
    // The event handler is passed no arguments.
    reader.onabort = () => {
      console.log("File reading aborted");
    };

    // Start the file read by calling the readAsArrayBuffer method.
    // This method takes a Blob or File as an argument.
    reader.readAsArrayBuffer(selectedFile);
  };

  return (
    <div className="flex h-full w-full flex-col items-center justify-center">
      <input
        onChange={handleFileChange}
        type="file"
        // limits files that will appear in the file explorer when picking to .dcx
        accept=".docx"
        // tailwind + daisyui classes for file inputs
        className="file-input w-full max-w-xs"
      />
</div>)

// parse the docx using mammoth and convert to json 
import { convertToHtml } from "mammoth";
// below library does not ship types 
//  learn about how to do typescipt module declarations for it
//  https://tigawanna-portfolio.vercel.app/lessons/zvkw94okeaegslk
import HtmlTableToJson from "html-table-to-json";



export async function handleConvert(file: ArrayBuffer | null) {
    if (file) {
      try {
        const options = { };
        const result = await convertToHtml({ arrayBuffer: file }, options);
        const tableAsJson = HtmlTableToJson.parse(result.value)

        return {html: result.value, tableJson: tableAsJson._results};
      } catch (error) {
        console.error('Error converting file:', error);
        return
      }
    } else {
      console.error("File not found");
      return
    }
  };

//custom.d.ts


declare module "html-table-to-json" {

  export default class HtmlTableToJson {

    constructor(html: string);

    static parse(html: string): {
        _results: Record<string, string>[];
        _headers: string[];
        _count: null;
        _firstRowUsedAsHeaders: boolean;
    };

    getResults(): any;

  }

}

• a short cut :keybindings.json

  {
    "key": "ctrl+o",
    "command": "editor.action.sourceAction",
    "args": {
      "kind": "source.addMissingImports",
      "apply": "first"
    }
  },

• automatically on save : settings.json

  "editor.codeActionsOnSave": { "source.addMissingImports": "always" },