“feels good” to have all your .d.ts being shipped as one, private API free, with smallest possible footprint
“feels good” to have all your .d.ts being shipped as one, private API free, with smallest possible footprint

- This article is a part of TypeScript library tips series

- 📖 Always free version of this article can be found on my Github

When authoring a TypeScript library make sure to follow best industry practices like shipping smallest possible files by rollup-ing your javascript code. As a not very known technique apply this pattern also on your ambient types definitions, that are generated by TypeScript compiler — bundling them into 1 single .d.ts file, which will also mitigate misuse of your possible leaking private APIs.

If you wanna go into more deep dive, please continue reading ↓↓↓.


🎒 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…

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 👀👌💪

🎒 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:

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


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 ?


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

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


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…

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 !

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.


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

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…

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…

Martin Hochel

Principal Engineer | Google Dev Expert/Microsoft MVP | @ngPartyCz founder | Speaker | Trainer. I 🛹, 🏄‍♂️, 🏂, wake, ⚾️& #oss #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