Skip to content

Recitation 4: Typescript (Frontend)

Staff Overview

  • Mehul Agarwal & Rohit Nanjangud Shreenivas
  • Emails: mehula@andrew.cmu.edu & rshreeni@andrew.cmu.edu
  • Office Hours: Mehul(3:30 PM to 4:30 PM on Wednesdays) Rohit(5 PM to 6 PM on Fridays)

What and Why Typescript?

  • TypeScript is a strongly typed, object-oriented, compiled programming language that builds on JavaScript
  • Provides an easy way to structure your objects and enforce type validation on them
  • Provides great tooling in your IDEs which help catch bugs that potentially would have otherwise been caught in deployment
  • 0 learning curve if you already know JS

Install Typescript

  • To install TS globally:
    • npm i -g typescript
    • tsc --version
  • To create a react-typescript project:
  • npx create-react-app . → plain react app
  • npx create-react-app --template typescript

tsconfig.json

  • The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project.
  • The tsconfig.json file specifies the root files and the compiler options required to compile the project.

image

How to make your variables strongly typed

image

  • Not specifying a type/using the type "any" - NOT A GREAT PRACTICE!

image

Creating custom types

image

image

Strong typing a function

image

Strong typing arrays/lists

image

Generics

image

Experiment with TS

  • Create a react typescript app
  • Check the contents in the project
  • Run the app
  • Create new components
  • Add props with types