클래스

implements, abstract, private, protect, public 등 을 사용할 수 있습니다.

implements 는 interface를 상속받아 구현할 때 사용합니다.

abstract는 interface처럼 추상화를 시킬 수 있습니다. 추상 메서드, 추상 클래스

private는 자바스크립트의 #과 비슷하지안 조금 다릅니다. private 사용을 추천한다.
protected 와 구분할 수 있고 실제 코드에선 public로 바뀌지만 실제코드에서 프라이빗 변수에 접근하려하면 애초에 타스 단계에서 에러가 나기때문에 그냥 쓴다.

protect 는 부모에게 상속받은 곳 에서는 접근이 가능합니다.

public는 생략!

옵셔널, 제네릭 기본

옵셔널 연산자( ? )

옵셔널 연산자를 사용하게되면 이 매개 변수는 있을수도 있고 없을수도 있다 라는 뜻입니다.

const person = (name: string, age?: number) => {} //
// 둘 다 가능
person('bigOne', 10);
person('bigOne');

제네릭

제네릭은 아직 타입은 모르겠고 실행하면서 지정될거야! 라는 것과 같습니다. 제네릭 사용 이유부터 알아보겠습니다. 아래와 같은 예가 있다고 가정하겠습니다. 원하는 타입은 number + number | string + string 입니다.

const add = (x: string | number , y: string | number) => x + y;  // error 발생
// 아래와 같은 경우의 수가 존재하기 때문입니다.
add(3, '5'); 
add('5', 5);
// TS는 string + number ? 이게 무슨소리야!! 하면서 오류를 발생시킵니다.

제네릭을 사용하게되면 위와 같은 상황을 쉽게 해결할 수 있습니다. T 는 가장 일반적으로 사용하는것으로 정해진 것은 없습니다. 대신 <> 을 사용합니다.

const add = <T>(x: T, y: T): T => x + y;
funtion add2<T> (x: T, y: T): T { return x + y; }

일단 x, y가 뭔지는 모르겠지만 T타입이다! 하고 실행할때 만약 x가 number 타입이라면 y타입, 리턴타입 전부 x와 같은 T로 되어있기때문에 다같이 number타입이 되어야합니다.

제네릭 제한 (extends)

extends 는 확장이라는 뜻으로 사용되어 클래스에서는 상속할때 사용되어지는데 타입스크립트 제네릭 타입에 extends를 사용하면 타입에 제한이 생깁니다.

const add = <T extends string>(x: T, y: T) => x + y;
add('hello', 'world'); // ok
add('hello', 3) // error

// 콜백함수의 경우
const power = <T extends (onOffYn: boolean) => boolean> (info: T) => { return info; }
function power<T extends (onOffYn: boolean) => boolean> (info: T) { return info; }

const computerYn = (param: boolean) => !param;
power(computerYn);

// <T extends {...}>
// <T extends any[]>
// <T extends (...args: any) => any> 함수 모양이다! 콜백함수의 형태를 이런식으로 제한을 시켜놓는다.
// <T extends abstract new (...args: any) => any>
//위의 경우들처럼 사용할 수 있습니다.

기본값 타이핑

기본값 타이핑 할 때 헷갈리는 경우가 있습니다. 그리고 리액트 사용할 때 jsx때문에 <>제네릭 사용 오류날 때가 있습니다. 이때 기본값으로 unknown 붙여주면 됩니다.
에러 처리할 때 타입가드(if) 사용하는게 좋고 웬만하면 클래스 사용하는 것이 좋습니다.

const article = (info: {title: string, author: string} = { title: 'typescript', author: 'bigOne'}) => {}

const b = <T = unknown>(x: T, y: T) => ({ x: y });
b(3,7);
const bb = <T extends unknown>(x: T, y: T) => ({ x: y });
bb(3,7);
const bbb = <T,>(x: T, y: T) => ({ x: y });

왜 잘 돌아가는 자바스크립트 코드여야하냐 이거는 만약 타입을 지정을 interface로 해서 뭔가 이용할 때 에러남 왜? 어차피 타입스크립트는 사라지는데 안되지 .. 예를들어 아래와 같은 코드!

interface Axios{
	get(): void;
}

interface CustomError extends Error{
	response?: {
		data: any;
	}
}
// 인터페이스는 타입가드에서 쓸 수 없어서 class로 써야한다
class CustomError extends Error{
	response?: {
		data: any;
	}
}

declare const axios: Axios;

async() => {
	try{
		await axios.get();
	}catch(err){ // error은 unknown타입인데 이런  언노운 타입일때는 타입가드 쓰는게 좋다.
		if(err instanceof CustomError){  //이거 오류난다 이유는?  interface인  CustomError은 js에서 사라지니까 ..
			console.error(err.response?.data);
		}
	}
}