Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Shipping TypeScript to npm
Slide 2
Slide 2 text
Steve Faulkner @southpolesteve
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Why Cosmos DB?
Slide 8
Slide 8 text
Read/Write JSON Massive scale+perf No schema SQL API Everything indexed by default! Tune-able consistency JavaScript stored procedures
Slide 9
Slide 9 text
npm install @azure/cosmos https://portal.azure.com
Slide 10
Slide 10 text
Can we write TypeScript, ship to npm, and make everyone happy?
Slide 11
Slide 11 text
Who uses npm?
Slide 12
Slide 12 text
Node Users
Slide 13
Slide 13 text
commonjs esm
Slide 14
Slide 14 text
Browser Users
Slide 15
Slide 15 text
commonjs esm amd globals
Slide 16
Slide 16 text
TypeScript Users
Slide 17
Slide 17 text
types
Slide 18
Slide 18 text
Step 1: tsconfig module: commonjs outDir: ./dist types: ./dist/index.d.ts
Slide 19
Slide 19 text
Consumer Report esm amd global webpack
Slide 20
Slide 20 text
Step 2: tsconfig module: umd
Slide 21
Slide 21 text
Universal Module Definition
Slide 22
Slide 22 text
Consumer Report global
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
“UMD”
Slide 25
Slide 25 text
Step 3 rollup.js
Slide 26
Slide 26 text
typescript(esm) -> cjs rollup(cjs) -> umd
Slide 27
Slide 27 text
Consumer Report esm webpack typescript
Slide 28
Slide 28 text
Step 4 typescript(esm) -> esm rollup(esm) -> umd
Slide 29
Slide 29 text
Consumer Report esm webpack typescript
Slide 30
Slide 30 text
Step 4 @microsoft/api-extractor
Slide 31
Slide 31 text
Rollup for .d.ts
Slide 32
Slide 32 text
Consumer Report
Slide 33
Slide 33 text
If only that were the end….
Slide 34
Slide 34 text
Now you want actually write code!
Slide 35
Slide 35 text
Part 2: The ways you will break typescript users
Slide 36
Slide 36 text
1: “lib”
Slide 37
Slide 37 text
lib: ["esnext"]
Slide 38
Slide 38 text
///
Slide 39
Slide 39 text
lib: []
Slide 40
Slide 40 text
lib
Slide 41
Slide 41 text
2: ES modules
Slide 42
Slide 42 text
import * as assert from 'assert' assert()
Slide 43
Slide 43 text
"esModuleInterop": true
Slide 44
Slide 44 text
import assert from 'assert' assert()
Slide 45
Slide 45 text
3: Leaking Types
Slide 46
Slide 46 text
import { Agent } from “http” export interface ClientOptions { agent?: Agent; }
Slide 47
Slide 47 text
1. npm i @types/node 2. Mirror types
Slide 48
Slide 48 text
interface Agent { maxFreeSockets: number; requests: any; } interface ClientOptions { agent?: Agent; }
Slide 49
Slide 49 text
// In tests! import { Agent } from “http” let opts : ClientOptions = { agent: new Agent() }
Slide 50
Slide 50 text
4: Enums
Slide 51
Slide 51 text
enum Color { Red, Green } const green = Color.Green const red: Color = “Red”
Slide 52
Slide 52 text
export const Color = { Red: "Red", Green: "Green" };
Slide 53
Slide 53 text
export const Color = { Red: "Red" as "Red", Green: "Green" as "Green" };
Slide 54
Slide 54 text
export const Color = { Red: "Red" as “Red", Green: "Green" as "Green" }; const green: Color = Color.Green const red: Color = “Red”
Slide 55
Slide 55 text
5: Changing TS versions
Slide 56
Slide 56 text
3.0 -> 3.1
Slide 57
Slide 57 text
///
Slide 58
Slide 58 text
Minor versions of TS will introduce breaking type syntax
Slide 59
Slide 59 text
Have a typescript consumer test
Slide 60
Slide 60 text
let versions = [ "3.0", "3.1", “latest" ]; exec(`npx -p typescript@${version} tsc`);
Slide 61
Slide 61 text
Recap
Slide 62
Slide 62 text
typescript(esm) -> esm rollup(esm) -> umd apiExtractor(index.d.ts) Don’t use “lib” esModuleInterop: true Mirror @types interfaces Don’t use enums Have a TS consumer tests
Slide 63
Slide 63 text
https://github.com/ Azure/azure-sdk
Slide 64
Slide 64 text
Disclaimers: I don’t work on TypeScript Not official guidance This info is already stale
Slide 65
Slide 65 text
Questions? @southpolesteve