[TS] 타입스크립트 쓰는 이유?

타입스크립트는 뭐고 타입스크립트는 왜 쓰는 걸까?

자바스크립트도 충분히 어렵고 복잡한데... 흑흑

하지만 이겨내고 공부해 봅시다. (나 자신 파이팅)

---

❓ 타입스크립트

타입스크립트는 단순히 자바스크립트에 타입을 부여한 언어이다.

우리가 자바스크립트를 공부하면서 접했던 그 타입! (string, number, boolean ...)

물론 추가적으로 다양한 타입이 존재한다.

 

❓ 왜 쓸까?

우선 자바스크립트는 동적 언어이다.

동적언어는 쉽게 말해서 런타임 즉, 프로그램이 실행되어 동작하는 시점에서 변수의 타입이 결정되는 언어이다.

let name = "짱구"; // 실행하면 문자열로 자동 인식

이처럼 실행 시점에 변수의 타입이 자동으로 결정되기 때문에 코드 작성 중에는 오류를 미리 발견하기 어렵다.

그래서 의도하지 않은 동작을 유발할 수 있다.

 

반면 타입스크립트는 정적 언어이다.

컴파일(우리가 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정) 시점에 변수의 타입이 결정되며, 타입을 명확하게 지정해주어야 한다.

int a = 5; // a는 정수형 변수로 지정됨

이렇게 변수의 타입을 명시함으로써 오류를 미리 발견할 수 있다.

즉, 코드가 실행되기 전에 타입과 관련된 문제를 사전에 방지할 수 있다.

 

또한, 타입을 지정하면 해당 타입에 사용할 수 있는 메서드나 프로퍼티를 자동으로 보여주는 자동 완성 기능을 활용할 수 있다. 예를 들어 배열이나 객체에서 점(.)을 입력하면 그 안에 있는 메서드나 속성들을 자동으로 추천해 주어 실수를 줄일 수 있다.

 

❗ 자바스크립트와 타입스크립트의 차이

1. 자바스크립트 예시

function add(num1, num2) {
	console.log(num1 + num2);
}

add() // NaN
add(1) // NaN
add(1, 2) // 3
add('Hello', 'World') // "HelloWorld"

이 함수는 두 숫자를 더하는 기능을 의도하고 있다고 가정하자.

하지만 매개변수에 어떤 타입이 들어가도 문제없이 실행된다.

이처럼 자바스크립트에서는 숫자를 전달하지 않아도 에러 없이 실행되거나, 의도치 않은 결과(예: NaN, 문자열)가 반환될 수 있다.

 

2. 타입스크립트 예시

function add(num1: number, num2: number) {
	console.log(num1 + num2);
}

add() // error
add(1) // error
add(1, 2) // 3
add('Hello', 'World') // error

우선, 타입을 지정해주지 않으면 바로 에러가 뜬다. 

타입을 지정하는 방법은 콜론 뒤에 타입의 종류를 적어주면 된다.

여기서는 매개변수에 타입을 명시해 주었다.

타입스크립트에서는 매개변수의 타입이 다르거나 부족할 때, 에러가 즉시 발생하여 잘못된 동작을 방지할 수 있다.

 

이처럼 TS 를 사용하면 코드 작성 시 타입 오류를 미리 발견할 수 있고, 의도하지 않은 동작을 방지할 수 있다.

 

---

💡 정리

1. 타입스크립트는 자바스크립트에 타입을 부여한 언어이다.

2. 자바스크립트는 동적 언어로 실행 시점에 타입이 결정된다.

3. 타입스크립트는 컴파일 시점에 타입을 결정하여 오류를 사전에 방지한다.

4. 타입스크립트는 자동 완성 기능을 제공하여 코드 작성 시 유용하다.