[내배캠] TypeScript의 등장 배경

자바스크립트의 태동

자바스크립트는 정적인 웹 페이지에 동적인 효과를 주기 위해 탄생한 스크립트 언어이다.

자바스크립트 성능 향상에 대한 니즈 -> 구글 V8 엔진 등장 (크롬 내장) -> V8 엔진 기반 Node.js 등장하여 자바스크립트로 백엔드까지 작성할 수 있게 됨 -> 그러나 자바스크립트는 '동적 언어 타입'이어서 한계가 있었음.

 

동적 언어 타입에서 생기는 문제점

프론트엔드 단의 에러는 화면의 일관성을 깨지게 할 순 있어도 큰 피해는 없다.

다만 백엔드에서의 오류는 서버의 다운으로 이어지게 된다.

 

자바스크립트의 약점

• 자바스크립트는 변수의 타입이 실행하는 타이밍에 결정됨.
• 개발자의 휴먼 에러로 인한 에러가 잦음.
• 그렇게 에러가 발생해도 찾기가 까다로움.
• 변수에 잘못된 타입의 값이 할당되어 발생한 오류는 실행 시간 당시의 변수의 값과 타입을 모두 확인하며 디버깅 해야 함.

let a = 1
a = 'Hello';

자바스크립트는 위와 같이 변수를 처음에는 숫자로 초기화했다가 추후 문자열로 바꾸어도 전혀 문제가 되지 않음.

유연성이 있어 자유도가 높다고 볼 수 있지만 프로젝트의 규모가 커질 수록 십중팔구 개발자의 휴먼 에러가 발생하고, 또 한 번 발생하면 찾기가 힘듦.

타입스크립트의 등장

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어.

JavaScript의 단점 때문에 이를 보완하며 등장한 언어임.

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

const a = 1;
const b = "2";
const result = add(a + b);
console.log(result); // "12"
console.log(typeof result); // "string"

위 코드를 보면 숫자 1과 문자열 2를 더했는데, 이게 더해지는 것도 이상하고, 또 더한 것의 타입이 문자열로 나오면서, 개발자는 숫자를 의도했을 경우 어디서부터 문제가 되는지 찾기가 어려워짐.

타입스크립트의 장점

1. 코드를 안전하게 작성할 수 있다.

타입스크립트는 변수나 함수의 타입을 명시해줄 수 있어서 실수로 잘못된 데이터 타입을 입력했을 때 오류를 발생시켜줘 개발자가 실수를 하지 않을 수 있다.

// js
let age = 15;
age = "열다섯";

// ts
let age: number = 15;
age = "열다섯" // 에러 발생
// ts에서는 숫자 타입에 문자를 재할당 할 수 없음.

1. 자동완성과 코드 힌트 기능을 제공한다.

// js
let message = 'hello';
console.log(message.toUppercase());

// ts
let message: string = 'hello';
console.log(message.toUppercase());

같은 메서드를 사용했지만 자바스크립트는 변수 타입이 어떤 게 올 지 모르니 사용 가능한 메서드가 너무 많아 자동완성 기능이 의미가 없을 때가 많다. 어차피 다시 찾아봐야 하는 때가 많지만 타입스크립트는 변수의 타입을 한정했기 때문에 적절한 메서드를 코드 힌트로 잘 띄워주어 개발 속도가 빨라지게 도와준다.

1. 코드 구조가 명확해지고 유지보수가 쉬워진다.

// js
function createUser(name, age) {
  return { name: name, age: age };
}
let user = createUser("Alice", 15);

// ts
interface User {
  name: string;
  age: number;
}

function createUser(name: string, age: number): User {
  return { name: name, age: age };
}

let user: User = createUser("Alice", 15);

위 아래는 같은 코드이다. JS가 더 간결해보일 순 있지만 저 코드만 보고는 name, age 프로퍼티에 어떤 타입이 오는지 명확하지 않기 때문에 이름만으로 유추해야 한다.

하지만 타입스크립트는 interface를 통해 명확히 명시해줄 수 있기 때문에 코드 가독성이 좋아진다.