Category: TypeScript

Sometimes, we want to get the current year using TypeScript.

In this article, we’ll look at how to get the current year using TypeScript.

How to get the current year using TypeScript?

To get the current year using TypeScript, we use the date’s getFullYear method.

For instance, we write

const y = new Date().getFullYear();

to create a new Date instance and call getFullYear to return the 4 digit year number from the date.

Conclusion

To get the current year using TypeScript, we use the date’s getFullYear method.

Sometimes, we want to mock a TypeScript interface with Jest.

In this article, we’ll look at how to mock a TypeScript interface with Jest.

How to mock a TypeScript interface with Jest?

To mock a TypeScript interface with Jest, we just need to create objects that match the shape of the interface.

For instance, we write

mathlib.multiplier = {
  multiply: jest.fn((a, b) => a * b),
};

to mock the multiply function with jest.fn assuming the multiply method looks like

interface IMultiplier {
  multiply(a: number, b: number): number;
}

The mocked function takes 2 numbers as arguments and returns a number, and we have the same signature and return type in the mocked function.

So no error will be raised.

Conclusion

To mock a TypeScript interface with Jest, we just need to create objects that match the shape of the interface.

Sometimes, we want to fix the "Property ‘matchAll’ does not exist on type ‘string’" error with TypeScript.

In this article, we’ll look at how to fix the "Property ‘matchAll’ does not exist on type ‘string’" error with TypeScript.

How to fix the "Property ‘matchAll’ does not exist on type ‘string’" error with TypeScript?

To fix the "Property ‘matchAll’ does not exist on type ‘string’" error with TypeScript, we can add the "es2020.string" entry into compilerOptions.lib in tsconfig.json.

For instance, we write

{
  //...
  "compilerOptions": {
    "lib": ["es2020.string"]
  }
  //...
}

to add the "es2020.string" entry into compilerOptions.lib in tsconfig.json.

Then the TypeScript compiler knows that the string matchAll method is available for use in our TypeScript project.

Conclusion

To fix the "Property ‘matchAll’ does not exist on type ‘string’" error with TypeScript, we can add the "es2020.string" entry into compilerOptions.lib in tsconfig.json.

To use computed properties in Vue.js with TypeScript, we can add getters.

For instance, we write

<template>
  <div>
    <input type="text" name="Test Value" id="" v-model="text" />

    <label>{{ label }}</label>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({})
export default class About extends Vue {
  private text = "test";

  get label() {
    return this.text;
  }
}
</script>

to add the label getter that returns the value of the this.text reactive property.

Conclusion

To use computed properties in Vue.js with TypeScript, we can add getters.

Sometimes, we want to sort an array of objects in TypeScript.

In this article, we’ll look at how to sort an array of objects in TypeScript.

How to sort an array of objects in TypeScript?

To sort an array of objects in TypeScript, we can use the array sort method like we do with JavaScript.

For instance, we write

const sortedArray: Test[] = unsortedArray.sort((obj1, obj2) => {
  if (obj1.value > obj2.value) {
    return 1;
  } else if (obj1.value < obj2.value) {
    return -1;
  }
  return 0;
});

to call unsortedArray.sort with a callback to sort the entries in the array and return it.

We compare the value of the value property in each object.

And we return 1, -1, or 0 depending if we want to put obj2 before obj1, obj1 before obj2 or keep the items in the same order respectively.

unsortedArray is unchanged after calling sort, it returns a new array with the sorted entries.

Conclusion

To sort an array of objects in TypeScript, we can use the array sort method like we do with JavaScript.