[한 입 크기로 잘라먹는 TypeScript] CH1. 타입스크립트 개론 1(0. 타입스크립트 소개, 1. JS 단점/TS 장점)

0. 타입스크립트를 소개합니다.

🎨 타입스크립트 = 자바스크립트의 확장판

 

원래 사용하던 자바스크립트 코드에서 타입을 정의하는 문법만 추가하면 타입스크립트 코드가 된다.

 

🎨 타입스크립트 사용 이유?

• 자바스크립트는 웹 브라우저에서만 동작하도록 만들어졌으며, 아주 간단한 사용자 상호작용을 처리하도록 만들어진 언어이다.(ex. 웹사이트에서 버튼 클릭 시 경고창 띄워주기 정도의 간단한 작업)
• 따라서 자바스크립트는 굳이 엄격한 문법을 갖출 필요 없이 유연하게 설계되었다.
•  그런데 `Node.js`(자바스크립트의 런타임/실행환경)가 등장하면서 웹 브라우저에서만 실행 가능했던 자바스크립트를 어디서든 실행할 수 있게 된다. 이렇게 자바스크립트의 활용성이 늘어나고 자바스크립트를 사용하는 애플리케이션의 규모도 커지게 되었다.
• 복잡한 대규모 어플리케이션에서 자바스크립트의 너무나 유연한 문법은 프로그램의 안정성을 떨어뜨리는 단점이 되어 버렸고, 이러한 문제점을 극복하기 위해 자바스크립트의 기존 문법은 유지한 채 안정성만 추가한 새로운 언어가 필요해졌다. 이렇게 등장한 것이 바로 타입스크립트이다.

 

1. JS의 단점과 TS의 장점

🎁 모든 프로그래밍 언어에는 타입 시스템이 있다.

❓ 타입 시스템

• 언어에서 사용할 수 있는 여러가지 값들을 특정 기준으로 묶어 타입으로 정할지 결정하거나 코드의 타입 검사 시점, 검사 방법 등 우리가 프로그래밍 언어를 사용할 때 타입과 관련해서 지켜야 하는 규칙을 모아둔 체계
• 언어의 타입 관련 문법체계
• 타입 시스템은 크게 두 가지로 나뉜다: 정적 타입 시스템, 동적 타입 시스템

 

❓ 동적 타입 시스템

자바스크립트가 사용하는 동적 타입 시스템은 기본적으로 코드가 실행되는 도중에 변수의 타입을 결정한다. (👉사용자가 미리 변수에 타입을 설정하지 않아도 된다는 유연함이 장점)

또한 변수의 타입은 현재 변수 값에 따라 동적으로 계속 달라진다.

이러한 자바스크립트의 유연함은 장점과 동시에 단점을 가진다.

바뀐 변수의 타입을 명확히 인지하지 못해, 다음과 같이 실수로 숫자를 대문자로 변경해 버리는 코드를 작성하게 될 수도 있다.

이러한 상황에서 자바스크립트는 오류를 발생시킨다.

자바스크립트 코드에서는 에러가 존재하는 코드도 우선 실행은 가능하다. 따라서 에러 발생 시점도 실행 이후이다.

위의 예시의 경우 간단한 예제이므로 실행 직후 바로 에러를 확인하고 수정할 수 있지만, 매우 복잡한 프로그램에서는 다양한 코드가 얽히면서 에러가 시간차를 두고 나타날 수도 있다. 이 경우 에러를 잡아내는 일은 위의 예시에 나오는 코드 오류를 잡아내는 것보다 훨씬 힘들다.

 

이처럼 자바스크립트 코드는 에러가 있든 없든 런타임에 실행 가능하기 때문에, 추후 에러 발생 시 오류를 잡아내는 일이 매우 힘들어질 수 있다.

 

 

❓ 정적 타입 시스템

• 코드 실행 이전 모든 변수의 타입을 고정적으로 결정함
• 타입 관련 오류가 있을 시 에디터 상에서 오류를 바로 알려주고 오류가 있다면 실행이 불가능
• 단점: 모든 변수에 일일이 타입을 지정해야 하므로 코드의 양이 늘어나고 프로그래머의 피로가 가중된다.
• ex) C, Java

👉 타입스크립트: 자바스크립트 동적 타입 + 자바 정적 타입 혼합한 느낌의 타입 시스템 사용

 

 

🎨 타입스크립트와 점진적 타이핑

타입스크립트는 정적 타입 시스템처럼

변수의 타입을 코드 실행 전에 결정하고 타입 오류가 없는지 프로그램 실행 전에 코드를 검사한다.

또한 동적 타입 시스템의 장점(유연함)도 가지고 있다.

위의 사진처럼, 타입스크립트는 변수의 타입을 지정하지 않아도 변수의 초기값을 기준으로 타입추론을 진행한다.

따라서 모든 변수에 일일이 타입을 명시해 주지 않아도 된다.

 

👉 타입스크립트와 같은 타입 시스템을 점진적으로 타입을 결정한다는 뜻에서 점진적 타입 시스템(Gradual Type System)이라 부른다. (타입이 정의된 변수들에 대해서는 타입을 미리 결정, 타입이 정의되지 않은 변수들에 대해서는 타입을 자동추론)

 

 

 

---

출처

소개 - 한 입 크기로 잘라먹는 타입스크립트

 

한 입 크기로 잘라먹는 타입스크립트(TypeScript) | 이정환 Winterlood - 인프런