[comment]: # "markdown: { smartypants: true }" ## JS with Types 💪 com Types without Transpilation <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/93_knuo_VQs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <small><a href="https://www.youtube.com/watch?v=93_knuo_VQs" target="_blank">https://youtube.com/watch?v=93_knuo_VQs</a></small> <!-- img title="QR Code for jswithtypes.com" alt="https://jswithtypes.com" src="./qrcode.png" width="42%" --> <!--strong><a href="https://npmjs.org/jswt" target="_blank">NPM: jswt</a></strong--> <small><a href="https://jswithtypes.com" target="_blank">https://jswithtypes.com</a></small>

AJ ONeal <br> [@\_beyondcode](https://twitter.com/@_beyondcode) <br> [youtube.com/coolaj86](https://youtube.com/coolaj86)

Dangerous Wrong Thinker Equal Opportunity Offender Technophobic Technologist Extraordinairé

<img src="https://imgs.search.brave.com/vlCRih9NMnPmJXW3kS2_-_mmYkC8_xXEyi8-QaK0qIg/rs:fit:256:256:1/g:ce/aHR0cDovL2ljb25z/Lmljb25hcmNoaXZl/LmNvbS9pY29ucy9h/aGEtc29mdC90cmF2/ZWwvMjU2L3V0aWxp/dHktYXR2LWljb24u/cG5n" />

## [Savvi.Legal](https://savvi.legal) Business Lifecycle Platform \ for Founders & Investors <small>System of Record, Deal Rooms</small> <small>(we automate away the stuff founders hate)</small>

## [Savvi.Legal](https://savvi.legal) Wanted: (Really Good) \ **Frontend Developer** Contact: **<aj@savvi.legal>**

## [Dash Incubator](https://github.com/dashhive) Digital Cash \ (cryptocurrency to be used as money)

## [Dash Incubator](https://github.com/dashhive) Wanted: (Really Good) \ **Software Engineers** Contact: **coolaj86**

## JS with Types 💪 Types without Transpilation ```sh npx jswt init ``` <br/> (like, sub, follow if you wannu) <!-- strong><a href="https://npmjs.org/jswt" target="_blank">NPM: jswt</a></strong -->

### Useful Links <table> <tr><td> <small>Slides: <a href="https://beyondcodebootcamp.github.io/presos/">https://beyondcodebootcamp.github.io/</a></small> </td></tr> <tr><td> <small>Video: <a href="https://www.youtube.com/watch?v=93_knuo_VQs">https://youtu.be/93_knuo_VQs</a></small> </td></tr> <tr><td> <small>Slides Builder: <a href="https://beyondcodebootcamp.github.io/presos/#quick-start-to-render">MD Slides</a></small> </td></tr> </table>

### Reference Material - <small><a href="https://jsdoc.app/tags-type">JSDoc: Tags: @type</a></small> - <small><a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html">TypeScript: Everyday Types</a></small> - <small><a href="https://github.com/giltayar/jsdoc-typing">Gil Tayar: JSDoc Typing</a></small> - <small><a href="https://gils-blog.tayar.org/posts/jsdoc-typings-all-the-benefits-none-of-the-drawbacks/">Gil Tayar: All Benefits, No Drawback</a></small> - <small><a href="https://topenddevs.com/podcasts/javascript-jabber/episodes/typing-without-transpilation-the-beauty-of-jsdoc-jsj-489">JavaScript Jabber: Typing without Transpilation</a></small>

## 💊 Not a Gateway Drug to TypeScript

Coding like it's 1999

## 💊 Why Go 🐹 and Zig ⚡️ developers \ shouldn't give up on JavaScript

# #0 Philosophy

> Build steps are _not good_.

> Build steps are _not good_. > Slow build steps are _evil_.

> Code gen is better \ > than meta-programming.

> Duck typing is good.

> Duck typing is good. > Inheritance is evil.

> Better tooling makes \ > for better developers.

> Copy and paste \ > (and find and replace) \ > are not bad.

> Copy and paste \ > (and find and replace) \ > are not bad. > Transpilation is evil.

[**Creeds of Craftsmanship** (.com)](https://creedsofcraftsmanship.com) <br /> <small><a href="https://en.wikipedia.org/wiki/Unix_philosophy#Origin">The Unix Philosophy</a></small> \ <small><a href="https://github.com/ewjoachim/zen-of-python">Zen of Python</a></small> \ <small><a href="https://go-proverbs.github.io/">Go Proverbs</a></small> \ <small><a href="https://ziglang.org/documentation/master/#Zen">Zen of Zig</a></small> \ <small><a href="https://prettier.io/docs/en/rationale.html">The Prettier Rationale</a></small> \ <small><a href="https://kentcdodds.com/blog/aha-programming">(DRY, WET &) AHA Programming</a></small> \ <small><a href="https://agilemanifesto.org/">The _actual_ Agile Manifesto</a></small>

# #1 Types are in the Tooling

JavaScript has _always_ had types

# 🦆

(Static Types are a Lie!)

</small>(safe languages have always been dynamically-typed)</small>

## Types of Types <table> <tr> <th><small>Single-Value</small></th> <th><small>Multi-Value</small></th> <th><small>Collection</small></th> <th><small>Meta</small></th> </tr> <tr> <td><small> <ul> <li>Primitives<ul> <li>Booleans</li> <li>Number</li> <li>String</li> <li>BigInt*</li> <li>Int/Uint*</li> </ul></li> <li>Function</li> <li>Null<em>ish</em><ul> <li><code>null</code></li> <li><code>undefined</code></li> <li><code>not defined</code></li> </ul></li> </ul> </small></td> <td><small> <ul> <li>Struct</li> <li>Tuple</li> <li>WeakMap*</li> <li>WeakSet*</li> </ul> </small></td> <td><small> <ul> <li>Map<br>(key-value pairs)</li> <li>List<br>(indexed values)</li> </ul> </small></td> <td><small> <ul> <li>newtypes</li> <li>type aliases<br>(marker types)</li> <li>value enums<br>(C-style)</li> <li>type enums<br>(functional-style)</li> <li>mixins<br>(unions)</li> <li>templates</li> <li>utilities</li> </ul> </small></td> </tr> </table>

## 🦺 🚧 Bad Tools => Bad Types

# 🔨 🧰

**JavaScript** ```js [1-99] let msg = "Hello, World!"; let answer = 42; ```

**JSDoc**

**JSDoc** ```js [1,4] /** @type {String} */ let msg = "Hello, World!"; /** @type {Number} */ let answer = 42; ```

**JSDoc** Communicate Intent

**JSDoc** ```sh # 📝 npm install --location=global jsdoc ```

**TSC**

**TSC** ```js [3,7] /** @type {String} */ let msg = 42; // [E] Type 'number' is not assignable to type 'string' /** @type {Number} */ let answer = "Hello, World!"; // [E] Type 'string' is not assignable to type 'number' ```

**TSC** Catch, Correct, Classify

**TSC** ```sh # 😱 npm install --location=global typescript ```

**TSC** **T**ype**S**cript **C**hecker

### JSDoc + TSC Config

```sh npm init npx -p typescript -- tsc --init \ --allowJs --alwaysStrict --checkJs \ --moduleResolution node \ --noEmit --noImplicitAny \ --target es2022 \ --typeRoots './typings,./node_modules/@types' mv tsconfig.json jsconfig.json ``` ```js --include '*.js,src/**/*.js,lib/**/*.js' \ --exclude node_modules \ ```

# 😵‍💫

too hard # 🤯🔫

# ⚡️

## `jswt`

## `jswt` ```sh # 🚀 npm init # 💪 npx jswt init npx jswt reexport ```

## `jswt` **JS** **W**ith **T**ypes

## `jswt` # JS WT!?

## `jswt` ```txt foo/ ├── 📝 .prettierignore ├── 📝 docs/ ├── 💪 index.js ├── 💪 jsconfig.json ├── 💪 jsdoc.conf.json ├── lib/ │ └── 💪 foo.js ├── 💪 package.json ├── package-lock.json ├── 📝 README.md ├── 💪 types.js └── 💪 typings/ ```

```sh npm run fmt npm run lint npm run reexport ```

- https://jswithtypes.com - https://npmjs.org/jswt

# #2 JavaDoc and C# had a baby...

### Type Syntax ```js [1-99] /** * ... */ ```

### Type Syntax ```js [1-99] /** * ... */ ``` ```js [1] /** ... */ ```

**Inline Types** ```js [1] /** @type {String} */ var msg; ```

**Inline Parameters** ```js [1-5] /** * @param {String} [greeting] * @param {Object} other * @param {String} other.name */ function greet(greeting = "Hello", { name }) { return `${greeting}, ${name}!`; } ```

**Struct Definitions** ```js [1-7] /** * A great person * @typedef Person * @prop {Number} age - years since birth * @prop {Array<Person>} friends - mutual follows * @prop {FooGreeter} greet */ /** @type {Person} */ var friend; ```

**Function Definitions** ```js [1-8] /** * A great way to say "Hello" * @callback Greeter * @param {String} name * @param {Person} other * @returns {Promise<String>} * @throws */ /** @type {Greeter} */ async function greet(greeting, other) { if (isStranger(other)) { throw Error("Stranger Danger!"); } return `${greeting}, ${other.name}!`; } ```

**Weirdness...** ```js /** * @function ❌ */ ``` # 🤷‍♂️

## 🪲 <small><a href="https://github.com/microsoft/TypeScript/issues/50274" target="_blank">github.com/microsoft/TypeScript/issues/50274</a></small>

#### ⚠️ `@prop` vs `@param` ```js [1-99] /** * @callback Greeter * @param {Person} other * @prop {String} foo */ ``` ```js [1-99] function greet(other) { // ... } greet.foo = "bar"; ```

**Nullish Definitions** ```js /** @type {Boolean?} */ let alive = null; /** @type {Boolean?|undefined} */ let cat; ```

**Map Types** ```js [1-99] /** @type {Object.<String, String>} */ ```

**Map Types** ```js [1-99] /** @type {Object.<String, String>} */ ``` ```js /** @type {Object.<Name, Number>} */ ```

**Map Types** ```js [1-99] /** @type {Object.<String, String>} */ ``` ```js /** @type {Object.<Name, Number>} */ ``` ```js /** @type {Object.<Number ❌, Fruit>} */ ```

**Map Types** ```js [1-99] /** @type {Object.<String, String>} */ ``` ```js /** @type {Object.<Name, Number>} */ ``` ```js /** @type {Object.<Number ❌, Fruit>} */ ``` ```js [1-99] /** @type {Object.<String, any ⚠️>} */ ```

**Tuple Types** ```js [1] /** @type {[Result, Error]} */ let [result, err] = await doStuff(); ```

**Tuple Types** ```js [1-3] /** @typedef {[EventName,EventData]} SocketIoResult */ /** @type {SocketIoResult} */ let result = ["follow", { "source": ... }]; ```

**Type Extension** ```js /** @typedef {PersonBase & PersonExtra} Person */ ```

**Type Extension** ```js /** @typedef {PersonBase & PersonExtra} Person */ ``` ```js /** @typedef {File | Folder | Symlink | Pipe} DirEntry */ ```

**Narrowing Functions** ```js [3-6] /** @typedef {File | Folder | Symlink | Pipe} DirEntry */ /** * @param {DirEntry} dirEntry * @returns {dirEntry is File} */ function isFile(dirEntry) { return "file" === dirEntry.type; } ```

**Utility Types** ```js [1-99] /** @typedef {Partial<Person>} PersonLike */ ``` <small>See <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" target="_blank">TypeScript: Utility Types</a></small>

**Utility Types** ```js [1-99] /** @typedef {Partial<Person>} PersonLike */ ``` ```js [1-99] /** @typedef {Required<Person>} PersonFull */ ``` <small>See <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" target="_blank">TypeScript: Utility Types</a></small>

**Weirdness...** ```js /** * @typedef {PersonBase} Person * @prop {String} ssn ❌ */ ``` # 🤷‍♂️

**_Lots_ of quirks**

**Utility Functions** ```js [1-4] /** * @param {Array<any>} arr * @returns any - 😬 */ function last(arr) { return arr[arr.length - 1]; } ```

**Utility Functions** ```js [1-5] /** * @template {any} T * @param {Array<T>} arr * @returns T */ function last(arr) { return arr[arr.length - 1]; } ```

**Utility-ish Function** ```js [3-7] /** @typedef {Partial<Person>} PersonLike */ /** * @template {PersonLike} T * @param {T} p * @returns T */ Person.sanitize = function (p) { if (p.ssn) { p.ssn = "***-**-" + p.ssn.slice(-4); } return p; }; ``` <small><a href="https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#template" target="_blank">JSDoc Reference: @template</a></small>

**Import Types** ```sh npm install --save @types/node npm install --save @types/express ```

**Import Types** ```sh npm install --save @types/node npm install --save @types/express ``` ```js [1,6] /** @type {import('express').Handler} */ function greet(req, res) { res.json("Hello, World!"); } /** @type {import('express').ErrorRequestHandler} */ function apologize(err, req, res, next) { res.json("Hello, World!"); } ```

**Reexport Types** ```js /** @typedef {import('express').Handler} Handler */ /** @typedef {import('./users.js').User} User */ ```

# 💯

# 👏

- <small><a href="https://jsdoc.app/tags-type">JSDoc: Tags: @type</a></small> - <small><a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html">TypeScript: Everyday Types</a></small> - <small><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html">TypeScript: Utility Types</a></small> - <small><a href="https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#template" target="_blank">JSDoc Reference: @template</a></small>

# #3 Deep Dive

# 🤿

# ⏱

### ⚠️ Primitives++ ```js /** @type {BigInt} */ let debt = 1_000_000_000_000n; /** @type {Uint8Array} */ let answers = Uint8Array.from([11, 37, 42]); /** @type {Buffer|ArrayBuffer} */ let bytes = Buffer.from([255, 255, 255, 255]); ```

### ⚠️ Built-Ins ```js /** @type {Date} */ let matcher = Date.parse("2022-09-22T15:05:00.000-0600"); /** @type {RegExp} */ let matcher = /^abc$/; ```

⚠️ Syntax vs Semantics - "Object" _notation_: {} - "Array" _notation_: []

⚠️ Syntax vs Semantics - "Object" _notation_: {} - "Array" _notation_: [] (no intention / meaning)

⚠️ Types are Semantic

### Structs vs Maps

### Structs Mr. Potato Head A "kit" of stuff that goes together

### Structs POJO (Plain-Old JSON Object) ```js [1-99] /** * A great human being * @typedef {Object} Person * @prop {String} name * @prop {Number} age */ /** @type {Person} */ let bob = { name: "Bob", age: 42 }; ```

### Map Phone Home Screet Collection of Like-ish things

Typically by id, but... ```js [1-99] /** @type {Object.<String, Person>} */ let people = { Bob: { name: "Bob", age: 42 }, Jane: { name: "Jane", age: 37 }, }; ```

### Map ```js [1-99] /** @type {Object.<String, Person>} */ let people = { Bob: { name: "Bob", age: 42 }, Jane: { name: "Jane", age: 37 }, }; ``` (kinda tuple-ish)

### Map (kinda tuple-ish) ```js [1-2,8-99] /** @typedef {"Bob"|"Jane"|"Avery"|"Joy"} GreatName */ /** @type {Object.<GreatName, Person>} */ let people = { Bob: { name: "Bob", age: 42 }, Jane: { name: "Jane", age: 37 }, }; people["Jack"] = {}; // [E] "Jack" not found in "Bob"|"Jane"|"Avery"|"Joy" // [E] "{}" cannot be assigned to "Person" ```

### Tuples vs Lists

### Tuples JS WT!?

### Tuples Unopened Lego Set "Kit by the Numbers"

### Tuples Struct... but _indexed_, rather than _named_

### Tuples ```js [1-4] /** * @typedef {[Person, Error]} PersonResult */ let [person, err] = await Person.getById(37); ```

### Tuples (vs Structs) ```js let [p, err] = await Person.getById(37); ``` ```js let { person, error } = await Person.getById(37); ```

### Lists Pokemon Cards _Ordered_ collection of Like-ish things

### Lists ```js [1-99] /** @type {Array<String>} */ let fruits = ["apple", "banana", "grape"]; ``` (⚠️ moot - it's already inferred)

### Lists ```js [1-99] /** @type {Array<Fruit>} */ let fruits = [ { name: "apple", calories: 90 }, { name: "banana", calories: 105 }, ]; ```

### Enums - Value Enums ❌ - Type Enums 💪 - Implied Enums 🦆

### ~~Value~~ Weak Sauce Enums ```go const ( NONE = 0 // falsy, defaulty VIEWER = 1 EDITOR = 2 OWNER = 3 ) ```

**Weirdness...** ```js /** * @enum ⚠️ */ ``` (C-style) `@enum` 🤷‍♂️

### Value Enums ```js /** @typedef {"apple"|"banana"|"grape"} FruitNames */ ``` ```js /** * @param {FruitNames} fruitName */ function smashFruit(fruitName) { // ... } smashFruit("monkey"); ```

### Type Enums For Like-ish things (things that could go in a Map or List)

### Type Enums ```js /** @typedef {Array|Uint8Array|Buffer} Bytes */ ``` ```js /** @typedef {Person|Human} PersonLike */ ```

### Type Enums ## 💩 ```js /** @typedef {String|Number|BigInt} BigNumber */ ``` (code smell)

### Type Enums 🤷‍♂️ (legacy code) ```js /** * @param {Object|Function} [opts] * @param {Function} [cb] */ function getImages(opts, cb) { // ... } ```

### Implied Enums > If it fits it ships!

### Type Alias a.k.a. Marker Type ```js [1-99] /** @typedef {Number} Dollars */ /** @type {Dollars} let salary = 1_000_000; ``` (improve documentation)

### ❌ NewType ```js [1-2] /** @type {Dollars} */ let savings = 1_000_000; /** @type {Cents} */ let price = 500_00; let quantity = savings / price; // 💣 Cannot divide Dollars by Cents ```

## Polymorphism

## Polymorphism 😬

### 👍 Mixins ```js [1-99] /** * @typedef {Object} WithFriends * @prop {Array<Person>} friends */ /** @typedef {BasePerson & WithFriends} PersonWithFriends */ ```

### Type Utils ```js [3] /** * @typedef {Partial<FullPerson>} PersonLike * @typedef {Required<FullPerson>} PerfectPerson * @typedef {NonNullable<FullPerson>} SteelPerson * @typedef {Pick<BasePerson, "name" | "age">} MiniPerson * @typedef {Omit<BasePerson, "ssn">} PublicPerson */ ```

### Type Utils ```js [2] /** * @param {ReadOnly<PersonLike>} p * @returns {String} */ Person.hash = function (p) { // ... }; ```

### Type Utils # ⚠️

### Type Utils # ⚠️ > Just because you _can_ \ > doesn't mean you _should_

### Type Utils # ⚠️ > Flat is Better than Nested - > [Zen of Python](https://github.com/ewjoachim/zen-of-python) ### Type Utils # ⚠️ > Avoid Hasty Abstractions - > [Kent C. Dodds](https://kentcdodds.com/blog/aha-programming)

### Type Utils # ⚠️ > People aren't great at recursion - _Every Juan, Ever_

# 🏊‍♂️ 🫁

# 🏊‍♂️ 🫁

# 🦆 Quack!

# 🦆 Quack!

Q&A

Like, Sub, & Follow <small>(if you wannu)</small>

## Thanks. ```js [1-99] /** * Keep on trying 'til we run out of cake * @template {PersonLike} T * @param {T} subject * @param {Boolean} [alive] * @returns {Promise<T?>} * @throws */ function doScience(subject, alive) { // ... } ```