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 …
Adding Polyfills in TypeScript App
A polyfill is code that fills in functionality missing from the older browser. For example, Internet Explorer does not have Promise like other modern browsers. In this case, we can use a promise polyfill so that the code that uses Promise can work in IE. There are two ways of …
Unit Testing Event Listeners on Form Input Fields with Karma
Karma is a JavaScript test runner where you can run your unit tests on headless chrome or real browsers. Because it runs on the real browser, it supports the browser web APIs and makes it easy to test front-end JavaScript. With Karma, the environment where unit tests run is truer …