One reason I really like TypeScript is its Type system, it is practical and feature rich. Applying the types in 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 type script 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.


Angular state management is the core of any Angular App, but there is no one-size-fit-all solution. Although Ngrx is the most popular angular state management framework, but 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 similar concept of Redux pattern.

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

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


As one of the common creation patterns, the factory pattern makes application loose coupling by hiding the implementation details from client code using interface. It leaves the creation of object instance to the factory implementation. The purpose of this article is to show how to improve the factory “creator” with Type script type map.

Users Factory Implementation

We’ll be using a typical example of a factory that creates different types of users: Manager and Developer for the sake of simplicity. You can imagine there will be much more types in a real project.

Firstly, let’s define our Manager and Developer classes.


Everything in JavaScript world is an Object. We often need to clone an Object, and when working with TypeScript, preserve the object type may also be required. This article will explore the options of deep clone an Object with TypeScript, and implement the clone functionality without dependencies to external libraries.

Shallow copy

A shallow copy using Object.Assign or Spread operator will duplicate the top-level properties, but the properties as an Object is copied as a reference, thus it is shared between the original source and target(copied Object).

const objShallowCopy = Object.assign({}, Obj1);
// or
const objShallowCopy = {...Obj1};

Although the above methods…


Managing different environment configurations for a Web App is an essential task. NestJS provides an out-of-box config package based on .env files. However, my personal preference is to use the Angular style environment config files. Thus, this article will describe a simple environment config solution. The solution is illustrated in a NestJS App, but it can work in any NodeJs Apps.

Environment specific configs with default

The config files structure is shown below. The settings.json contains base configurations with default values, and a settings.[environment].json stores the environment specific configs which can overrides the default values.

└──Project/src/environments/
└──settings.json
└──settings.prod.json
└──settings.dev.json

The sample settings are listed below…


There are some facts that I wish I knew before spending half a day digging into a User Agent issue. Here’s what I learned.

The User-Agent (UA) is a string contained in the HTTP headers and is intended to for browser detection: to identify the device/platform of the visiting user, and can be used to determine appropriate content to return.

User Agent is a mess

The truth is, User Agent is full of lies, in many cases, a browser pretended to be other browser with User Agent. In the history of User Agent, browsers often pretend to be another browser because some websites serve contents(frames…


One of the important benefits of using Typescript is its strongly typed, so it provides compiled time type checking and developers can work more efficiently in large and complex Apps. That is also why we will like to convert the Http Json response to a strongly typed object in Angular App.

Cast the Json Response

A very simple and common example is to use typescript interface to “cast” the Json response into the defined data structure as below:

export interface IRepo {
name: string;
created_at: Date;
}
...
// Use interface IRepo to "Cast" the resposne
const path = 'https://api.github.com/repos/libgit2/libgit2sharp';
return this.http.get<IRepo>(path);

So in…


Recently, I implemented an interesting feature using SignalR and Angular. The new feature in the Angular App allows admins to see all active clients in “waiting room” page. The admin can then pick one and start the appointment immediately.

I will share the gist of the solution which make use of SignalR bi-directional communication ability and integrate with Angular.

Architecture

The technologies used includes .Net core, SignalR and Angular.


In this article, I will present a solution for building White label Angular Apps using dynamic routing and lazy-loading modules.

What is White label App

A White label App is a App made by a company and re-branded for the
other companies to make the product looks like their own. Using White label App will save time and effort as it is mostly customization of look and feel and the functionality are provided out of box.

What I want to achieve in this solution

In this example, I want to develop a White label App based on a existing Angular App. My goals are:

  1. The White label App has own landing page, with…

A common strategy to manage breaking changes of a REST API is to add a new version. A new version allows clients to continue using the existing REST API and move their applications to the newer API version when they’re ready.

There are plenty of discussions and debates about how to pass the API versions, via URL or Header etc. However, I couldn’t find many in-depth discussions on how the code base should be structured to manage multiple versions. The technical implementation strategies on managing multiple versions in single application seems more important than the versioning strategy.

Based on my…

Sunny Sun

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