(SEB_FE) Section4 Unit5 TypeScript란? / 등장 배경

PYM·2023년 5월 29일
0

(SEB_FE) SECTION4

목록 보기
11/24
post-thumbnail

💚TypeScript(타입스크립트)란?

마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어

JavaScript에 정적타입 검사클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장했다.

💚TypeScript의 등장 배경

TypeScript는 JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장했다고 했는데, JS는 발전과정에서 어떤 한계를 겪었던 걸까?

JavaScript는 처음에는 브라우저에서만 동작하는 스크립팅 언어로 만들어졌었다. 하지만, JavaScript로 웹 애플리케이션의 상호작용이 증가하면서, 웹 애플리케이션이 필요로 하는 JavaScript 코드의 양이 폭발적으로 늘어나게 되었다.

이에 자바스크립트가 동적 타입이 결정되어 유연하고, 다양한 라이브러리와 프레임워크를 사용할 수 있는 장점이 있지만, 타입의 명시성이 부족하다는 단점도 존재한다는 한계점이 드러났다.

타입의 명시성이 부족하게 되면 어떤 점이 곤란할까?
아래 예시를 통해 살펴보자.

let add = (x, y) => {
	return x + y;
}

add(5, "7");

위의 코드는 add 함수에 숫자 5와 문자열 "7"을 전달인자로 전달하여 덧셈을 수행하고 있다. 이렇게 되면 결과는 "57"이 나와버리게 된다.
(JavaScript는 문자열과 숫자를 더할 경우, 숫자 타입의 인수 쪽을 강제적으로 타입 변환해 문자열을 만들기 때문!)

이렇게 JavaScript는 함수나 변수의 타입을 명시적으로 지정하지 않아도 동작하는 경우가 많아 예상치 못한 결과를 초래하게 된다. 이런 문제점을 보완하기 위해 TypeScript라는 언어가 등장하게 된 것!

💚TypeScript를 사용했을 시 장점

  • TypeScript는 정적타입 검사 기능 을 제공하며, 코드의 가독성과 유지 보수성을 높여준다. 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있게 된다.

  • 또한 TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며, 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와준다.

아래는 인터페이스(Interface)를 사용하여 코드의 가독성을 높인 예시이다.

interface User {
  id: number;
  name: string;
}

function greetingUser(user: User) {
	 console.log(`Hello, ${user.name}!`)
}

const parkUser = {
	id: 1,
  name: "박해커"
};

greetingUser(parkUser);

위의 코드는 User 인터페이스를 정의해 User의 정보를 좀 더 쉽게 파악할 수 있다.
그리고 greetingUser 함수에도 매개변수로 User 타입을 사용해 이 함수가 어떤 타입의 인자를 받고 있는지 명확히 표현하고 있다.

즉, 타입을 명시함으로써 코드의 의도 또한 명확해지기 때문에 다른 개발자가 코드를 이해하고 수정하기 쉬워지며, 런타임 에러를 미리 방지할 수 있기 때문에 유지보수성 또한 높아진다.

profile
목표는 "함께 일하고 싶은, 함께 일해서 좋은" Front-end 개발자

0개의 댓글