-
-
Save charliefulton/4e50ac35ffe575264e53ae0c8f295389 to your computer and use it in GitHub Desktop.
typescript crash course
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let id: number = 5; | |
let company: string = 'Traversy Media'; | |
let isPublished: boolean = true; | |
let x: any = 'Hello'; | |
x = true; | |
let age: number; | |
age = 33; | |
// arrays | |
let ids: number[] = [1, 2, 3, 4, 5]; | |
let arr: any[] = [1, true, 'Hello']; | |
// ids.push('Hello'); // Error | |
ids.push(50); | |
console.log(ids); | |
// Tuple | |
let person: [number, string, boolean] = [1, 'Brad', true]; | |
// Tuple Array | |
let employee: [number, string][]; | |
employee = [ | |
[1, 'Brad'], | |
[2, 'John'], | |
[3, 'Jill'], | |
]; | |
// Union - let a variable have multiple types | |
let productId: string | number = 22; | |
productId = 22; | |
productId = '22'; | |
// Enum | |
console.log('\n\nENUMS'); | |
enum Direction1 { | |
Up = 1, | |
Down, | |
Left, | |
Right, | |
} | |
console.log(Direction1.Up); // 1 | |
console.log(Direction1.Down); // 2 | |
console.log(Direction1.Left); // 3 | |
console.log(Direction1.Right); // 4 | |
// Enum | |
enum Direction2 { | |
Up = 'Up', | |
Down = 'Down', | |
Left = 'Left', | |
Right = 'Right', | |
} | |
console.log(Direction2.Up); // Up | |
console.log(Direction2.Down); // Down | |
console.log(Direction2.Left); // Left | |
console.log(Direction2.Right); // Right | |
// declare object types (kinda like an Interface) | |
type User = { | |
id: number; | |
name: string; | |
}; | |
const user = { | |
id: 1, | |
name: 'John', | |
}; | |
// Type Assertion | |
let cid: any = 1; | |
// 2 diff ways to assert the type | |
let customerId = <number>cid; | |
customerId = cid as number; | |
// error if trying to set customerId to a string | |
// customerId = 'Hello'; | |
// Functions | |
// last one is return type | |
function addNum(x: number, y: number): number { | |
return x + y; | |
} | |
console.log(addNum(1, 2)); | |
// function with no return type | |
// message can be a string or a number so using a union | |
// VOID type is used when a function does not return anything | |
function log(message: string | number): void { | |
console.log(message); | |
} | |
log('Hello'); | |
log(1); | |
// log(true); // bad | |
// Interfaces | |
console.log('\nInterfaces'); | |
// interface is like a contract | |
// it says that if you create an object with this interface, it must have these properties | |
interface UserInterface { | |
readonly id: number; // cannot change | |
name: string; | |
age?: number; // optional | |
} | |
const user1: UserInterface = { | |
id: 1, | |
name: 'John', | |
}; | |
// user1.id = 5; // error | |
// types are different than interfaces | |
// because they can be used with primitives, unions, tuples, etc | |
type Point = number | string; | |
const p1: Point = 1; | |
// best to just use interfaces for objects | |
// Interface with functions | |
interface MathFunc { | |
(x: number, y: number): number; | |
} | |
const add: MathFunc = (x: number, y: number): number => x + y; | |
const subtract: MathFunc = (x: number, y: number): number => x - y; | |
// Classes | |
console.log('\n\nCLASSES'); | |
interface PersonInterface { | |
id: number; // cannot change | |
name: string; | |
age?: number; // optional | |
register(): string; | |
} | |
class Person implements PersonInterface { | |
// default is public but can be private or protected | |
id: number; // private - only accessible within the class | |
name: string; | |
constructor(id: number, name: string) { | |
console.log(123); // runs when a new instance of Person is created | |
this.id = id; | |
this.name = name; | |
} | |
register() { | |
return `${this.name} is now registered`; | |
} | |
} | |
const nick = new Person(1, 'Nick'); | |
console.log(nick.name); | |
const jack = new Person(2, 'Jack'); | |
console.log(jack.name); | |
console.log(jack.register()); | |
// console.log(nick.id); // error | |
// Subclasses | |
console.log('\n\nSUBCLASSES'); | |
class Employee extends Person { | |
position: string; | |
constructor(id: number, name: string, position: string) { | |
super(id, name); | |
this.position = position; | |
} | |
} | |
const emp = new Employee(3, 'Kristen', 'Boss'); | |
const emp2 = new Employee(4, 'Charlie', 'Developer'); | |
console.log(emp); | |
console.log(emp.register()); | |
// Generics | |
console.log('\n\nGENERICS'); | |
// used to create reusable components | |
// T is a placeholder for the type | |
function getArray(items: any[]): any[] { | |
return new Array().concat(items); | |
} | |
let numArray = getArray([1, 2, 3, 4]); | |
let strArray = getArray(['Brad', 'John', 'Jill']); | |
numArray.push('hello'); // no error | |
console.log(numArray); | |
// better to use generics | |
function getArray2<T>(items: T[]): T[] { | |
return new Array().concat(items); | |
} | |
let numArray2 = getArray2<number>([1, 2, 3, 4]); | |
// numArray2.push('hello'); // error | |
console.log(numArray2); | |
let strArray2 = getArray2<string>(['Brad', 'John', 'Jill']); | |
// react and typescript and nextjs support typescript |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment