타입스크립트(Typescript)란? - 특징, 장점, 자바스크립트와 차이점, 코드예시

 

 

타입스크립트(TypeScript)란?

타입스크립트는 프로그래밍 언어 중 하나로, 자바스크립트를 확장한 언어입니다. 현재 많은 회사들과 개발과정에서 타입스크립트를 사용하고 있는데요. 타입스크립트의 특징이 무엇인지 그리고 왜 많이 사용하고 있는지 그 이유를 알아보겠습니다. 

 

타입스크립트의 특징

1. 자바스크립트와 높은 호환성

타입스크립트는 자바스크립트를 확장한 언어라고 말씀드렸는데요. 그래서 자바스크립트의 모든 기능을 그대로 사용할 수 있다는 점과 기존에 사용하던 자바스크립트 코드도 타입스크립트에서 그대로 사용할 수 있다는 특징이 있습니다.

 

2. 자바스크립트로 컴파일하는 과정필요

타입스크립트의 코드는 .ts 파일로 만들어집니다. 이렇게 만들어진 타입스크립트 코드를 브라우저에서 실행하기 위해서는 자바스크립트로 변환해주는 과정이 필요합니다. 이 때 타입스크립트 컴파일러(TypeScript Compiler)가 필요합니다. 

 

3. 데이터 타입 지정

타입스크립트와 자바스크립트의 가장 큰 차이점은 데이터의 타입을 지정한다는 것입니다. 타입스크립트는 코드를 작성할 때 데이터의 타입을 명시하는데요. 이렇게 타입을 명시하면 좋은 점이 무엇일까요? 바로 코드 작성 중에 발생할 수 있는 오류를 미리 방지할 수 있습니다. 그래서 이름이 타입스크립트인 것이죠..! 말로만 들으면 헷갈릴 수 있으니 예시를 들어 보겠습니다.

 

 

 

 

---

 

* 자바스크립트에서 발생가능한 오류

// javascript 코드(.js)

function add(a, b) {
  return a + b;
}

console.log(add(10, "5")); // 출력: '105'

 

위 코드는 자바스크립트로 작성한 코드입니다. a와 b의 값을 더하는 함수인데요. 여기에서 a로 주어진 10은 숫자, b로 주어진 "5"는 문자열입니다. (자바스크립트나 타입스크립트에서 문자열은 보통 큰 따옴표("), 작은 따옴표('), 백틱(`)으로 감싸서 표현합니다)

 

위와 같은 상황에서는 숫자 10과 문자5를 더하게 된 상황인데요. 숫자와 문자를 더한다는 것이 말이 될까요? 말이 되지 않습니다. 그럼 에러가 떠야 하는데 자바스크립트에서는 "105"라는 문자를 출력해버립니다. 이처럼 자바스크립트는 타입을 명시하지 않기 때문에 숫자와 문자를 더하라는 이상한 명령을 해도 오류가 발생하지 않고 이상한 결과가 나올 수 있습니다.

 

 

* 타입스크립트에서의 오류방지

 

그럼 위의 상황을 타입스크립트를 활용하여 타입을 명시해서 작성해보겠습니다.

// Typescript 코드(.ts)

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(10, "5")); // 컴파일 에러: '"5"'는 'number' 타입에 할당할 수 없습니다.

 

자바스크립트와 똑같이 a와 b를 변수로 받아서 a+b를 더해주는 함수를 만들어줍니다. 그런데 여기서 조금 다른 점이 있죠. a는 number, b도 number, 출력되는 값도 number라고 타입을 지정해줍니다. 이렇게 미리 타입을 정해주면 주어지는 b의 값이 "5"로 문자열일 때 a와 b를 더한 값을 숫자로 출력할 수 없어 에러가 뜨게 됩니다. 그럼 코드를 작성하는 입장에서 무엇이 문제인지 바로 알고 수정할 수 있어 나중에 코드가 꼬여버리는 상황을 막을 수 있게 됩니다.

 

이처럼 타입스크립트를 활용하게 되면 개발자들이 오류를 쉽게 찾을 수 있고 안정적으로 개발할 수 있기 때문에 현재 많은 회사나 개발과정에서 타입스크립트를 사용하고 있습니다.