A presentation at Granite State Code Camp by Kemet Dugue
Learning to Love TypeScript with React Kemet Dugue kemetdugue kdugue
Agenda 1. Introduction 2. (Brief) Overview of TypeScript 3. Using TypeScript with React 4. TypeScript Usage within Microsoft Teams 5. Deciding to Use TypeScript 6. Resources
About Me ● Interests: lo-fi house, tennis, and cats ● Engineer at ● Related Tech: Since 2016 Since 2017 Since 2020 (<3) Chucky the (unpredictable) orange tabby
(mention opinions and q&A format here….)
(Brief) Overview of TypeScript
What is TypeScript ??? ● Strongly typed ● Compiles to JavaScript ● Superset of JavaScript ● Unique features: interfaces, enumerations, compilation error detection, earlier access to new JS features (optional chaining), and so much more !!
TypeScript Code examples!
Using TypeScript with React
Using TypeScript with React ● All the TypeScript features can be used within a React project: interfaces, enumerations, generics ● Plus more! ○ Improved code navigation (component definition look ups easier!) ○ Improved intellisense (existing methods and fields)
React TypeScript Code examples!
TypeScript Usage Within Microsoft Teams
What is Microsoft Teams ??? ● Collaborative communication tool for work and personal environments ● Central Hub integrated with other Microsoft services (OneDrive, Microsoft Office, Outlook) ● 500+ 3rd party apps (Invision, Polly, Asana, etc) + app developer platform
Some Stats + 115 million DAU (Daily Active Users) + 300,000 organizations (tenants) + 2.9 million meetings per day _______________________________________ Consistency, efficiency, and ship velocity
Client (Oversimplified) ● Angular (2017) → React (new features and conversion) ● React: performant UI rendering, support for mobile (React Native) ● 200+ open source libraries
Benefits of TypeScript w/ React within Teams ● Documentation (prop discoverability, definition look up) ● Narrowed Test Focus ● Frictionless Developing ● Tooling ● Restriction Allows for Consistency and Maintainability
Deciding to use TypeScript
Disadvantages of Using TypeScript ● Bloated Code ● False sense of security (unreliable types) ● Unnecessary typing (guidelines) ● Third party libraries (definitely need a definition file)
Use Cases for TypeScript When To Use When Not To Use Large codebase, large dev team Small codebase Production-scale app Small app, Prototyping, Hacking away No time for tests Fast iterative development process Performance extremely important
Resources ● TypeScript: https://www.typescriptlang.org/docs/ ● Setting Up TypeScript with React: https://create-react-app.dev/docs/adding-typescript/ ● DefinitelyTyped Github Repo: repo for Type Definitions https://github.com/DefinitelyTyped/DefinitelyTyped ● React + TypeScript Cheat sheet: https://github.com/typescript-cheatsheets/react ● TypeScript Deep Dive (book): https://basarat.gitbook.io/typescript/
Thank you Sponsors
Questions????
Learning to Love TypeScript with React
for free. You
can too.