Back to top
Recitation 4: Typescript (Frontend)
- Mehul Agarwal & Rohit Nanjangud Shreenivas
- Emails: firstname.lastname@example.org & email@example.com
- Office Hours: Mehul(3:30 PM to 4:30 PM on Wednesdays) Rohit(5 PM to 6 PM on Fridays)
What and Why Typescript?
- 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
- 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
- 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.
How to make your variables strongly typed
- Not specifying a type/using the type "any" - NOT A GREAT PRACTICE!
Creating custom types
Strong typing a function
Strong typing arrays/lists
Experiment with TS
- Create a react typescript app
- Check the contents in the project
- Run the app
- Create new components
- Add props with types