How to handle types when iteratively enriching data on the frontend?

See also questions close to this topic

• How can I get toast-ui editor content?

  I am a student studying. I think I'm doing it conceptually wrong.

  I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

  I get some errors.

  1. refEditor.value.invoke is not a function

  How can I get toast-ui editor content?

  this is my code

  <template>
    <div class="markup-tables flex">
      <va-card :title="$t('tables.stripedHoverable')">
        <va-card-content>
          <div id="refEditor" ref="refEditor"></div>
          <br />
          <div class="row justify--end paginationButtons-left">
            <va-button class="mr-2 mb-2">List</va-button>
          </div>
          <div class="row justify--end paginationButtons-right">
            <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
          </div>
        </va-card-content>
      </va-card>
    </div>
  </template>
  
  <script lang="ts">
  import '@toast-ui/editor/dist/toastui-editor.css'
  
  import Editor from '@toast-ui/editor'
  import { defineComponent, onMounted, ref } from 'vue'
  
  import data from '@/data/tables/markup-table/data.json'
  
  export default defineComponent({
    name: 'BoardWrite',
    setup() {
      const refEditor = ref(null)
  
      const getHTML = () => {
        console.log('getHTML test')
        let html = refEditor.value.invoke('getHtml')
        console.log(html)
        // ERROR 
      }
  
      onMounted(() => {
        const editor = new Editor({
          el: refEditor.value,
          height: '700px',
          initialEditType: 'markdown',
          previewStyle: 'vertical',
        })
        editor.getMarkdown()
      })
  
      return {
        getHTML,
        refEditor,
      }
    },
  })
  </script>
  
• Custom utility types (generic types) for classes `IsClass` of TypeScript

  I am trying to create a generic type to make sure the first parameter to be a class. However, the factory function parameter cannot be replaced by a generic type.

  The following upper parts were my attempts. The last part were a working example that directly write the extends ... which worked.

  Why does it works inside a function, but not works as a generic type IsClass?

  class A {
    constructor() {
  
    }
  }
  class B {}
  class C extends B {}
  
  // ERRORS:
  
  type IsClass<T extends new (...args: any) => InstanceType<T>> = T
  type IsClass2<T> = T extends new (...args: any) => InstanceType<T>? T: never
  
  type X = IsClass<A>
  type Y = IsClass2<A>
  
  function someFactoryError<T>(clx: IsClass<T>) {
    return new clx()
  }
  
  someFactoryError(A)
  
  function someFactoryError2<T>(clx: IsClass2<T>) {
    return new clx()
  }
  
  someFactoryError2(A)
  
  // WORKS:
  
  function someFactoryWorks<T extends new (...args: any) => InstanceType<T>>(clx: T) {
    return new clx()
  }
  
  const a0 = someFactoryWorks(A)
  const b0 = someFactoryWorks(B)
  

  TypeScript Playground

  Related:

  • stackoverflow
  • TypeScript Handbook: Abstract Construct Signatures
• Async function passed as prop into React component causing @typescript-eslint/no-misused-promises error

  I have the following asynchronous submitNewPatient function which is throwing @typescript-eslint/no-misused-promises error message from elint. Is it possible to adjust the function such that it removes this error?

  const submitNewPatient = async (values: PatientFormValues) => {
      try {
        const { data: newPatient } = await axios.post<Patient>(
          `${apiBaseUrl}/patients`,
          values
        );
        dispatch({ type: "ADD_PATIENT", payload: newPatient });
        closeModal();
      } catch (e: unknown) {
        if (axios.isAxiosError(e)) {
          console.error(e?.response?.data || "Unrecognized axios error");
          setError(
            String(e?.response?.data?.error) || "Unrecognized axios error"
          );
        } else {
          console.error("Unknown error", e);
          setError("Unknown error");
        }
      }
    };
  

  Component used to pass function as a prop:

  <AddPatientModal
          modalOpen={modalOpen}
          onSubmit={submitNewPatient}
          error={error}
          onClose={closeModal}
        />
  

  I have also tried the following which removes the eslint error message based. However, seems like I am not entering the async code block (perhaps not triggering the async() function):

    const submitNewPatient = (values: PatientFormValues) => {
      async () => {
        try {
          const { data: newPatient } = await axios.post<Patient>(
            `${apiBaseUrl}/patients`,
            values
          );
          dispatch({ type: "ADD_PATIENT", payload: newPatient });
          closeModal();
        } catch (e: unknown) {
          if (axios.isAxiosError(e)) {
            console.error(e?.response?.data || "Unrecognized axios error");
            setError(
              String(e?.response?.data?.error) || "Unrecognized axios error"
            );
          } else {
            console.error("Unknown error", e);
            setError("Unknown error");
          }
        }
      };
    };
  
