자주 사용하는 TypeScript 문법 정리

1. TypeScript 기본 타입

 

1.기본 타입 선언

let age: number = 25;
let name: string = "홍길동";
let isActive: boolean = true;

 

number, string, boolean 등의 기본 자료형을 명시적으로 선언

 

 

2. 배열 타입

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["John", "Jane"];

 

T[] 또는 Array<T>로 배열 선언 가능.

 

 

3. 튜플

let person: [string, number] = ["홍길동", 30];

정해진 차입과 길이로 배열을 선언

 

4. 열거형 (Enum)

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

---

2. 인터페이스와 타입 (Interface vs Type)

1. 인터페이스

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

const user: Person = { name: "홍길동", age: 30 };

인터페이스 객체의 구조를 저으이하고 확장 가능

 

2. 타입 별칭

type Animal = {
  name: string;
  age: number;
};

const cat: Animal = { name: "나비", age: 3 };

---

3. 함수에서의 타입 선언

1. 매개변수와 반환 타입 지정

function add(a: number, b: number): number {
  return a + b;
}

 

2. 옵셔녈 매개변수

function greet(name: string, age?: number): void {
  console.log(`안녕하세요, ${name}.`);
}

 

?를 사용해 매개변수를 선택적으로 받을 수 있음.

 

3. Rest 파라미터

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

 

---

4. 제네릭 (Generics)

1. 기본적인 제네릭 사용 : 함수나 클래스에서 여러 타입을 유연하게 처리 가능

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

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

 

2. 제네릭 인터페이스

interface Box<T> {
  value: T;
}

const stringBox: Box<string> = { value: "타입스크립트" };

 

---

5. 유니온 타입과 교차 타입

1. 유니온 타입 (Union)

let value: string | number;
value = "Hello";
value = 42;

 

2. 교차 타입 (Intersection)

interface Person {
  name: string;
}

interface Employee {
  company: string;
}

type Worker = Person & Employee;

const employee: Worker = { name: "홍길동", company: "ABC Corp" };

---

6. 타입 단언 (Type Assertion)

let value: any = "Hello TypeScript";
let length: number = (value as string).length;

• as를 사용해 타입을 명시적으로 단언해 컴파일러가 타입을 확신하도록 만듦.

---

7. 클래스 (Class)

1. 기본 클래스 사용

class Person {
  constructor(public name: string, public age: number) {}

  greet() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  }
}

const user = new Person("홍길동", 30);
user.greet();

 

2. 상속 (Inheritance)

class Employee extends Person {
  constructor(name: string, age: number, public company: string) {
    super(name, age);
  }
}

const employee = new Employee("홍길동", 30, "ABC Corp");
console.log(employee);

---

8. 모듈과 네임스페이스

1. 모듈 사용

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from "./math";
console.log(add(2, 3));

2. 네임스페이스 사용

namespace Utility {
  export function log(message: string) {
    console.log(message);
  }
}

Utility.log("Hello from Utility");

 

---

9. 타입 유틸리티 (Utility Types)

Partial<T>

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

const partialUser: Partial<Person> = { name: "홍길동" };

Readonly<T>

const readonlyUser: Readonly<Person> = { name: "홍길동", age: 30 };
// readonlyUser.age = 31; // 오류 발생

---

10. 타입 가드 (Type Guard)

1. typeof 타입 가드

function isNumber(value: any): value is number {
  return typeof value === "number";
}

if (isNumber(42)) {
  console.log("숫자입니다.");
}

2. in 키워드 사용

interface Cat {
  meow: () => void;
}

interface Dog {
  bark: () => void;
}

function animalSound(animal: Cat | Dog) {
  if ("meow" in animal) {
    animal.meow();
  } else {
    animal.bark();
  }
}