TypeScript for Javascripties: Overnight Camp Edition
Sunday, January 15, 2023 - 3:00 PM UTC, for 8 hours.
Workshop (pre-conference)
Room: Campsite 2
TypeScript is a wildly popular language in both industry and open source: • GitHub’s 2021 and 2020 State of the Octoverses have it at the platform’s fourth top language, up from seventh in 2019 and 2018 and tenth in 2017. • StackOverflow’s 2021 Developer Survey has it at the world’s third most loved language (72.73% of users). • The 2020 State of JS Survey shows TypeScript has consistently high satisfaction and usage amounts as both a build tool and variant of JavaScript. For frontend developers, TypeScript is well supported in all major UI libraries and frameworks, including Angular, which strongly recommends TypeScript, as well as Gatsby, Next.js, React, Svelte, and Vue. For backend developers, TypeScript generates JavaScript that runs natively in Node.js; Deno, a similar runtime by Node’s creator, emphasizes directly supporting TypeScript files. I've done a heck of a lot of research on the right way to teach TypeScript - first speaking at TSConfs, then helping design Codecademy's TypeScript content, and finally on the Learning TypeScript book. The curriculum on this workshop is what I believe to be one of the best ways to introduce learners to its concepts. We first cover context for why TypeScript exists, then the base foundations of how its type system works. Those foundations are then useful for explaining how it works with user code such as on functions and arrays. We then go deeper and show the "fun" parts of the type system, with keywords that modify types and even logic in the type system. > Note: you don't need to have your own copy of Learning TypeScript for this workshop (though it's certainly helpful). I'll provide links to free TypeScript resources separately from the book. Additionally, the O'Reilly online platform has a 10 day free trial option that includes the electronic version of Learning TypeScript.
Agenda
This workshop will hike campers through through most of the Learning TypeScript book table of contents - a battle-tested, intentional set of topics that build on each other to teach TypeScript. We'll cover each of the chapters: 1. From JavaScript to TypeScript: Why JavaScript is the way it is with respect to types (or lack thereof), and where TypeScript does or does not fit in 2. The Type System: Foundations of how TypeScript's type system fits in to JavaScript code and understands your values 3. Unions and Literals: How TypeScript understands values that can be one or multiple possible primitives, along with strict null checking (the "billion dollar mistake") and the powerful concept of "type narrowing" 4. Objects: How TypeScript's "structural typing" allows it to understand objects by their shape and intent, not just by their declaration forms 5. Functions: How TypeScript understands function inputs, outputs, and quirks around "void" and "never" types 6. Arrays: TypeScript's understanding of fixed type, evolving any, and fixed size ("tuple") arrays 7. Interfaces: Akin to types, but with advantages on readability and performance, and an excuse to look at various property modifiers allowed on both 8. Classes: Broadly how TypeScript models class inheritance and properties -- even if your framework of choice doesn't go deeply into them 9. Type modifiers: Various keywords such as 'keyof' and 'typeof' that bend the type system to your will 10. Generics: Adding in type parameters that allow constructs such as functions and interfaces to be flexible on what types and values they're used for 11. Declarations: How external JavaScript -and your own built outputs- can still be described in the type system 12. Using IDE features: Code navigation, name completions, and error debugging that level up any JavaScript and/or TypeScript developer 13. Type Operations: Introducing logic in the type system with mapped and conditional types Each session consists of a 25-30 minute interactive lecture, with 5-10 minutes in-between for bio breaks and miscellaneous questions. We'll have a lunch break in the middle too.
Prerequisites
Intermediate foundations of JavaScript: understanding closures, objects, functions, arrays, and classes.
Take Aways
- How TypeScript's types and type system work to model JavaScript code
- Modeling JavaScript array, function, and object values with TypeScript types
- Narrowing TypeScript's understanding of types with "type narrowing"
- Using TypeScript to augment developer experience and catch bugs
- Using mapped and conditional types to represent logic in the TypeScript type system
- Using IDE features to work more effectively with JavaScript and TypeScript code
Supporting Resources
