[React] TypeScript란?

개요

첫 프로젝트 생성하고, 다음 챕터를 보는데 TypeScript라는 것을 사용해야 한다고 한다. 이건 뭘까? 알아보자

 

1. TypeScript란?

Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript에 정적 타입을 추가한 슈퍼셋(Superset)이다.

 

*슈퍼셋(Superset)

-> 언어가 다른 언어를 포함하면서도 더 많은 기능을 제공하는 경우를 의미한다(?)

 

즉, 이해해보면 TypeScript는 JavaScript의 슈퍼셋이기 때문에, JavaScript로 작성된 코드를 그대로 사용할 수 있다(= 포함)

즉, 기존 JavaScript 코드에 추가적인 타입 기능을 제공하며, JavaScript의 기능을 그대로 유지한다.

== TypeScript는 JavaScript의 확장판!! DLC 느낌?

 

JavaScript의 문제점

JavaScript는 동적 타입(dynamic typing) 언어로, 변수의 타입이 런타임 중에 결정되는데 유연성을 제공하는 반면 문제가 발생할 수 있다.

 

즉, 런타임 오류 증가

->  타입이 런타임에서만 검사되기 때문에 개발 중에 오류를 발견하기가 어렵다!

 

그래서 TypeScript라는 정적 타입을 통해 컴파일 시에 오류를 검출할 수 있도록 하는 것이다.

 

// 기존 JavaScript 코드
function add(a, b) {
  return a + b;
}


add(10,20) // 30
add('10', '20') // '1020

 

위 코드 상에서는 어떤 타입의 인수를 전달하고 반환하는지가 명확하지 않다. 그렇기에 파라미터 타입을 다르게 지정해주면 다른 값이 나오게 되는데, 뭔가 불안정해보인다.

 

하지만, TypeScript를 사용하면

// TypeScript 코드 
function add(a: number, b: number): number {
  return a + b;
}

add('10','20') // error

 

지정한 타입 이외의 것에 대해서는 컴파일 오류가 발생하고, 런타임시에 발생할 수 있는 오류를 해결할 수 있다!

 

2. TypeScript의 주요 특징

1) 정적 타입 

-> 변수, 함수, 객체 등에 타입을 명시적으로 선언해 타입 오류를 사전에 방지할 수 있다.

 

2) 인터페이스

-> 객체의 구조를 정의하고 강제할 수 있어 유지보수에 용이하다.

interface Person{
    name: string,
    age: number
}

const user: Person = {
    name: "John",
    age: 25
};

 

3) 제네릭

다양한 타입을 유연하게 사용할 수 있도록 한다.

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

console.log(identity<number>(10)); // 10
console.log(identity<string>("Hello")); // "Hello"

 

4) 최신 JavaScript 문법 지원

 

 

 

TypeScript도 학습할게 많다고 하는데 조금씩 정리해나가야지