TypeScript is a superset of JavaScript that compiles to clean JavaScript output. It adds static typing and interfaces to help catch errors. The document discusses TypeScript features like type inference, static vs dynamic typing, interfaces, type aliases, and how to add types for React components. TypeScript is growing in popularity and can help programmers write cleaner code, though it does require more upfront effort to learn and use.

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 = ’21’;
};

5. 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();
// TypeError: myNumber.split is not a function
TypeScript
const myNumber = 33;
const myArray = myNumber.split();

6. 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’; // TSError: Unable to compile TypeScript: 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.

7. 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

8. 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 just my opinion. Others might disagree.

9. 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.

10. 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("Princess Caroline", Success.Yes);

11. 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

12. 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

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

14. 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’,
}

15. 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’,
}

16. 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

17. 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

18. 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

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

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

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

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

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

24. TYPESCRIPT IS AWESOME
USEFUL RESOURCES
▸TypeScript Docs
▸How to Add TypeScript to Create React App
▸React TypeScript Cheatsheat
▸TypeScript vs JavaScript Video
▸TypeScript and React Video
▸React + TypeScript Codebases to Learn From