These are the 3 tips I found pretty handy while working with Typescript:

Eliminating the need to import interfaces Making all interface properties optional Stop throwing me error, I know what I'm doing

Though I discovered these while working with Angular application, but all tips are not Angular specific, it's just Typescript.

I like interfaces. However, I don't like to import them everytime. Although Visual Studio Code has auto-import feature, I don't like my source files been "polluted" by multiple lines of imports - just for the purpose of strong typing.

This is how we do it normally.

export interface Customer { id : number ; name : string ; } export interface User { id : number ; isActive : boolean ; }

import { Customer , User } from './api.model' ; export class MyComponent { cust : Customer ; }

Solution 1: Using namespace

By using namespace, we can eliminate the needs to import interfaces files.

namespace ApiModel { export interface Customer { id : number ; name : string ; } export interface User { id : number ; isActive : boolean ; } }

export class MyComponent { cust : ApiModel . Customer ; }

Nice right? Using namespace also help you to better organize & group the interfaces. Please note that you can split the namespace across many files.

Let's say you have another file called api.v2.model.ts . You add in new interfaces, but you want to use the same namespace.

namespace ApiModel { export interface Order { id : number ; total : number ; } }

You can definitely do so. To use the newly created interface, just use them like the previous example.

export class MyComponent { cust : ApiModel . Customer ; order : ApiModel . Order ; }

Here is the detail documentation on Typescript namespacing.

Solution 2: Using d file

The other way to eliminate import is to create a typescirpt file end with .d.ts . "d" stands for declaration file in Typescript (more explanation here).

interface Customer { id : number ; name : string ; }

Use it as normal without the need to import it.

export class MyComponent { cust : Customer ; }

I recommend solution 1 over solution 2 because:

d file usually use for external, 3rd party declaration

namespace allow us to better organize the files

It's quite common where you will use same interface for CRUD. Let's say you have a customer interface, during creation, all fields are mandatory, but during update, all fields are optional. Do you need to create two interfaces to handle this scenario?

Here is the interface

export interface Customer { id : number ; name : string ; age : number ; }

Solution: Use Partial

Partial is a type to make properties an object optional. The declaration is included in the default d file lib.es5.d.ts .

type Partial < T > = { [ P in keyof T ] ? : T [ P ] ; } ;

How can we use that? Look at the code below:

import { Customer } from './api.model' ; export class MyComponent { cust : Partial < Customer > ; / ngOninit ( ) { this . cust = { name : 'jane' } ; } }

If you don't find Partial declaration, you may create a d file yourself (e.g. util.d.ts) and copy the code above into it.

For more advance type usage of Typescript, you can read here.

As a Javascript turns Typescript developer, one might find Typescript error is annoying sometimes. In some scenario, you just want to tell Typescript, "hey, I know what I am doing, please leave me alone.".

From Typescript version 2.6 onwards, you can do so by using comment @ts-ignore to suppress error.

For example, Typescript will throw error "Unreachable code detected" in this following code:

if ( false ) { console . log ( 'x' ) ; }

You can suppress that by using comment @ts-ignore

if ( false ) { console . log ( 'x' ) ; }

Find out more details here: Typescript 2.6 release

Of course, I will suggest you to always try fix the error before ignoring it!

Typescript is good for your (code) health. It has pretty decent documentation. I like the fact that they have comprehensive What's new documentation for every release. It's an open source project in Github if you would like to contribute. The longer I work with Typescript, the more I love it and appreciate it.

That's it, happy coding!

Like this article? Follow @JecelynYeen on Twitter