React | NextJS

14.1 TypeScript and Pair Programming

Module Still Under Development

Pair Programming Tips

Roles

The two most common roles for Pair Programming are Driver and Navigator.

The Driver is the developer who is doing the typing and sharing their screen (if working remotely). Their primary focus is writing the code, deciding on names for variables and functions, choosing what functionality is to be put in each function.

The Navigator is the developer who is making notes with reminders about what to do next, who does research on things like the correct URL to use for an API or the correct method signature. The navigator will keep an eye on the code for typos and to make sure that steps are not being skipped. The navigator will write notes about TODO items that need to be revisited later on.

Both of these roles will work together to plan and schedule the work before it starts.

Roles can be different when the developers are of very different skill levels or both are very experienced or the developers do not know each other well. However, for our purposes, most of your classmates are at the same skill level as you and you have picked your own partner, who is generally someone that you know.

Positive Things to Do

1. Plan - decide together before you start code, the problem(s) that you want to tackle.
2. Schedule - decide together a hard or soft limit for how long you want to focus on the code. Keep in mind that shorter periods of time make it easier to remain focused. Scheduling many short sessions is much better than a few long ones.
3. Spread out your sessions. Take gaps where both developers can do research and think about the next problem to be solved. This will make your coding sessions go faster.
4. Switch roles routinely - don't spend an entire session in the same role. switch back and forth between the roles to keep both developers focuses. Both people will be able to learn from the other as well. This also will give you practice doing git commits, pushing to a feature branch and then the other person pulling the feature branch. This will need to be done with every switch in role.

Pitfalls to Avoid

1. Avoid Fake Breaks - stopping coding to check email, social media, and other things on your computer is not a mental break. When taking a break, actually get up from your computer and move around.
2. Avoid distractions - mute your phone. disable notifications. Don't check on Slack. Keep your focus on the task at hand. If you are struggling doing this then consider having shorter scheduled sessions.
3. 5 second rule - if you are the navigator and you see the driver make a mistake, then wait at least 5 seconds for them to finish what they are typing and notice the mistake. Don't interrupt their train of thought to fix a typo.
4. Treat each other with respect. Everyone makes mistakes. Everyone has times when they struggle to see the solution to a problem. Be supportive.

TypeScript

Typescript is not really a new language. It is a superset of JavaScript. Just like SASS is a superset of CSS.

If you take a JS file and you change the file extension from .js to .ts then you have a valid TypeScript file.

Once you start adding the extra features, like data types, to your Typescript file then you need the Typescript transpiler to convert the file from Typescript back into JavaScript. Typescript files on their own cannot run in the browser or in NodeJS.

Originally Typescript had many of the language features that eventually were added in ES6 and the following versions of JavaScript. The team behind Typescript has always taken an active role in the TC39 work to update JavaScript.

So, Typescript does get used with many frameworks but it needs to have the transpiler as part of the build process. Vite and Create-Next-App both have this built-in.

The primary feature that you get from using Typescript is types. This means you can declare variables with a defined type like string, number, boolean, array, function or custom types that you define.

let name: string = 'Joanne'; // a string
let age: number = 42; // a number
let alive: boolean = true; // a boolean
let lottery: number[] = [1, 12, 34, 40, 50, 90]; //array of numbers
let thing: any = 'this variable can hold any data type';

When declaring functions you should declare a return type as well as types for each of its parameters.

function pickNum(): number {
  //function returns a number
  return Math.round(Math.random());
}

function log(): void {
  //function returns nothing
}

function process(label: string, options: { id: number; uuid: string }): boolean {
  //function accepts a number and an object and returns a boolean
  //the accepted object needs to have a number and a string property called id and name
  console.log('For label', label, 'we have the id values', options.id, 'and', options.uuid);
  return true;
}

When accepting objects, like the options parameter in the second function, it can sometimes be easier to define the object as a specific typescript type that you create yourself.

type Person = {
  name: string;
  age: number;
};

function greet(person: Person) {
  return 'Hello ' + person.name;
}

You can define lots of types to be used in other places of your script.

type Missing = number;

type Point = {
  lat: number;
  lng: number;
};

//union types provide a list of possible values
type status = 'AVAILABLE' | 'INTERESTED' | 'SCHEDULED' | 'AGREED' | 'FLUSHED';

//intersection types - combining other types
type Point = { x: number } & { y: number };

//tuple type - like an array where you have specific types at specific indexes
type Info = [id: number, name: string, wanted: boolean];

This tutorial does a really good job explaining Types in Typescript for React and NextJS. The first 15 minutes will give you most of what you need. You can watch the whole 50 minutes to learn more.

Some TypeScript cheatsheets (opens new window)

What to do this week

TODO Things to do before next week.

• Read all the content from Modules 14.1, 14.2.
• Work on your Final Project with your partner.