Ohans Emmanuel's Blog

The Typescript feature we all wanted

The Typescript feature we all wanted

TLDR: Inferred Type Predicates are now available in Typescript 5.5 Beta. In this article, I’ll explain the much-awaited feature and how it’ll help you write more type-safe code. Introduction For the most part, Typescript’s control flow analysis does an impressive job of monitoring how the type

How to Build a Notion-style editor with AI-powered autocompletion

How to Build a Notion-style editor with AI-powered autocompletion

TLDR: In this article, we will explore a high-level design of Potion —a Notion-style email builder with AI-powered autocompletion. Also, I just launched Potion on Producthunt. Let’s get started. Requirements Rich-text editors come in all shapes and forms e. g., editors in apps like Substack, Medium and even Notion.

Astro View Transitions by Examples

Astro View Transitions by Examples

View Transitions unlocks native browser transition effects between pages for Astro 3.0 using new platform APIs. The good part? Astro is the first major web framework to mainstream View Transitions, and this article will get you started with the new API. Getting started Let’s explore Astro view transitions

Working with Astro's middleware

Working with Astro's middleware

I like to think of middleware as middle agents. A simplified flow of data from a user’s browser to our application servers comprises a request-response cycle. A middleware takes the front-row seat in the application server. Allowing us to intercept the user request before it is completed. With a

The new Instantiation Expression in Typescript

The new Instantiation Expression in Typescript

With instantiation expressions, we can now take functions and constructors and feed them type arguments directly.

Avoid Object wrapper Types in Typescript—Here's why

Avoid Object wrapper Types in Typescript—Here's why

Consider the following contrived Typescript example: // 1 const hello = (v: String) => { console.log(v) } // 2 const hello = (v: string) => { console.log(v) } Note the difference in the type of the v parameter: string vs String. Don’t use the Object wrapper types As a general rule, you should rarely use

The Seven Most Asked Typescript Questions on StackOverflow — Explained

The Seven Most Asked Typescript Questions on StackOverflow — Explained

I hate Stackoverflow — said no developer. While it’s helpful to have your answers a Google search away, what’s powerful is truly understanding the solutions you stumble on. In this article, I’ll explore the seven most stackoverflowed Typescript questions. I spent hours researching these. I hope you gain

Are strongly typed functions as parameters possible in TypeScript?

Are strongly typed functions as parameters possible in TypeScript?

TLDR This question does not need to be overly explained. The short answer is yes. Functions can be strongly typed — even as parameters to other functions. How to use strongly typed function parameters The accepted answer on this stack overflow post is correct — to a degree. Assuming you had a

How do you explicitly set a new property on ‘window’ in Typescript?

How do you explicitly set a new property on ‘window’ in Typescript?

TLDR: Extend the existing interface declaration for the Window object.

What is a “.d.ts” file in TypeScript?

What is a “.d.ts” file in TypeScript?

.d.ts files are called type declaration files. They exist for one purpose only: to describe the shape of an existing module and they only contain type information used for type checking.

In Typescript, what is the ! (exclamation mark / bang) operator?

In Typescript, what is the ! (exclamation mark / bang) operator?

This is technically called the non-null assertion operator. If the typescript compiler complains that a value could be null or undefined, you can use the ! operator to assert that the said value is NOT null or undefined.

Interfaces vs Types in Typescript

Interfaces vs Types in Typescript

When beginning Typescript, you may find it confusing to settle on a choice. This article clears up the confusion and helps you choose which is right for you.

What is Typescript?

What is Typescript?

I published an Intermediate Typescript and React Handbook a few weeks ago. It received numerous views and I got several emails. Most were “thank you” emails, but then there were others like: “… I am new to programming, what is Typescript?” “Thanks for this free ebook, but how do I learn

Build Strongly-Typed Polymorphic Components with React and Typescript

Build Strongly-Typed Polymorphic Components with React and Typescript

Hey! 😎 In this detailed (and explanatory) guide, I’ll discuss how to build strongly typed Polymorphic React components with Typescript. If you have no idea what that means, that’s fine. That’s a decent pointer that this is just the right guide for you. Ready? Introduction Let’s get

Build a Full-stack React app with Zero Configuration

Build a Full-stack React app with Zero Configuration

Building a modern frontend application typically requires a lot of tooling. Think Babel, Webpack, Parcel, Rollup etc. There’s a reason module bundlers are so popular. There are lots of great tools to help simplify the process of beginning a new frontend project. If you’re not new to React,

React Hooks Documentation: An Easy to Read Version

React Hooks Documentation: An Easy to Read Version

React hooks were added to React in version 16.8. With the transition from class to functional components, hooks let you use state and other features within functional components i.e without writing a class component. This reference guide will discuss all the hooks natively available in React, but first,

Learn the basics of React Hooks in <10 minutes

Learn the basics of React Hooks in <10 minutes

An Illustrated Guide on React Hooks. Early this year, the React team released a new addition, hooks, to React in version 16.8.0. If React were a big bowl of candies, then hooks are the latest additions, very chewy candies with great taste! So, what exactly do hooks mean?