[TypeScript] TypeScript의 다양한 타입

타입스크립트 (TypeScript)

마이크로소프트가 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 상위 집합.
타입스크립트는 자바스크립트를 확장하여 정적 타입 검사와 고급 기능을 제공!

■  정적 타입 시스템

: 코드를 작성하는 동안 타입을 명시하거나 자동으로 추론하여, 런타임 전에 타입 관련 오류를 잡을 수 있게 함.

■  ES6+ 문법 지원 및 트랜스파일링

: 최신 ECMAScript의 문법 사용 가능, 브라우저 호환성을 위해 ES5로 트랜스파일 됨.

■  객체지향 프로그래밍 지원 강화

: 클래스, 인터페이스, 모듈 등 객체지향 개념을 자바스크립트에서 더 자연스럽게 사용할 수 있도록 도움

 

타입스크립트의 등장 배경

자바스크립트의 단점을 보완하기 위해 등장!

1. 자바스크립트의 동적 타입 문제

- 자바스크립트는 런타임에 오류를 발견하게 되는 경우가 많다.
- 대규모 프로젝트에서는 이런 오류가 디버깅을 어렵게 만들고, 코드의 안정성을 떨어뜨림.

2. 대규모 애플리케이션 개발의 복잡성 증가

- 자바스크립트가 대규모 애플리케이션에도 쓰이기 시작하면서, 더 체계적인 코드 작성과 유지 보수의 필요성을 증가시킴.

3. 최신 ECMAScript 기능 활용과 브라우저 호환성 문제

: 최신 자바스크립트 문법은 모든 브라우저에서 지원되지 않아서, 이를 트랜스파일링 하는 도구가 필요했음.

 

타입스크립트의 장점

1. 코드의 안정성과 품질 향상

- 정적 타입을 통해 런타임 오류 미리 방지
- 디버깅 시간 절약!

2. 가독성과 유지보수성 증가

- 타입 정의를 통해 코드의 의도를 명확히 알 수 있음!

3. 최신 자바스크립트 기능 지원

- ES6 이상의 최신 문법 사용 가능!
- 이전 버전(ES5)의 자바스크립트로 트랜스파일링 가능

 

타입스크립트의 단점

1. 러닝 커브 (^^)

- 익히는 데 시간이 오래 걸림...

2. 컴파일 단계 필요

- 브라우저에서 직접 실행 X. 트랜스파일링(컴파일링) 과정 필요

 

---

타입스크립트의 기본 타입

 

// string
let name: string = "John";

// number
let age: number = 25;

// boolean
let isLoggedIn: boolean = true;

// null
let emptyValue: null = null;

// undefined
let notDefined: undefined = undefined;

// any
// 가능하면 사용 지양
let anything: any = 42;
anything = "Hello";

// unknown
// any와 비슷하지만 반드시 타입 검사를 해야 하므로 더 안전함.
let unknownValue: unknown = "Hello";

if (typeof unknownValue === "string") {
  console.log(unknownValue.toUpperCase());
}

// void
// 반환값 없는 함수에 주로 사용
function logMessage(message: string): void {
  console.log(message);
}

// never
// 결코 발생하지 않는 값.
// 항상 에러를 던지거나, 끝나지 않는 함수에 사용
function throwError(message: string): never {
  throw new Error(message);
}

 

---

배열과 튜플

// Array
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b", "c"];

// Tuple
// 고정된 길이와 타입의 배열 정의
let tuple: [string, number] = ["John", 25];

 

---

객체

1. 객체 타입

// 객체 구조 정의
let user: { name: string; age: number } = { name: "Alice", age: 30 };

2. 선택적 속성

// ?을 사용하여 선택적으로 사용할 수 있는 속성 정의
let user: { name: string; age?: number } = { name: "Alice" };

 

3. 읽기 전용 속성

// readonly -> 수정할 수 없는 속성
let user: { readonly id: number; name: string } = { id: 1, name: "Bob" };
user.id = 2; // 오류 발생

 

---

유니언과 교차 타입

1. 유니언 타입 (Union)

// 여러 타입 중 하나일 수 있는 값
let id: string | number = 123; // id는 string일 수도 있고, number일 수도 있음
id = "ABC";

2. 교차 타입

// 여러 타입을 결합하여 새로운 타입을 만듦.
type Person = { name: string };
type Employee = Person & { salary: number };
let employee: Employee = { name: "John", salary: 50000 };

※ type이란?

- 타입스크립트에서 타입 별칭(Type Alias)을 정의하는 키워드
- 특정 타입에 이름을 붙여서 재사용하거나 코드 가독성을 높일 수 있음!

 

---

Enum (열거형)

이름이 있는 상수 집합.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

let move: Direction = Direction.Up;

 

---

타입 별칭 (Type Alias)

새로운 타입 이름 정의 가능.

type ID = string | number;
let userId: ID = 123;

 

---

인터페이스 (Interface)

객체의 구조를 정의하며, 클래스와도 결합 가능!

- type을 사용해서 구조를 정의할 수도 있지만, 인터페이스는 재사용이 가능하기 때문에 추천!

interface User {
  name: string;
  age: number;
  email?: string; // 선택적 속성
}

let user: User = { name: "Alice", age: 25 };

 

---

제네릭 (Generics)

타입을 매개변수화! → 재사용성 Up

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

let output = identity<string>("Hello");

 

---

유틸리티 타입

1. Partial

모든 속성을 선택적으로 만듦.

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

let partialUser: Partial<User> = { name: "Alice" };

2. Readonly

모든 속성을 읽기 전용으로 만듦.

let readonlyUser: Readonly<User> = { name: "Bob", age: 30 };
readonlyUser.age = 31; // 오류 발생

3. Pick

특정 속성만 선택하여 타입을 만듦.

let pickedUser: Pick<User, "name"> = { name: "Alice" };

4. Omit

특정 속성을 제외한 타입을 만듦.

let omittedUser: Omit<User, "age"> = { name: "Alice" };

 

---

타입 단언과 타입 가드

1. 타입 단언

특정 값의 타입을 개발자가 명시함.

let someValue: any = "Hello";
let strLength: number = (someValue as string).length; // someValue를 string으로

2. 타입 가드

조건문을 통해 특정 타입을 좁힘.

function isString(value: unknown): value is string {
  // 이 함수가 true를 반환하면 value는 string 타입임을 보장한다.
  return typeof value === "string";
}