[TS] Typescript를 왜 쓸까?

❓ TypeScript ❓

JavaScript의 모든 기능을 포함하면서도 정적 타입 시스템과 다양한 기능을 추가 제공하는 프로그래밍 언어이다.

 

즉, JavaScript의 단점을 보완하여 만들어진 언어로, 엄격한 문법을 지원한다.

 

 

📌 TypeScript의 특징 📌

정적 타입(Type System)

TypeScript는 변수나 함수의 매개변수, 반환 값에 타입을 명시할 수 있다.

 

JavaScript와 다르게 타입을 지정함으로써, 개발 중 타입 오류를 미리 확인할 수 있다는 장점이 있다.

let message: string = "TypeScript";
message = 36;

 

위와 같은 코드에서는 오류가 발생하는데, 그 이유는 'string'으로 설정된 message에 'number' 타입인 36을 할당하려고 하여 오류가 발생하는 것이다.

 

이렇게 JavaScript와 달리 타입을 명시함으로써 타입 오류를 방지할 수 있다. JavaScript에서는 let, const, var를 사용하지만 타입을 명시하지 않기 때문에 이런 오류가 쉽게 발생할 수 있다. TypeScript는 이러한 단점을 보완해준다.

 

컴파일

TypeScript 코드는 브라우저나 Node.js 환경에서 직접 실행될 수 없어, JavaScript로 변환 후 컴파일해야 한다.

 

tsc라는 TypeScript 컴파일러를 통해서 TypeScript 코드를 JavaScript로 변환한 후 컴파일을 진행한다.

 

ES6+ 문법 지원

TypeScript는 최신 ES6+ 문법을 지원하며, 구현 브라우저 호환성을 위해 ES5나 ES3로 변환이 가능하다.

 

인터페이스 및 제네릭

TypeScript는 객체의 구조를 정의하는 인터페이스와 제네릭을 제공한다.

 

1️⃣ 인터페이스(interface) ]
: 객체의 타입을 정의하는 데 사용한다. 객체가 어떤 속성을 가지고 있어야 하는지, 그 속성의 타입이 무엇인지를 명시한다.

• 구조적 타이핑: 인터페이스는 특정 타입을 선언하지 않고도 객체가 특정 구조를 가지고 있다면 그 타입을 만족하는 것으로 간주한다.
• 선택적 속성: 인터페이스에서 일부 속성은 '?'를 사용하여 선택적인 속성을 정의할 수 있다.

interface Car {
  brand: string;
  model: string;
  year?: number; // 선택적 속성
}

const myCar: Car = { brand: "Toyota", model: "Corolla" }; // year는 없어도 됨

 

• 읽기 전용 속성: 인터페이스에서는 특정 속성을 읽기 전용으로 설정할 수 있다. 이는 한번 설정되면 변경할 수 없다.

interface Point {
  readonly x: number;
  readonly y: number;
}

const p1: Point = { x: 10, y: 20 };
p1.x = 5; // 오류: 'x'는 읽기 전용

 

2️⃣ 제네릭(generics)

: 함수나 클래스, 인터페이스에서 사용하는 데이터의 타입을 미리 지정하지 않고 나중에 사용할 때 결정할 수 있도록 하는 기능이다.

 

즉, 타입을 매개변수처럼 사용할 수 있게 해주는 기능이다.

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("Hello"); // T는 string으로 사용
let output2 = identity<number>(100);     // T는 number로 사용

• identity 함수는 입력 값의 타입과 동일한 타입의 값을 반환하는 함수이다.
• <T>는 제네릭 타입 매개변수로, 함수 호출 시 이 T의 구체적인 타입을 결정한다.
  • 이렇게 하면 identity 함수는 모든 타입을 받을 수 있게 된다.

 

이를 통해서 타입 안정성과 재사용성을 높일 수 있고, 유지보수성도 크게 향상 가능하다.

 

위는 인터페이스와 제네릭의 개념 이해를 돕기 위해 참고 사항으로 넣어둔 코드이고, TypeScript에서 가장 많이 보게 될 구조로 TypeScript를 조금 더 이해해 보도록 하자.

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

function join(user: User): string {
  return `Join: ${user.name}`;
}

const user: User = { name: "Minji", age: 22 };
console.log(join(user)); // 'Join: Minji' 출력

 

위 코드를 뜯어보자면 다음과 같다.

1️⃣ interface User