• Is there a way to keep type inference in union types from type guards inside a function?

  Let's say I have three types (and a union one)

  type A = {
      type: 'a'
      title: string
      description: string
  }
  
  type B = {
      type: 'b'
      title: string
  }
  
  type C = {
      type: 'c'
      description: string
  }
  
  type D = A | B | C
  

  I know I can get a correct type inference with the === operator

  function logger(t: D) {
      if (t.type === 'a' || t.type === 'b') console.log(t.title) // no problems here
      if (t.type === 'a' || t.type === 'c') console.log(t.description) // no problems here
  }
  

  However, would it be possible to write an utility function:

  function matches<T extends { type: string }>(t: T, types: T['type'][]) : boolean {
      return types.includes(t.type)
  }
  

  So I can do this without errors?

  function logger(t: D) {
      if (matches(t, ['a', 'b'])) console.log(t.title) // Property 'title' does not exist on type D
      if (matches(t, ['a', 'c'])) console.log(t.description) // Property 'description' does not exist on type D
  }
  
• Alternative to index signature

  I have an array of object like this:

  [
    {
      "bio": "Douglas Gerald Hurley is an American engineer, former Marine Corps pilot and former NASA astronaut. He launched into space for the third time as commander of Crew Dragon Demo-2.",
      "images": {
        "png": "./assets/crew/image-douglas-hurley.png",
        "webp": "./assets/crew/image-douglas-hurley.webp"
      },
      "name": "Douglas Hurley",
      "role": "Commander"
    },
    {
      "bio": "Mark Richard Shuttleworth is the founder and CEO of Canonical, the company behind the Linux-based Ubuntu operating system. Shuttleworth became the first South African to travel to space as a space tourist.",
      "images": {
        "png": "./assets/crew/image-mark-shuttleworth.png",
        "webp": "./assets/crew/image-mark-shuttleworth.webp"
      },
      "name": "Mark Shuttleworth",
      "role": "Mission Specialist"
    },
    {
      "bio": "Pilot on the first operational flight of the SpaceX Crew Dragon to the International Space Station. Glover is a commander in the U.S. Navy where he pilots an F/A-18.He was a crew member of Expedition 64, and served as a station systems flight engineer.",
      "images": {
        "png": "./assets/crew/image-victor-glover.png",
        "webp": "./assets/crew/image-victor-glover.webp"
      },
      "name": "Victor Glover",
      "role": "Pilot"
    },
    {
      "bio": "Anousheh Ansari is an Iranian American engineer and co-founder of Prodea Systems. Ansari was the fourth self-funded space tourist, the first self-funded woman to fly to the ISS, and the first Iranian in space.",
      "images": {
        "png": "./assets/crew/image-anousheh-ansari.png",
        "webp": "./assets/crew/image-anousheh-ansari.webp"
      },
      "name": "Anousheh Ansari",
      "role": "Flight Engineer"
    }
  ]
  

  I typed that with index signature:

      export type PlanetInfo = {
        [key: string]: string;
      }[];
  

  but of course there are also the key "images" that are objects, I resolve that behaviour with:

      export type PlanetInfo = {
            [key: string]: any;
          }[];
  

  but I don't think the use of 'any' is correct. Is there a better way?
• how to make an iterable type in type script that has a key value pair

  I am using type script and I want to make a type that represents an object like this the keys generated are genrated dynamically how do I do that

  {  dog:true,
  cat:true,
  x:true
  }
  

  currently I am just using any but I woud like a proper type

   const matches: any= {}
  

  i get this error when i try to use

  
   {[key: string]: boolean}
  

  Type 'string[] | { [key: string]: boolean; }' must have a '[Symbol.iterator]()' method that returns an iterato
  

  code that causes this error

  const docgetter=()=>
      const matches: { [key: string]: boolean } = {}
      const documentFieldKeys = Array.isArray(documentNames) ? documentNames : Object.keys(documentNames)
    
  
      return [matches, documentFieldKeys]
  
  }
  
  
  
  const [matches,kycKeys]=docgetter()
  
  for(key of kycKeys)