Name: Video recording for React with TypeScript - Build a React component together - Codementor Events
Uploaded: 2022-02-07
Description: Learn the benefits and fundamentals of TypeScript with Sylvana through this live coding session.


## About the talk
 
 When React developers first adopt TypeScript into their projects, it can feel more like a burden than a help. In this talk, we’ll break down the fundamentals of TypeScript and demonstrate how it can increase productivity, enforce self-documentation, encourage best practices, and help you refactor with confidence.
 
 ### This talk will cover
 
 - Basics like type inferences, type annotations, and interfaces
 - How TypeScript catches bugs in your code and provides smart suggestions
 - Live coding to demonstrate how to build out a React component using TypeScript


technical events about the web like JavaScript, web3

Web Development

### What is TypeScript? What problem does it solve?
TypeScript is both a language and a set of tools. The language is a superset of JavaScript, which means it’s built on top of JavaScript and it allows you to add type definitions to your code. TypeScript is also a set of tools. It surfaces errors in your code while you’re developing so it makes writing good code easier. 


Let’s say you’re writing in JavaScript, and this is the welcome message you have crafted:
```
const welcome = () => {
        const greeting = ‘welcome!’;
        console.log(greeting);
};
```
If someone were to come in and refactor the code to become:
```
const welcome = (hasAccess) => {
        const greeting = hasAccess ? ‘welcome’ : ‘go away!’;
        console.log(greeting);
};
```
you won’t be able to see any errors while it would cause unintended behavior, which displays `go away!` as the greetings every time. 


If you were to add TypeScript to your project, and made this a TypeScript file, you would immediately get feedback as you code. TypeScript would show the following error message:
```
// Error: Expected 1 arguments, but got 0.
// An argument for ‘hasAccess’ was not provided.
```
Just with this simple scenario, you can appreciate that TypeScript makes coding a lot faster, it catches bugs in your code, and it allows you to refactor your code with a lot more confidence.


### What are the fundamental concepts of TypeScript?
#### Type Inferences: 
Typescript uses initial values to infer the type of a variable. It then uses that knowledge to check whether the variable is being used properly. 


#### Type annotations: 
When TypeScript cannot properly infer the type, you can use type annotations to explicitly set the type. 


Here’s an example:
```
let myAnnotatedBoolean: boolean;


// Error: type ‘string’ is not assignable to type ‘boolean’
myAnnotatedBoolean = “true”;
```
Another case you might have to use a type annotation is for function parameters. Sometimes TypeScript can’t infer that `hasAccess` is a boolean. So you can use the same syntax to tell TyepScript that the `hasAccess` parameter has a type, boolean. If you tried to call this function and tried to give it a number, TypeScript would show an error:
```
const welcome = (hasAccess: boolean) => {
        …
};


// Error: Argument of type ‘number’ is not assignable to parameter type ‘boolean’
welcome(1);
```
#### Type Unions: 
Used to tell TypeScript that a variable can be one thing or another. 


For example:
```
const myUnionFunction = {
        error: strong | undefined
) => {
        // Error: object is possibly ‘undefined’
        console.log(error.toUpperCase());


        // Ok!
        If (error) console.log(error.toUpperCase());
};
```
#### Literal types: 
Used to specify an exact value that a string, number, or boolean must have. 


For example, this combines a literal type and a union type: 
```
let myFavoriteNumber: 10 | 14 | 19;


//Error: type ‘2’ is not assignable to type ‘10 | 14 | 19’
myFavoriteNumber = 2;


// Ok!
myFavoriteNumber = 14;
```


Similarly, this can be used for strings as well:
```
let mySuit: “Clubs” | “Diamonds” | “Hearts” | “Spades”;


// Error: type ‘Koalas’ is not assignable to type ‘“Clubs” | “Diamonds” | “Hearts” | “Spades”’
mySuit = “Koalas”;


//Ok!
mySuit = “Spades”;
```


#### Function types: 
Used to annotate the type of a function. 


Here’s an example of annotating the type of a function in TypeScript:
```
let annotatedWelcome: (hasAccess: boolean) => void;


// parameter types can be inferred when a function type is provided
// in this case, TypeScript knows that hasAccess has type ‘boolean’
                        
                        (parameter) hasAccess: boolean
annotatedWelcome = (hasAccess) => {
        const greeting = hasAccess ? “welcome!” : “go away!”;
        console.log(greeting);
};
```
Here’s another example:
```
let lengthCalculator: (word: string) => number;
lengthCalculator = (word) => word.length;


let errorLogger: () => void;
errorLogger = () => console.log(“whoops”);
```
#### Interfaces: 
Used to describe the shape of an object in TypeScript.


For example: 
```
Interface Hero {
  name: string
  superPower: () => void;
}


let ironMan: Hero = {
// Error: type ‘number’ is not assignable to type ‘strong’ 
  name: 17,
// Eroor: type ‘boolean’ is not assignable to type ‘() => void’
  superPower: false,
};
```
An ok value for Iron Man would look something like this:
```
interface Hero {
  name: string;
  superPower: () => void;
}


// Ok
let ironMan: Hero = {
  name: “Tony Stark”,
  superPower: () => console.log(“I am Iron Man”),
};
```
### What is the difference between an interface, object, and class? In what circumstances would you use an interface?


An interface is a type you’d want to use for an object. Let’s say you have a variable, and the value for that value is just an object that has a property name ‘text’ on it. If you want to add an annotation to that variable, you can create an interface to tell TypeScript what the shape of that variable should look like. If you didn’t define the hero interface, you wouldn’t be able to tell TypeScript the type for Iron Man. The way to do that is to do it with interfaces.

Software Engineer at Codecademy working to provide quality education to all

Sylvana Santos

LinkedIn

Learn the benefits and fundamentals of TypeScript with Sylvana through this live coding session.

Video recording for: React with TypeScript - Build a React component together

Discussion