TypeScript: type aliases to check type equality
This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …
Fixing it.only type error in Jest
If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …
Moving away from React.FC and React.VFC
Since the release of React 18, VFC has been deprecated. FunctionalComponent (FC) does not have implicit children any more. See this pull request. It states: Since the release of the React 18 types we haven’t seen any use case for FunctionComponent with implicit children beyond "it breaks existing stuff". As …
Using React.VFC Instead of React.FC
When we Type React functional components, it is better to use React.VoidFunctionComponent (React.VFC) instead of React.FC. React.FC always includes the children prop on your component whether you want or not. We can get around this by adding children?: never on your custom prop. However, it is much cleaner to use …
Quickest Way to Add Eslint to JavaScript and TypeScript Projects
The quickest way to add eslint to your project is using eslint init command. ./node_modules/.bin/eslint –init will create eslintrc.js and install dependencies automatically. (1) Getting started for JavaScript Application It is super simple. Just install eslint, use eslint tool with a init flag and follow the command line instruction. npm …
TyoeORM vs Prisma to build GraphQL APIs with TypeScript
If you are building GraphQL APIs with TypeScript and have a relational database, there are two main ORM libraries we can use: Prisma and TypeORM. Both of them are similar. They both use models to define database tables, have query APIs, handle db connection well, have good documentations and community …
Using Parcel Bundler for TypeScript React App
Parcel is a relatively new JS bundler that promises zero configuration. I heard a lot of good things about this new bundler. So, I decided to give it a go. Here is the project that I created with Parcel, parcel-ts-react. In short, Parcel is great for small personal projects. However, …
How to fix the error: “Cannot use GraphQLSchema “[object GraphQLSchema]” from another module or realm.”
When I created a lambda function with Typescript and GraphQL support with the apollo-server-lambda module (see the repo here), I got the error. It took me a while to figure out how to fix it, but finally I did by adding a module to webpack. The solution for this issue …
Extending JQuery Interface for Bootstrap support – TypeScript
If you are using TypeScript for Bootstrap, you need to extend the JQuery interface to add Bootstrap methods. For example, if you want to use the tab function from Bootstrap to programmatically trigger bootstrap tab click, the below code will have a type error. $(‘#mytarget’).tab(‘show’); With TypeScript, we can extend …
Getting Started with AWS CDK with TypeScript
There is something really delightful about using actual programming language to code infrastructure. AWS CDK allows us to write infrastructure code in a totally different way from writing YAML or JSON type of code like CloudFormation or Terraform. The infrastructure code feels more familiar and it is more fun if …