이넘

enum Answer {
	Yes = 'Y',
    No = 'N',
}

function askQuestion(answer: string) {
	if(answer=='yes')
    	console.log('정답입니다');
    if(answer=='no')
    	console.log('오답입니다');
}

if(answer == Answer.Yes)
if(answer == Answer.No)

askQuestion('y');
askQuestion('Yes');

이렇게 하면 예외 케이스들이 줄을 것이다.

---

클래스

class Person {
	constructor() {}
}

자바스크립트는 프로토타입 기반의 언어이다.

var user = { name: "hyoseung", age: 20 };
var admin = {};
admin.__proto__ = user;

admin은 user를 상속 받는다.

//클래스 문법
class Person {
	public name:string;
	private age:number;
}

---

제네릭

재사용성이 높은 코드를 작성할 때 자주 쓰인다.

function logText(text) {
	console.log(text);
    return text;
}

function logText<T>(text: T):T {
	console.log(text);
    return text;
}

logText<string>('하이');

만약에 인자 타입별로 다른 수행 작업이 있을 경우에 함수를 또 써야한다.

function logNumber(num: number) {
	console.log(num);
    return num;
}

하지만 이럴 경우에 똑같은 코드를 또 쓰는 거기 때문에 유지보수가 좋지 않다.

function logText(text string | number) {
	text. 
}

유니언 타입으로 인자를 받을 때에는 타입들의 공통적인 부분에만 접근할 수 있다는 문제점이 있다.

이럴 때 제네릭을 써보자!

function logText<T>(text: T): T {
	console.log(text);
    return text;
}
const str = logText<string>('abc');
str.split();
const login = logText<boolean>(True);

타입에 뭐가 들어갈 지 호출 시에 정한다는 개념

인터페이스에 제네릭을 사용하는 방법

interface Dropdown<T> {
	value: T;
    selected: boolean;
}
const obj: Dropdown<string> = { value: 'abc', selected: false };

---

타입 추론

변수를 선언하거나 초기화할 때, 이외에도 속성, 인자의 기본값, 함수의 반환값 등에서 타입추론이 일어난다.

interface Dropdown<T> {
	value: T;
    title: string;
}
var item: Dropdown<string> = {
	value: 'abc', //여기서 문자열이 들어가야 한다고 알려준다
    title: 'hello'
}

타입스크립트 내부에서 value에 string이 들어갈 것이라고 추론한다
바로바로 language server에서 이 타입이 맞다? 틀리다? 를 알려준다

타입 단언

타입스크립트보다 개발자가 더 타입에 대해 잘 알고 있다.
그러니까 타입스크립트는 신경쓰지 마라

DOM API 조작

<div id="app">hi</div>
var div = document.querySelector('div');
div.innerText; // 이럴 때 div가 null일 수도 있어서 에러가 난다

이럴 때 이렇게 할 수 있다!

var div = document.querySelector('div') as HTMLDivElement;

타입 호환

타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지?

interface Developer {
	name: string;
    skill: string;
}
interface Person {
	name: string;
}
var developer: Developer;
var person: Person;
person = developer; //오른쪽 값이 더 큰 구조의 경우 호환이 된다

---

var add = function(a: number) {}
var sum = function(a: number, b: number) {}
sum = add;

interface Empty<T> {
}
var empty1: Empty<string>;
var empty2: Empty<number>;

empty1 = empty2
empty2 = empty1 //안에가 비었기 때문에 둘은 호환된다.

interface NotEmpty<T> {
	data: T;
}
var Notempty1: Empty<string>;
var Notempty2: Empty<number>; //안의 데이터 타입 자체가 다르므로 둘은 호환이 되지 않는다.

---