[TS] Typescript와 차세대 자바스크립트

본 포스팅은 Maximilian Schwarzmüller 님의 강의를 바탕으로 작성되었습니다.

 

let과 var의 차이점

var를 사용하면 자바스크립트는 함수의 유효 범위 및 전역 유효 범위 이외의 다른 유효 범위를 알지 못하는데 let을 사용하면 다르다. let과 const는 '유효 범위'라는 새로운 개념이 도입되어있다. 즉, 변수나 상수가 정의된 블록이나 하위 블록에서만 항상 유효하다는 것이다. 그러나 var는 마치 전역 변수처럼 유효 범위가 없이 작동한다는 것이 문제다.

 

 

arrow 함수

'function' 대신 '=>' 를 사용하여 함수를 만들 수 있다. 또한, 표현식이 하나일 경우 return과 중괄호를 제거할 수 있다.

함수의 인자가 하나일 경우에 다음과 같이 작성할 수도 있다.

const printOutput: (a:string|number) => void = output => console.log(output);

만약, 익명함수의 매개변수가 없다면 꼭! () => {...} 와 같이 함수를 작성해야한다.

 

event는 타입 명시를 안해도 된다?

타입스크립트는 우리가 듣고있는 이벤트 기반으로 올바른 event객체를 추론할 수 있다.

 

... (스프레드 연산자)

우리가 배열의 각각의 모든 요소를 작업하고 싶을 때 ... 을 사용하면 된다.

예를 들어서, 한 배열의 값을 다른 배열로 push하고 싶을 때, 모던 자바스크립트는 다음과 같은 표현식을 작성할 수 있다.

그러면 객체를 복사하기 위해서는 어떻게 해야할까?

만약 다음과 같이 복사한다면?

이 작업은 메모리에 있는 person 객체에 해당하는 포인터를 copiedPerson  상수로 복사하는 것이다.

참고 링크 : 링크

Reference vs Primitive Values

실제로 객체의 복사본을 만드는 게 아니다. 실제 복사본을 만들려면 스프레드 연산자와 함께 사용해야한다.

const copiedPerson = { ...person };

 

또한 함수의 인자의 개수를 무한정으로 받기 위해 인자에 활용할 수 있다.

함수 add의 인자로 다음과 같이 작성가능하다

 

배열 및 객체의 비구조화 할당

hobbies라는 이름의 배열을 각각의 인덱스 단위로 비구조화 하여 할당할 수 있다. 왜냐하면 배열은 '순서'가 있는 자료형이기 때문이다.

person이라는 객체는 순서가 아닌 '키'값이 있기 때문에 해당 키 값을 꺼내올 수 있다. 표현식을 보면 마치 타입 명시처럼 userName을 명시했는데, 해당 표현은 타입을 명시한 것이 아니라 이름을 덮어 씌운것이다. 즉 firstName이라는 변수는 없으며, userName은 존재하고, age도 존재하게 된다.

 

마지막으로 주의할 점

타입스크립트는 타입스크립트에서 일반 자바스크립트에 이르기까지 코드를 컴파일할 뿐만 아니라 최신 자바스크립트에서 이전 자바스크립트까지도 작업 수행을 지시하면 컴파일을 수행한다. (구버전의 자바스크립트로 컴파일 가능하며, 해당 버전에 없는 기능을 구현하기위해서 코드가 복잡하고 더 길게 컴파일 될 수 있다.)