TS Basics

1. Numbers
   • ints, floats, etc
2. Strings
   • all text values
3. Boolean
   • true or false
4. Object types
   • Any JS object, more specific obj types are possible too
5. Tuples
   • fixed length and fixed type array
6. Enums
   • an enumberated list
7. Any
   • tells ts nothing! You set the type of whatever to ANYTHING aka we dont get all that TS help
   • avoid at all costs - gives vanilla js experience

Typescript only helps us during compliation i.e. not during runtime

Type Inference

TS does its best to understand what types we have. If we do not explicity assign types, TS will infer them. We should use infered types where possible

Object Types

Object types are written are written almsot like js objs. Instead of key value pair they are key type pairs - i.e. if you try to access a property that doesnt exist, TS will yell at you that this key doesnt exist

const person: { name: string; age: number } = {
	name: 'Jon',
	age: 30,
};

Tuples

Fixed length and type arrays This is good if you need super strictness on a value

let role: [number, string]

Enums

Assign labels to numbers - You dont have to start with the 0 index you can also siggn the strings to your own value i.e = {ADMIN = 100, READ_ONLY = 2, ...} However most people jsut stick with the 0 indexed numbering

enum Role {
	ADMIN, //0
	READ_ONLY, //1
	AUTHOR, //2
}

const person = {
	name: 'Jon',
	age: 30,
	hobbies: ['Cooking', 'Reading'],
	role: Role.ADMIN,
};

Interfaces

Used to describe the structure of an object

interface Greetable {
	name: string;
	greet(phrase: string): void;
}

Generics

A type that is connected with another type that is flexible with what that type is

Parital

This is a built i ngeneric type that allows us to let something to a partial type aka it turns the object into a type where all properties are option. Partial is an object type b/c of this

function createCourseGoal(title: string, description: string, date: Date): CourseGoal {
	let courseGoal: Partial<CourseGoal> = {};
	courseGoal.title = title;
	courseGoal.description = description;
	courseGoal.completeUntil = date;
	// have to type cast this b/c now know that is will return a CourseGoal now and not a Partial<CourseGoal>
	return courseGoal as CourseGoal;
}

Readonly

another built in generic type that allows us to make things uneditable aka READ ONLY

const names: Readonly<string> = ['Jon', 'Nici'];
names.push('Rocky');

see how we cannot push or pop with TS yelling at us??

Decorators

Decorators execute bottom up instead of top down Decorators help devs by giving us some more information either on the screen or in the console

//These are decorator factories becasue they are a fucntion that return a fucntion, this gives us the ability to put parameters into our decorators where they are called
function Logger(logString: string) {
	return function (constructor: Function) {
		console.log(logString);
		console.log(constructor);
	};
}

function WithTemplate(template: string, hookId: string) {
	return function (constructor: Function) {
		const hookEl = document.getElementById(hookId);
        const p = new constructor()
		if (hookEl) {
			hookEl.innerHTML = template;
            hookEl.querySelector('h1')!.textContent = p.name
		}
	};
}

@Logger('LOGGING - PERSON')
@WithTemplate('<h1>My Person Object</h1>', 'app')
class Person {
	name = 'Jon';
	constructor() {
		console.log('creating person object...');
	}
}

const pers = new Person();

console.log(pers);