Introduction to using TypeScript and creating React apps with TypeScript.

1. TYPESCRIPT IS
AWESOME
LEARNING TO USE TYPESCRIPT

2. TYPESCRIPT IS AWESOME
WHAT IS
TYPESCRIPT
TypeScript is a
superset of
JavaScript that
compiles to clean
JavaScript output.

3. TYPESCRIPT IS AWESOME
FEATURES OF TYPESCRIPT
▸All valid JavaScript is valid Typescript
▸Uses Type Inference
▸Statically Typed
▸Strongly Typed
▸Duck Typed

4. TYPESCRIPT IS AWESOME
WHAT IS TYPE INFERENCE?
let legalDrinkingAge = 21;
if (country === ‘Canada’) {
legalDrinkingAge = 19;
};
if (country === ‘Mexico’) {
legalDrinkingAge = ’18’;
// Type '"18"' is not assignable to type 'number'
};

5. TYPESCRIPT IS AWESOME
WHAT IS TYPE INFERENCE?
(CONTINUED)
const sum = (num1: number, num2: number) => {
return num1 * num2;
};
const sumArray = sum(34, 132) .split();
// Property 'split' does not exist on type 'number'.

6. TYPESCRIPT IS AWESOME
STATICLY TYPED VS DYNAMICLY TYPED
Statically typed languages will check types at compile time - before your
program runs. Dynamic languages check during run time.
JavaScript
const myNumber = 33;
const myArray = myNumber.split();
// myNumber.split is not a function
TypeScript
const myNumber = 33;
const myArray = myNumber.split();

7. TYPESCRIPT IS AWESOME
WEAKLY TYPED VS STRONGLY TYPED
Strongly typed languages enforce the behavior of types and do not allow variables
to mix with variables other types easily. Weakly typed languages allow types to
change or interact with other types more easily.*
JavaScript
let myNumber = 4;
myNumber += ‘1’; //myNumber = 5
TypeScript
let myNumber = 4;
myNumber += ‘1’;
// Type 'string' is not assignable to type 'number'.
* There is no precise definition for strongly typed and weakly typed. Strong vs weak
typing is a spectrum, not an absolute.

8. TYPESCRIPT IS AWESOME
WHAT DOES DUCK TYPED MEAN?
“If it walks like a duck and it quacks like a duck, then it must be a duck”
interface Car {
position: number;
drive: (distance: number) => void;
};
const motorcycle = {
position: 3,
drive: (distance) => motorcycle.position += distance,
};
const moveCar = (car: Car, distance: number): void => {
car.drive(distance);
};
moveCar(motorcycle, 15); // this is allowed

9. TYPESCRIPT IS AWESOME
WHY YOU WON’T LIKE TYPESCRIPT
▸You will write about twice as much code
▸It is time consuming to learn and will make your personal
projects take longer to code
▸It won’t add any new bells and whistles to your applications
‣ The advantages will not be worth the cost when working on
small personal projects*
* This is my opinion. Others may disagree.

10. TYPESCRIPT IS AWESOME
WHY YOU SHOULD LEARN TYPESCRIPT
ANYWAY
▸Learning TypeScript will help you become a better programmer
and understand important programming concepts like interfaces,
enums, and namespaces.
▸It is easy to get started with TypeScript because you can move
your projects over from JavaScript one module at a time.
▸TypeScript is rapidly growing in popularity and is used by many
top companies.
▸You will write cleaner code that is easier for others to read and
understand.

11. TYPESCRIPT IS AWESOME
BASIC TYPES
Number - let speed: number = 60;
String - let name: string = ‘Keith’;
Array - let list: Array<string> = [‘1’, ‘2’, ‘3’]; let list: number[ ] = [1, 2, 3];
Tuple - let menuItem: [string, number] = [‘Lasagna’, 14.99];
Enum -
enum Success {
No = 0,
Yes = 1,
}
function respond (recipient: string, success: Success): void {
if (success) {
sendSuccessMessage(recipient);
} else {
sendFailureMessage(recipient);
}
}
respond(“Peter Gibbons”, Success.Yes);

12. TYPESCRIPT IS AWESOME
BASIC TYPES (CONTINUED)
Any* - let anyType: any = ‘3’; anyType = false; anyType = { a: 2, b: 3};
Void - void is usually used for returns of functions. Void can only be undefined
or sometimes null (depending on TypeScript settings**)
Null and Undefined - exactly what you would expect
let emptyVar: undefined = undefined;
let myNull: null = null;
Never - used for functions that never return
ex: function fail( ) : never { throw new Error(‘System Failure’) };
* Any is an escape hatch and should be avoided when possible
** TypeScript docs recommend using --strictNullChecks

13. TYPESCRIPT IS AWESOME
UNION TYPES
A union type is used when multiple types are acceptable for a variable.
Examples:
let padding: string | number;
padding = ‘5px’; // okay
padding = 5; // okay
padding = false // not okay
let menuCategory: ‘Appetizer’ | ‘Entree’ | ‘Dessert’ | ‘Side Dish’;
menuCategory = ‘Dessert’; // okay
menuCategory = ‘side dish’ // not okay

14. https://repl.it/@kdybvig/TypeScript-Practice

15. TYPESCRIPT IS AWESOME
INTERFACE
interface Animal {
position: number,
walk: (distance: number) => void;
};
interface Duck extends Animal {
quack: () => void;
};
const Daffy: Duck = {
position: 2,
walk: (distance) => Daffy.position += distance,
quack: () => console.log(‘QUACK’),
lastName: ‘Duck’,
}

16. TYPESCRIPT IS AWESOME
TYPE ALIAS
type Animal = {
position: number,
walk: (distance: number) => void;
};
type Duck = Animal & {
quack: () => void;
};
const Donald: Duck = {
position: 2,
walk: (distance) => Daffy.position += distance,
quack: () => console.log(‘QUACK’),
lastName: ‘Duck’,
}

17. TYPESCRIPT IS AWESOME
INTERFACE VS TYPE ALIAS
‣ Interfaces can only be used for objects
type suit = ‘Diamonds’ | ‘Hearts’ | ‘Spades’ | ‘Clubs’;
‣ Interfaces can be merged, types cannot
interface Cat { scratch: () => void }
interface Cat { color: string }
const tiger: Cat = {
scratch: () => console.log(‘Ouch!’),
color: ‘Orange’,
};
‣ Types are useful for unions of objects
type Pet = Cat | Dog | Hamster | Rabbit | Fish;
‣ According to the TypeScript docs we should prefer interfaces due to their
greater extensibility, but as of TypeScript 2.7 types are extensible too

18. TYPESCRIPT IS AWESOME
TYPES FOR FUNCTIONAL COMPONENTS
‣ State types are inferred when using useState
Example:
const [count, setCount] = useState(1);
setCount(2); // okay
setCount(‘3’) // not okay
‣ Props can be declared with either type or interface

19. TYPESCRIPT IS AWESOME
TYPES FOR FUNCTIONAL COMPONENTS
(CONTINUED)‣ There is also an FC (Functional Component) type built into React
‣ There is some disagreement about whether to use the FC type or
not and whether to use interface or type for props, but most
people will agree that whatever you choose you should be
consistent throughout your application

20. https://github.com/kmurgic/markdown-preview-app

21. TYPESCRIPT IS AWESOME
TYPES FOR CLASS COMPONENTS
‣ The general pattern for a React Class Component is this:
export class MyComponent extends Component<Props, State> {

22. TYPESCRIPT IS AWESOME
TYPES FOR CLASS COMPONENTS
‣ If a component does not have props, you can put {} for the props
type.

23. https://github.com/kmurgic/drum-machine-app

24. https://github.com/kmurgic/to-do-app

25. TYPESCRIPT IS AWESOME
HELPFUL RESOURCES
▸TypeScript Docs
https://www.typescriptlang.org/docs/home.html
▸How to Add TypeScript to Create React App
https://create-react-app.dev/docs/adding-typescript/
▸React TypeScript Cheatsheat
https://github.com/typescript-cheatsheets/react-typescript-
cheatsheet/blob/master/README.md
▸Ben Awad : TypeScript vs JavaScript Video
https://www.youtube.com/watch?v=D6or2gdrHRE
▸Harry Wolff: TypeScript and React Video
https://www.youtube.com/watch?v=-wBNV7i_b9o&t=399s
▸React + TypeScript Codebases to Learn From
https://github.com/typescript-cheatsheets/react-typescript-
cheatsheet/blob/master/README.md#recommended-react--typescript-
codebases-to-learn-from