• User는 TypeScript에서 인터페이스로 정의된 타입이다.
  • 인터페이스는 객체가 가져야 하는 구조를 정의하는 역할을 한다.
• User 인터페이스는 두 가지 속성을 가지는 객체를 정의한다.
  • name: 문자열 타입(string)
  • age: 숫자 타입(number)

이 인터페이스를 기반으로 만들어진 객체는 반드시 name과 age 두 속성을 모두 포함해야 하며, 그 타입에 맞는 값을 가져야 한다.

 

2️⃣ join 함수

• join 함수는 user라는 매개변수를 받으며, 이 매개변수는 반드시 User 인터페이스의 구조를 따르는 객체여야 한다.
  • 즉, user 객체는 반드시 name과 age 속성을 가져야 하고, 각각 string과 number 타입이어야 한다.
• 함수는 string 타입의 값을 반환한다.
  • 반환되는 값은 user.name을 사용하여 만들어진 문자열이다.

 

🤔 TypeScript를 사용하는 이유 🤔

1️⃣ 타입 안정성

JavaScript는 동적 타이핑 언어로 런타임에 많은 오류가 발생할 수 있다.

TypeScript는 타입을 지정하여 사용하기에, 코드를 작성 중에 타입 오류를 발견할 수 있어서 더욱 안정적이다.

예를 들어, null이나 undefined 오류를 방지할 수 있고, 잘못된 타입의 데이터를 함수에 전달하는 문제를 줄일 수 있다.

 

2️⃣ 대규모 프로젝트에 적합

TypeScript의 타입 정의 덕분에 코드의 구조와 동작을 쉽게 파악할 수 있다.

또한, 코드 자동 완성이나 리팩토링 시 실수를 줄일 수 있다.

 

그렇기에, 대규모 프로젝트를 진행할 때 협업을 더 쉽게 만든다.

 

3️⃣ IDE 지원 강화

TypeScript는 대부분의 현대 IDE(vscode, WebStorm 등)에서 강력한 코드 자동 완성, 인텔리센스, 타입 오류 탐지 기능을 제공하기에, 개발 생산성을 크게 향상시킨다.

 

4️⃣ 점진적 전환 가능

TypeScript는 JavaScript 파일도 그대로 사용할 수 있고, 점진적으로 TypeScript로 마이그레이션이 가능하다.

즉, 기존 JavaScript 프로젝트에서 전체를 한꺼번에 변경할 필요 없이, 필요에 따라 파일 단위로 TypeScript 도입이 가능하다.

 

5️⃣ 최신 ECMAScript 기능 지원

TypeScript는 최신 ECMAScript(ES6+) 기능을 지원하면서 구형 브라우저나 Node.js 버전과 호환되도록 코드를 트랜스파일할 수 있다.

 

🔥 TypeScript vs JavaScript 🔥

	TypeScript	JavaScript
타입 시스템	정적 타입 시스템 제공 (타입 명시 가능)	동적 타입 시스템 (타입 명시 불가능)
런타임 오류	컴파일 타임에 오류를 잡을 수 있음	런타입에만 오류 확인 가능
개발 생산성	코드 자동 완성, 리팩토링 지원, 타입 안정성 제공	타입 안정성 부족, 코드 자동 완성 지원 제한적
컴파일	JavaScript로 컴파일 필요	별도의 컴파일 과정 필요 없음
최신 기능 지원	최신 ECMAScript 기능 미리 사용 가능	브라우저나 Node.js의 지원에 의존
확장성	대규모 프로젝트에 적합, 구조적 코드 작성 가능	작은 프로젝트에서 빠른 개발에 적함

 

🤔 그럼 어떨 때 TypeScript를 도입해야 할까? 🤔

• 대규모 애플리케이션 개발: 많은 코드와 개발자가 협업해야하는 경우, 코드의 유지보수성과 확장성을 높여준다.
• 오류 방지: 런타임 오류로 인해 발생할 수 있는 문제를 사전에 방지하고자 할 때 사용하기 좋다.
• 리팩토링 빈도: 프로젝트의 기능이 자주 변경되거나 확장될 때, 코드 리팩토링을 더욱 안전하게 만들어 준다.

 

🚫 TypeScript 사용의 단점 🚫

• 초기 학습: JavaScript에 비해 더 복잡한 개념을 익혀야 한다.
• 컴파일 필요: TypeScript를 JavaScript로 변환하는 추가적인 빌드 도구나 설정이 필요하다.