Flowers
Photo by Melissa Askew on Unsplash.

TypeScript is about types. It’s a strongly typed language with powerful compile-time type-checking. At the same time, its static typing is optional, so it’s compatible with JavaScript.

I’ve been working with TypeScript for more than three years. I’ve learned a lot during this journey, but I still have the nice surprise of learning a new feature or tricks in my daily work.

Here are some of the best practices I’ve learned by using the typing system:


The word “Bold” in a book
Photo by Jeremy Bishop on Unsplash.

Record is one of the TypeScript utility types and has been available out of the box since version 2.1.

I have to admit that I was a little confused when I read the official definition for the first time:

Record<Keys,Type>

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.” — TypeScript’s documentation

At face value, it says the Record type creates an object type that has properties of type Keys with corresponding values of type Type. But a similar…


In this article, I will talk about how to use the Decorator pattern to consume REST API in Angular.

HttpClient Service

Consuming REST API data using HttpClient in Angular is the most common way of connecting an Angular App to the back end services. HttpClient Service handles the JSON data parsing under the cover and returns a Rxjs observable. It can also support generic typing functionality. For example, in the code snippet below, getAllTodos will return an observable with an array of objects that match the type TodoModel.

constructor(private http: HttpClient) {}getAllTodos(): Observable<TodoModel[]> {
return this.http.get<TodoModel[]>(this.url);
}

It is very straightforward…


What I love about TypeScript is its Type system. It is practical and feature rich. Applying the types in the right use cases can make our code cleaner and easier to maintain.

The purpose of this article is to share an example of code refactoring with TypeScript discriminated union type and Generics.

The original code

This piece of code is to represent user roles and feature/permissions mapping, to build a user access matrix in an Angular App.


Photo by James Harrison on Unsplash

Angular state management is the core of any Angular App, but there is no one-size-fits-all solution. Although Ngrx is the most popular Angular state management framework, its excessive boilerplate codes make it overkill for many small to middle-size apps.

This article talks about a simple but effective Angular state management pattern using observable data service. What I want to achieve is to have the following key benefits by using a concept similar to Redux pattern.

  • Single source of truth
  • Unidirectional data flow
  • Immutable state at the component level

A demo Hero application is available as an example of how to…


Person going upstairs
Photo by Lindsay Henwood on Unsplash

Builder Pattern is one of GoF design pattern designed to construct objects which typically requires a long list of arguments. It allows you to create multiple different but also similar objects with the Builder class.


Books on a table
Photo by Aaron Burden on Unsplash

In my TypeScript learning journey, I’ve read a number of books. Why read programming books when there are rich online resources available? The answer is that books bring you depth and details lacking in online tutorials. Online tutorials are like fast food. They provide speed and convenience. Books are like restaurants. You get quality and a good experience.

The following four books are my recommendations. I’ve read these books from cover to cover and come back to them often. Reading these books isn’t only useful to my TypeScript learning, they’re also fun.

Let’s look at them one by one.

TypeScript Deep Dive

The…


Photo by Maksym Kaharlytskyi on Unsplash

In this article, we will discuss different ways of accessing local files in the context of an Angular App. Those methods are also applicable to other JavaScript frameworks.

Background

Accessing local files from a browser is a balance between features and security concerns. It is necessary, as we all need to upload files from a browser. On the flip side, if browsers can access all local files without restriction, the door is wide open for an attacker to launch malware from your browser.

Due to security concerns, the access of local files from browsers is restricted. …


Photo by Raamin ka on Unsplash

TypeScript advanced types are powerful. These include conditional types, generics, union types, distributive conditional types and type inference. It is a complex toolbox, with many features and keeps evolving.

When I learnt TypeScript, I found many examples are either trivial or contrived. From those examples, it is hard to relate to the real world applications of the advanced types. This article is going to discuss a practical example of using advanced types.

The Problem

We are refactoring an existing Node App. In the App, there is a configuration constant for various features. The sample configuration is shown below.

The purpose of…


Photo by Oskar Yildiz on Unsplash

Every profession has its good parts and bad parts. As a seasoned software developer, while I enjoy many parts of my daily work, there are also things I dislike or even hate.

What are the Good Parts

There are many good parts of being a developer. They kept me motivated and walked on the journey until now. Here are the top 3 things I like the most.

Creation

The nature of software development is creation. Your daily job is to create new things, just like an artist or a writer. Unlike many other jobs, there are always new challenges in development work. …

Sunny Sun

I am full stack developer. Love coding, always leaning, writing and sharing.

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