Loading deck

TypeScript

Phuc Tran

Developer  @ Nord Pool

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

 

IN THIS TALK

TypeScript

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

    getAll(refreshCache: boolean = false): Promise<T[]> {
        this.leService.get<T>(this.apiPath);
    }
}

Why TS?

Catch errors sooner!

Natural primitive types!

Navigating code

(Code editor's) Quick actions

Generics!

Small overhead?

Sharing TS codes

Manually

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

Publish

"declaration": true

Prepare

Or publish to @type org on npm

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

Limitation

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: 
/c/@hkijs/node_modules/@hkijs/angular-2-common/src/index.ts 
Unexpected character '@' (58:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (58:0)

Solution

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

to this

Solution with tsconfig.json

"include": [
    "node_modules/@hkijs/angular-2-common/**/*",
    "..."
]
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'

became

More positive things

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

Thanks!

Phuc Tran

Developer  @ Nord Pool