Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • The Basics
  • TypeScript Types
  • React and TypeScript
  • Typing Component Props
  • React Typescript Hooks
  • Forms and Events
  • React Context and Interfaces
  • Additional Resources
  1. 4: Capstone

4.3: TypeScript

Previous4.2.2: Circle CiNext4.4: Security

Last updated 1 year ago

Learning Objectives

  1. Introduction to TypeScript

  2. How to setup a React Typescript application

Introduction

TypeScript is a popular programming language and syntactic superset of JavaScript that adds optional static typing of variables. Static typing means every variable can only store values that adhere to a specific, pre-defined data type. This allows for more robust error checking prior to runtime, reducing bugs due to variables storing unexpected values. TypeScript is developed and maintained by Microsoft. Many companies large and small choose to use TypeScript over JavaScript today due to the robustness it provides over vanilla JavaScript. Static typing in TypeScript is also similar to typing in other common languages such as Java and Go.

Static typing means every variable needs to be declared with a specific data type, and cannot store values that do not adhere to that data type. While requiring more upfront effort to define the type of each variable, static typing can increase development speed in the long term by reducing bugs due to ambiguous typing of variables. Popular languages like Java and Go require static typing, and their robustness due to static typing is a large reason for their popularity.

, esteemed section leader at Rocket delivered this with hands-on examples during one of his classes. The majority of the video demonstrates type checking with TypeScript and how it yields benefits compared with vanilla JavaScript.

The Basics

  1. Understand Static type-checking, which ensures that your code will be able to run, before you try to run and execute your code.

  2. Implement code that handle Non-exception Failures, if TypeScript notices some JavaScript in your code that is not valid it will warn you of the error.

  3. Use Explicit Types when developing to describe the values that you will invoke functions with.

TypeScript Types

  1. Primitives, and Complex data types and how you annotate them within TypeScript.

  2. Type Aliases and Interfaces allow us to define objects that we want to use within our functions. These features are almost interchangeable, but the key difference is that a tpye cannot be re-opened to add new properties while and interface is always extendable.

  3. Type Assertions are vital if you are getting information from a DOM element.

React and TypeScript

When creating React applications you are able to add TypeScript into the project when using the Create-React-App. Use the command below to create a React boilerplate that contains TypeScript.

npx create-react-app name-of-app --template typescript

When working on a React TypeScript project we need to being to apply Typing to many React concepts, like Props as well as States. To understand this and more please have a look at the following sets of documentation.

Typing Component Props

React Typescript Hooks

Forms and Events

  1. Become aware of the form event types that are present in React TypeScript.

React Context and Interfaces

These are just some set of documentation that you can look through to get started while developing a React TypeScript project. Now try to build up a project using TypeScript!

Additional Resources

If you are developing a full application using TypeScript we recommend following the all of the material within

Try the code out in the .

with tutorials and walkthroughs of the most important TypeScript features for beginners

🏞️
this handbook.
TypeScript Playground
Official TypeScript Handbook
Here are some React TypeScript cheatsheets
How to combine TypeScript with JavaScript
Robert Kolsek
intro to TypeScript
Introduction to TypeScript by Robert Kolsek, Rocket Academy Section Leader
Documentation - The Basicstypescriptlang
TypeScript official documentation
Documentation - Everyday Typestypescriptlang
TypeScript official documentation, Types
Typing Component Props | React TypeScript Cheatsheets
TypeScript React cheatsheet
Hooks | React TypeScript Cheatsheets
React TypeScript Cheatsheet
Forms and Events | React TypeScript Cheatsheets
Handling forms and events in TypeScript
Context | React TypeScript Cheatsheets
React TypeScript Context and Interfaces
Logo
Logo
Logo
Logo
Logo
Logo