Image for post
Image for post

🎒 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 may throw a false prejudice about TypeScript, by putting it to a “Completely new language” bag, which isn’t really true IMHO. …


Or how we can benefit from TypeScript to full extent, without having to write any TS in our codebase, by leveraging standard JSDoc type annotations 👀👌💪

Image for post
Image for post

🎒 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 these questions/statements are valid, in the end I’m quite successful with convincing them to adopts TypeScript with my help, but there are also times that it just ain’t gonna happen 🤷‍. …


Image for post
Image for post

🎒 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 React docs). …


Image for post
Image for post

🎒 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 say that we have an application with a header and we want to place a navigation inside. We have three React components — App, Header and Navigation. They have to be nested into each other so we end up with the following…


a.k.a. “Solving a million dollar problem”

Image for post
Image for post

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...

UPDATEAugust 2018

I’ve released rex-tils library, which includes solution discussed within this article. Check it out! …


Image for post
Image for post

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 to use interface vs type alias. …


How to leverage the best from React ecosystem and beyond to make our daily task easier and more effective within Angular apps and in the end become the best friends ever !

Image for post
Image for post
Are you ready for some solid fight ? Angular vs React ha ?!

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 is where to start? or how to achieve that goal, or even why should I bother with other ecosystems and tools. Great questions indeed! Let’s get some answers, shall we? …


Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components

Image for post
Image for post

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 Typescript. Also upcoming version of TS 2.8 brings new exciting features to the table, like conditional types, new predefined conditional types within standard library, homomorphic mapped types modifiers…, which allows us to create easily common react patterns in type safe…


Image for post
Image for post

Hey everyone! As you’ve may noticed, TypeScript 2.7 was released not long time ago and it brings a lot of new features to the table.

In this article we will focus primarily on Unique Symbol Types support, in particular within ES2015 classes, which are also a primary building block for WebComponents.

For our demonstration purpose, we will implement a simple WebComponent for showing/hiding projected content, with following features:

  • custom element name: my-toggleable
  • it is both stateful and controllable component
  • public API contains 2 props: title and show and 1 default content projection via slot .
  • title is gonna render within…


Image for post
Image for post
Japan powder, there is nothing better in this world. Hai!

UPDATEAugust 2018

I’ve released rex-tils library, which includes solution discussed within this article. Check it out!

Disclaimer:

This post was created 35000 feet above the ground in the sky, during my return flight from awesome Japan and yes that guy in the title picture is me, ridding the best powder on the planet in Japan :D ( sorry I just had to do this, you can hate me later ok? / later === after reading this post )

Some time ago I wrote about how to effectively leverage TypeScript to write type-safe action creators and reducers.

At that time ( pre TS 2.8 era ) there wasn’t a clean solution how to get the return type of an function without some hacks. …

About

Martin Hochel

Principal Engineer @productboard/Google Dev Expert/MVP | @ngPartyCz founder | Speaker | Trainer. I skate, surf, wake, snow and open source 🏄‍🤙 #js #ts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store