TypeScript 핵심: 심플 타입으로 시작하는 타입스크립트의 세계

TypeScript를 이해하기 위한 기본 개념

TypeScript는 자바스크립트의 상위 집합으로, 더 많은 타입 표현이 가능하여 보다 안전한 코드를 작성하도록 돕습니다. 타입스크립트를 제대로 활용하려면 기본적인 개념 정립이 중요합니다.

TypeScript와 JavaScript의 차이

JavaScript는 '값'에 집중된 언어로 타입 선언이 필요 없습니다. 반면, TypeScript는 '타입'에 초점을 맞춘 언어로, 변수와 함수에 타입을 명시해야만 합니다. 다음은 변수와 함수에 타입을 지정하는 방법입니다.

const example1: number = 1;
const example2: string = '2';
const example3: (...param: any[]) => any = () => {};

위 코드에서 보듯이, :를 사용하여 타입을 명시합니다. 이와 같은 타입 명시는 TypeScript의 표현력을 한층 높입니다.

기본 타입과 any

TypeScript의 기본 타입은 string, number, boolean입니다. 이를 기반으로 강력한 타입 시스템을 구축할 수 있으며, 타입을 명시하지 않을 경우 자동으로 any 타입이 할당됩니다. 이는 타입스크립트가 초보자들에게 더 쉽게 접근할 수 있도록 하는 한 요인입니다.

리터럴(Literal) 타입

TypeScript는 리터럴 타입을 제공하여 보다 명확한 타입 정의를 지원합니다. 'hello world'와 같은 문자열 리터럴 타입은 해당 문자열로만 제한되며, 다른 문자열은 허용되지 않습니다.

type Example = 'helloWorld';
const e: Example = 'helloWorld'; // 'helloWorld' 외의 값은 오류 발생

이러한 리터럴 타입은 TypeScript의 뛰어난 표현력을 보여줍니다.

유니언(Union)과 인터섹션(Intersection) 타입

유니언 타입은 여러 타입 중 하나를 의미하며 | 기호로 표현합니다. 예를 들어, number | string은 숫자 또는 문자열이 올 수 있음을 나타냅니다.

type Example = number | string;
const e1: Example = 1;
const e2: Example = '1';

반면, 인터섹션 타입은 여러 타입을 모두 만족해야 하며 & 기호로 표현합니다. 아래 코드는 두 타입의 교집합을 예시로 들고 있습니다.

type Element1 = 1 | 2 | 3;
type Element2 = 2;
type Example = Element1 & Element2;

const e1: Example = 2;

인터페이스와 인터섹션

인터페이스에서도 인터섹션 타입을 사용할 수 있습니다. 여러 인터페이스를 결합하여 새로운 타입을 만들 수 있습니다.

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

interface Address {
  address: string;
}

type PersonWithAddress = Person & Address; // { name: string; age: number; address: string }

널 가능성과 never 타입

TypeScript에서는 undefined와 null을 각각의 타입으로 구분하며, never 타입은 로직상 절대 실행되지 않는 타입을 표현합니다. 이는 함수가 값을 절대 반환하지 않음을 알릴 때 유용합니다.

널 가능성 검사

tsconfig.json 파일에서 strictNullChecks 옵션을 활성화하면 널 가능성을 더욱 엄격하게 관리할 수 있습니다.

// tsconfig.json
"strictNullChecks": true

never 타입의 조건부 타입

never 타입은 아무런 값을 포함하지 않고, 조건부 타입에서는 항상 false인 조건으로 처리됩니다. 이러한 성질을 활용해 보다 안전한 코드를 작성할 수 있습니다.

TypeScript로의 여정

TypeScript의 타입 시스템은 복잡하지만 이해하고 나면 강력한 툴로 작용합니다. 코드의 가독성과 안전성을 높이기 위해 TypeScript를 더 깊이 탐구해보세요. 아래의 링크들에서 더 많은 정보를 얻을 수 있습니다.

• TypeScript 공식 문서
• TypeScript Playground