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

Made with Slides.com