presentation.md

title	author
Utility Without the Clutter - Types Without TypeScript	Nico Rehwaldt

Utility Without the Clutter

Types Without TypeScript

---

A Talk by @nikku

---

Why Types

• Safety during development
• Guards against dependencies
• Editor tooling / advanced assistance
• Easier consumption for your users ⬆️

---

tsc, the TypeScript tool

• Checks your code base
• Transpiles your TypeScript to JavaScript
• Generates types from your JavaScript

---

Why not Compile?

• Need to write code.ts
• Everything has to be transpiled
• Source maps bloat packages and are hard to debug

---

Maintainer Wishlist

• My code base is checked
• My code base is typed (for consumers)

---

Project Setup

.
├── src
│   ├── index.js
│   └── other.js
├── package.json
├── rollup.config.js
└── tsconfig.json

---

TypeScript Configuration

{
  "compilerOptions": {
    "module": "commonjs",
    "allowJs": true,
    "checkJs": true,
    "strict": false,
    "skipLibCheck": true,
    ...
  },
  ...
}

---

Add Type Definitions via JSDoc

/**
 * @constructor
 * @param { { sayHello: boolean } } options
 */
export function Foo(options) {
  ...
}

Cf. TypeScript documentation.

---

Or Import Type Definitions

/**
 * @typedef { import('./types').FooOptions } FooOptions
 */

/**
 * @constructor
 * @param { FooOptions } options
 */
export function Foo(options) {
  ...
}

---

Check Your Code Base

tsc --noEmit --pretty

Cf. TypeScript documentation.

---

Generate Type Definitions

tsc src/index.js \
  --declaration \
  --emitDeclarationOnly \
  --removeComments \
  --outDir dist/types

Cf. TypeScript documentation.

---

Expose Type Definitions

{
  "name": "my-project",
  "main": "dist/index.js",
  "types": "dist/types/index.d.ts",
  ...
}

---

Profit

import {
  Foo
} from 'my-project';

const foo = new Foo({});
                    ^---- Argument of type '{}' is not assignable to
                          parameter of type '{ sayHello: boolean }'.

---

➡️ Types are developed and checked naturally, during development.

---

Summary

• Haz types without .ts 🍰 :medal:
• tsc tooling helps you out 💪

---

Resources

• TypeScript Documentation - On JS projects utilizing TypeScript
• Skaat, Wuffle, merge-me - Projects that follow the types without TypeScript approach

---

Thanks

👏