🎒 this article uses following library versions:

{
  "@types/react": "16.4.16",
  "@types/react-dom": "16.0.9",
  "typescript": "3.1.3",
  "react": "16.5.2",
  "react-dom": "16.5.2"
}

🎮 source code can be found on my github profile

TypeScript is definitely the best thing that happened to JavaScript. period.

Unfortunately, I cannot say the same about “The best thing that happened to Java/C# devs writing JavaScript with it 👀😳🌀⏱”

Why 🤨?

Well, it definitely makes your Java/C# alter ego feel like home, having types within JavaScript (which is amazing !), but then, it introduces other “language features” which are not part of standard JavaScript, and because of those, it…

🎒 this article uses following library versions:

{
  "@types/react": "16.4.16",
  "@types/react-dom": "16.0.8",
  "typescript": "3.1.1",
  "react": "16.5.2",
  "react-dom": "16.5.2"
}

🎮 source code can be found on my github profile

When I talk with fellow developers within various teams at work or JS community in general, about building SPA’s and incorporating type system within their code base (like TypeScript 💙), very often I get responses like:

• “WHY DO WE NEED TYPES?” 🤒
• “WE DON’T WANNA LEARN ANOTHER LANGUAGE!” 🤨
• “I DON’T WANNA GET INTO ANOTHER ☕️ ⚰️ CoffeeScript COFFIN!”
• “TYPES ARE FOR JAVA DEVS!” 🤪
• etc…

Ugh 😳…

While many of…

🎒 this article uses following library versions:

{
  "@types/react": "16.4.7",
  "@types/react-dom": "16.0.6",
  "typescript": "3.0.1",
  "react": "16.4.2",
  "react-dom": "16.4.2"
}

🎮 source code can be found on my github profile

Recently I’ve got this message on Twitter

Instead of replying, I’ve decided to write down this “short post” about how to handle React DOM refs and ref forwarding with TypeScript for anyone new to React and TypeScript as I didn’t found this resource anywhere online.

Disclaimer:

Don’t expect to learn all the why’s and how’s about React refs within this blogpost ( you can find all that info in excellent…

🎒 this article uses following library versions:

{
  "@types/react": "16.4.6",
  "@types/react-dom": "16.0.6",
  "typescript": "2.9.2",
  "react": "16.4.1",
  "react-dom": "16.4.1"
}

🎮 source code can be found on my github profile

React and declarative composition is my favourite couple for building UI. In this article we will cover various patterns how to leverage children composition with TypeScript to get excellent developer experience and type-safety along the process.

So what do I mean by children composition ?

I’m referring to children prop that might be used with every React Component.

children is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.

Why children props ?

Let’s…

Let’s say, you wanna use/are using React, and you made a decision to use a typed JavaScript with it … and you pick TypeScript for the job. Let me congratulate you for this decision in a first place, as your Dev life is going to be much easier from now on thanks to the type safety and top notch DX in the first place! Anyways, you’ll start developing your first pieces of your React app with TypeScript. Everything will go flawlessly, until you’ll come to this first “huge” issue. Dealing with defaultProps in your components...

UPDATE — August 2018

I’ve…

People often ask me ( online, at work, in skatepark (nope 😂) ), what’s the difference between using type and interface for defining compile time types within TypeScript.

First thing I used to do, was pointing them to TypeScript handbook…

Unfortunately most of the time, they didn’t find the droids that they were looking for ( it’s hidden within Advanced Types section). Even if they found it, the information described there is obsolete ( described behaviour is for typescript@2.0.x ).

Good news everyone! You don’t have to look any further, This post is an up to date description/style-guide about when…

Fight leads to the dark side ( to Twitter /clone/ flame wars )

After seeing that cover image of this article, your first impression must be like: OMG! another clickbait article about why X sucks and Y is the silver bullet. Well, I have to disappoint you. This article is about the complete opposite :)

Instead of wasting our time by participating on twitter rants and so on, we will leverage the best that other ecosystems ( React ) have to offer and thanks to that, we will get better/faster/stronger tools for achieving our daily development tasks with Angular.

Question…

This blogpost was inspired by React Component Patterns post

live Demo

If you know me, you already know that I don’t write javascript without types, so yeah I’m really into Typescript, since version 0.9. Beside typed JS I really love React, and when React + Typescript are combined, I just feel like in heaven :D. Full type safety within whole app and VDOM templates it’s just marvelous and joy to work with.

So what is this post all about? Well, there are various articles about React Component patterns on the internet, but none describes how to apply those patterns with…