Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
TypeScript Answers

How to add generic object types in TypeScript?

white puppy in basket in macro photography

Sometimes, we want to add generic object types in TypeScript.

In this article, we’ll look at how to add generic object types in TypeScript.

How to add generic object types in TypeScript?

To add generic object types in TypeScript, we can use the Record type.

For instance, we write

const myObj: Record<string, any> = {
  //...
};

to set myObj to the Record with the key type set to string and the property value type is set to any.

Conclusion

To add generic object types in TypeScript, we can use the Record type.

Categories
Vue Answers

How to fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript.

In this article, we’ll look at how to fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript.

How to fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript?

To fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript, we can use the ref function from the composition API.

For instance, we write

<template>
  <div ref="root">This is a root element</div>
</template>

<script lang="ts">
import { ref, onMounted, defineComponent } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const root = ref(null);

    onMounted(() => {
      console.log(root.value);
    });

    return {
      root,
    };
  },
});
</script>

to call ref to create the root ref.

And then we set the ref prop to root to assign the div to the root ref.

Then we get the div from root.value.

Conclusion

To fix the ‘this.$refs.refField.value does not exist’ error with Vue.js and TypeScript, we can use the ref function from the composition API.

Categories
TypeScript Answers

How to pass an array as arguments in TypeScript?

white and brown long coated small dog

Sometimes, we want to pass an array as arguments in TypeScript.

In this article, we’ll look at how to pass an array as arguments in TypeScript.

How to pass an array as arguments in TypeScript?

To pass an array as arguments in TypeScript, we can rest the rest synax.

For instance, we write

const m1 = (...args: any[]) => {
  //...
};

const m2 = (str: string, ...args: any[]) => {
  m1(...args);
};

to create the m1 function that takes an unlimited number of arguments.

And we get the arguments from the args array.

Then in m2, we call m1 with the args entries spread in the parentheses as arguments.

Conclusion

To pass an array as arguments in TypeScript, we can rest the rest synax.

Categories
TypeScript Answers

How to fix the “Property ‘allSettled’ does not exist on type ‘PromiseConstructor’.ts(2339)” error with TypeScript?

red and white happy birthday card

To fix the "Property ‘allSettled’ does not exist on type ‘PromiseConstructor’.ts(2339)" error with TypeScript, we can add the allSettled method to the PromiseConstructor type definition.

For instance, we write

declare interface PromiseConstructor {
  allSettled(
    promises: Array<Promise<any>>
  ): Promise<
    Array<{ status: "fulfilled" | "rejected"; value?: any; reason?: any }>
  >;
}

to add the allSettled method into the PromiseConstructor interface.

We add the parameter with promises: Array<Promise<any>>.

And the return type is Promise< Array<{ status: "fulfilled" | "rejected"; value?: any; reason?: any }>.

Now we can use Promise.allSettled without compiler errors.

Categories
TypeScript Answers

How to specify parameter type as one of many types instead of any type in TypeScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to specify parameter type as one of many types instead of any type in TypeScript.

In this article, we’ll look at how to specify parameter type as one of many types instead of any type in TypeScript.

How to specify parameter type as one of many types instead of any type in TypeScript?

To specify parameter type as one of many types instead of any type in TypeScript, we can create a union type.

For instance, we write

const myFunc = (param: string[] | boolean[] | number[]): void => {
  //...
};

to create the myFunc function that takes the param parameter which can either be a string arrat, number array or boolean array.

And the return type is void so it returns nothing.

Conclusion

To specify parameter type as one of many types instead of any type in TypeScript, we can create a union type.