Loading deck


Phuc Tran

Developer  @ Nord Pool

  • TypeScript
  • Sharing packages: why? how? result?
  • Sharing packages the strange way
  • Recap




class LeClass<T> implements ILeInterface {
    readonly apiPath = "leApiPath";
        private leService: ILeService;

    getAll(refreshCache: boolean = false): Promise<T[]> {

Why TS?

Catch errors sooner!

Natural primitive types!

Navigating code

(Code editor's) Quick actions


Small overhead?

Sharing TS codes


With npm

With static typing npm packages

Sharing complex codes

  • Common feature
    • ​Authorization
    • Multitenancy
    • Ad-hoc API handler
  • Combination of different modules
  • Heavily integrated into the application where it is used

=> A long how to wiki page!

Publish your TS codes


"declaration": true


Or publish to @type org on npm

"main": "./src/index.js",
"types": "./src/index.d.ts"


also apply to js package in general

  • Feature 'Go to definition'
    hates poorly documented code

  • Debugging compiled code is not fun

Go to definition

if you're lucky

and if you're not so lucky....

and when you need

to debug

an external package...

Direct access

to TS source code, we need

'We can't live like this'

java, c#, python pkg can be decompiled on the spot!

'Just go to the repo and look'

'You should be able to read ugly js codes'

Let's watch

the world (build) burn

"main": "./src/index.ts",
"types": "./src/index.ts"
ERROR in ./~/@hkijs/angular-2-common/src/index.ts
Module parse failed: 
Unexpected character '@' (58:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (58:0)


loaders: [
    { test: /\.ts$/, loaders: ["ts"], exclude: /node_modules/ },
loaders: [
    { test: /\.ts$/, loaders: ["ts"]},

to this

Solution with tsconfig.json

"include": [
Subsequent variable declarations must have the same type...
.d.ts(83,5): error TS2300: Duplicate identifier 'A'.
.d.ts(84,5): error TS2300: Duplicate identifier 'B'.
  • Duplicates in typing dependency?
  • Consolidate TS version
  • Consolidate typings with @type org
  • Is your typings up to date?

The bright side

exhibit 1, 'Go to definition'

Exhibit 2

Source code for debugging

'Hei Phuc, your pkg doesn't work'

'Hei dumba**, you missed exception handling here'


More positive things

  • More code sharing
  • Active development/feedback of mutual code
  • "Softly enforce" internal coding standards through common pkgs


Phuc Tran

Developer  @ Nord Pool