Some Common Typescript errors

Type 'null' is not assignable to type 'HTMLInputElement'.

Sometimes when working with TypeScript you will encounter type errors with simple js statements like this

let input = document.getElementById('input-filed');

To resolve this use the following format

let input = (document as any).getElementById('input-field');

Same applies for other DOM methods such as querySelector, addEventListener, etc,.

Property does not exist on type 'Window & typeof globalThis'.

When working with external libraries, there will be many variables and properties that does not have any type defined. This will show up as error in TypeScript. For example if you are using Woosmap the following would not throw any error in JavaScript

window.WoosmapLoader.load(this.woosmapLoadOptions);

But in Typescript it will throw an error. To fix that use

(window as any).WoosmapLoader.load(this.woosmapLoadOptions);

For..in loop

key in a for...in loop will by design default to type string. This is due to the structural type system of TypeScript: the exact properties' keys shape is only known at run-time, the compiler cannot statically analyze, what properties are present on the object at compile-time. A key type narrowed to myobject properties would make the for...in loop an unsafe operation type-wise.

Solution:

for (const key in myobject)  {
  console.log(myobject[key as keyof typeof myobject])
}

Return Type for Vue.js data() method

In Vue.js for declaring data properties we use the data() method, where we create an object with data properties and return this object.

export default Vue.extend({
  data(){
      let obj = {
          isLoading: false,
          dataSource: {},
          googleLoadOptions: {},
          googleMapsOptions: {},
          stores: []
      };
      return obj;
  }
});

We can declare data methods in the same way when using TypeScript if the data properties are of primitive data types. But if the properties are supposed to hold more complex types such as list of objects or a Custom Data type then it is recommended to add a return type to the data() method and initialize data properties in the mounted method.

interface ComponentData {
    isLoading: Boolean,
    dataSource: WoosmapDataSource, // imported type
    googleLoadOptions: GoogleLoadOptions, // imported type
    googleMapsOptions: google.maps.MapOptions, // imported type
    stores: Stores[], // imported type
}

export default Vue.extend({
  data(): ComponentData{
      let obj = {
          isLoading: false,
          dataSource: {} as WoosmapDataSource,
          googleLoadOptions: {} as GoogleLoadOptions,
          googleMapsOptions: {} as google.maps.MapOptions,
          stores: [] as Stores[],
      };
      return obj;
  }
});

Use PropType for props in components

In case you are declaring props for your components, if the props are of any complex types, it is recommended to use PropType

import type { PropType } from "vue";
import type { TradeBrandItem } from "~/components/layout/header/components/TradeBrands";

export default Vue.extend({
    name: "TradeBrandsRow",
    props: {
        brands: {
            type: Array as PropType<TradeBrandItem[]>,
            required: true,
        },
    }
});