[TypeScript] 정리 - 1

한 2~3개월 전에 타입스크립트 관련 클론 코딩을 하고 정리해 놓은 게 있어서 github에는 정리 파일을 올려놨는데,

 

생각해 보니 블로그에도 올리면 좋을 거 같아서 올려놔야겠다고 생각했다.

 

아 그리고 TypeScript는 프론트앤드에서도 쓰고(react.js) 백앤드(nest.js)에서도 쓰는데, 

 

nest는 많이 안 해보고, react에서 ts를 많이 쓰면서 공부했기 때문에 분류는 일단은 frontEnd로 해 놔야 되겠다고 생각했다. (나중에 카테고리를 좀 고쳐야 할 듯) 완료

 

----------------------------------------------------------------------------

 

자바스크립트 -> 타입스크립트로 넘어가는 이유

타입안정성 때문
-> 코드에 버그 줄고
-> 생산성 늘고 
-> 런타임 에러 줄고

 자바스크립트는 적당한 타입값을 지정하지 않고 사용하면 에러를 뿜지 않고 NaN과 같은 값을 보내는데,
이건 에러가 아닌 실행된 결과기 때문에 개발자 입장에선 헷갈리거나 정확한 원인을 알 수 없다.

자바스크립트 에러 중에 최악의 에러는 런타임 에러
실행(컴파일)이 되기 전에 에러가 나는 게 아니고 실행이 되고 나서 에러를 리턴하기 때문에, 코드를 실행할 때까지 알 수가 없다.
보통의 이상적인 경우는 컴파일이 되기 전에 에러를 리턴해주는 게 이상적이다.(개발자가 아닌 일반 유저들도 에러를 볼 수 있다는 점이 그렇다.)

----------------------------------------------------------------------------

타입 스크립트는 자바스크립트로 변경할 뿐만 아니라, 타입스크립트가 자바스크립트로 변환하기 전에 보호를 해준다.

타입 추론
데이터와 변수의 타입을 명시적으로 정의할 수도 있고, 아니면 그냥 자바스크립트처럼 그냥 해도 된다. 왜냐하면 타입 추론을 해주기 때문.

----------------------------------------------------------------------------

타입 쓰는 방법

기본 생성자 뒤에 타입
함수 인자 뒤에 타입
함수 전체 이름 뒤에 타입 

함수(function)를 만들 때 이런 식으로 만들 수 있다.
const playerMaker = (name:string) : Player => ({name})

 

----------------------------------------------------------------------------

 

타입스크립트는 readonly 속성을 만들어 줄 수 있다.
-> 만들면 불변성의 변수가 되어 버린다.(javascript에서는 쓰이지 않음.)

Tuple
-> 특정위치에 특정타입이 있는 배열이 되어야 한다.

any 
-> 비어있는 값들의 대부분이 any가 된다. 
-> any는 typescript를 javascript처럼 되어버리기 때문에 보호장치(컴파일 전에 에러를 알려주는)것들이 사라지게 되는 것이다.
-> 프로그램이 실행된 뒤에 오류를 알려주는 방법은 좋지 않다.
-> any를 typescript에서 쓰는 건 그렇게 바람직한 방법은 아니다.
-> 쓸 때는 신중하게 사용해야 한다.

----------------------------------------------------------------------------

 

타입스크립트의 중요한 포인트는 타입체커와 소통하는 것

unknown타입
typeof를 사용해서 먼저 무슨 타입인지 확인을 해서 사용한다.
-> 변수의 타입이 뭔지 모를 때 사용한다.

void타입
보통 return 하지 않는 함수일 때 사용한다 
void는 보통 함수에 아무 타입도 안 써줬을 때 알아서 작용된다.

never타입
함수 안에 error를 발생시키는 방법으로 쓰일 때가 있다. 혹은 들어오는 인자값이 뭔지 모를 때 사용되기도 한다.

----------------------------------------------------------------------------

다형성과 오버로딩

type Add = (a:number, b:number) => number;
-> call signature라고 한다.

type Add = {
    (a:number, b:number) : number;
}
이런 식으로도 변경할 수 있다.

----------------------------------------------------------------------------