Frontend 개발/Typescript

TypeScript 타입 기초 문법 정리

경환 2025. 3. 7. 21:00

TypeScript란?

TypeScript는 JavaScript의 상위 집합(Superset)으로, 정적 타입을 지원하는 언어입니다. JavaScript의 동적 특성을 유지하면서도 강력한 타입 시스템을 제공하여 개발자의 실수를 줄이고 코드의 안정성을 높일 수 있습니다.

TypeScript의 주요 장점은 다음과 같습니다:

 

  • 정적 타입 검사: 컴파일 시점에서 타입 오류를 찾아낼 수 있어 개발 생산성이 향상됩니다.
  • 더 나은 코드 가독성: 명시적인 타입 선언을 통해 코드의 의미를 명확하게 전달할 수 있습니다.
  • 최신 JavaScript 기능 지원: ES6+의 최신 기능을 포함하여 코드의 현대화가 용이합니다.
  • 대형 프로젝트에서 유리: 인터페이스, 제네릭, 모듈 시스템 등을 통해 대규모 코드베이스에서도 유지보수성을 높일 수 있습니다.

 

TypeScript의 주요 타입

TypeScript에서는 다양한 데이터 타입을 제공하여 변수를 더욱 명확하게 선언할 수 있습니다.

 

1. 기본 타입 (Primitive Types)

TypeScript는 JavaScript의 기본 타입을 모두 지원하며, 추가적으로 타입을 명시할 수 있습니다.

let num: number = 10;
let str: string = "Hello, TypeScript";
let isActive: boolean = true;
let notDefined: undefined = undefined;
let empty: null = null;
let bigIntVar: bigint = 100n; // ES2020부터 지원
let symbolVar: symbol = Symbol("unique");

2. 배열 타입 (Array)

배열 타입을 정의하는 방법은 두 가지가 있습니다.

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

배열의 요소 타입을 고정하고 싶다면 튜플을 사용할 수 있습니다.

3. 객체 타입 (Object)

객체 타입을 명확하게 정의하여 구조를 고정할 수 있습니다.

let user: { name: string; age: number; isAdmin?: boolean } = {
  name: "John Doe",
  age: 30,
};

객체의 속성 중 일부를 선택적으로 정의하려면 ?를 사용할 수 있습니다.

4. 튜플 (Tuple)

튜플은 특정한 개수와 타입을 가지는 배열을 정의할 때 유용합니다.

let tuple: [string, number] = ["Hello", 10];

튜플을 사용하면 위치 기반으로 타입을 구분하여 안정성을 높일 수 있습니다.

5. 열거형 (Enum)

열거형은 관련된 상수들을 그룹화하는 데 유용합니다.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
let dir: Direction = Direction.Up;

6. any 타입

any 타입은 어떤 값이든 저장할 수 있지만, 가능한 한 사용을 지양하는 것이 좋습니다.

let anything: any = "hello";
anything = 42;
anything = true;

7. unknown 타입

unknown은 any와 비슷하지만, 타입 검사를 강제할 수 있습니다.

let unknownVar: unknown = "Hello";
if (typeof unknownVar === "string") {
  console.log(unknownVar.toUpperCase());
}

8. void 타입

void는 반환 값이 없는 함수에서 주로 사용됩니다.

function sayHello(): void {
  console.log("Hello, world!");
}

9. never 타입

never는 절대 반환되지 않는 함수의 타입을 지정할 때 사용됩니다.

function error(message: string): never {
  throw new Error(message);
}

 

타입 단언 (Type Assertions)

타입 단언을 사용하면 특정 값이 원하는 타입임을 명시할 수 있습니다.

let someValue: any = "This is a string";
let strLength: number = (someValue as string).length;

 

인터페이스 (Interface)

인터페이스는 객체의 구조를 정의하는 강력한 기능입니다.

interface User {
  name: string;
  age: number;
  isAdmin?: boolean;
}

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

 

제네릭 (Generics)

제네릭은 다양한 타입을 유연하게 사용할 수 있도록 도와줍니다.

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

let output1 = identity<string>("Hello");
let output2 = identity<number>(42);

 


 

 

TypeScript의 타입을 익히면 보다 안전한 코드를 작성할 수 있으며, 대형 프로젝트에서도 유용하게 사용할 수 있습니다.

다음 게시글에서는 타입스크립트의 고급타입(Advanced Types)들에 대해 알아보려 합니다.

'Frontend 개발 > Typescript' 카테고리의 다른 글

TypeScript 고급 타입(Advanced Types) 정리  (1) 2025.03.08