Learning to Love TypeScript with React

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????