타입스크립트 기본 타입과 인터페이스

byCode Keeper •


타입스크립트 기본 타입과 인터페이스


타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋으로, 정적 타입 검사 기능을 제공하여 코드의 가독성과 유지보수성을 향상시킵니다. 이 포스팅에서는 타입스크립트의 기본 타입과 인터페이스를 활용하는 방법을 살펴보겠습니다. 이를 통해 타입스크립트를 처음 접하는 개발자들도 쉽게 이해하고 실무에 적용할 수 있도록 도움을 드리고자 합니다.


타입스크립트의 중요성


타입스크립트는 자바스크립트의 한계를 보완하기 위해 개발된 언어로, 정적 타입을 지원하여 코드의 안정성과 유지보수성을 높입니다. 특히 대규모 프로젝트에서는 타입스크립트를 사용함으로써 코드의 일관성을 유지하고, 잠재적인 버그를 사전에 발견할 수 있습니다.


타입스크립트의 기본 타입


타입스크립트는 다양한 기본 타입을 제공합니다. 이 섹션에서는 자주 사용되는 기본 타입을 소개하고, 이를 활용하는 방법을 설명합니다.


숫자 타입


타입스크립트에서 숫자 타입은 number로 표시됩니다.


let age: number = 25;
let price: number = 9.99;

문자열 타입


문자열 타입은 string으로 표시됩니다.


let name: string = "John Doe";
let message: string = `Hello, ${name}`;

불린 타입


불린 타입은 boolean으로 표시됩니다.


let isCompleted: boolean = true;
let hasError: boolean = false;

배열 타입


배열 타입은 요소의 타입 뒤에 []를 붙여 표시하거나 Array<타입> 형식을 사용합니다.


let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["Apple", "Banana", "Cherry"];

튜플 타입


튜플 타입은 고정된 요소 수와 각각의 타입을 정의할 수 있습니다.


let person: [string, number] = ["John Doe", 25];

열거형 타입


열거형 타입은 enum 키워드를 사용하여 정의할 수 있습니다.


enum Direction {
  Up,
  Down,
  Left,
  Right
}

let move: Direction = Direction.Up;

Any 타입


any 타입은 모든 타입을 허용하며, 타입 검사를 피하고 싶을 때 사용합니다.


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

Void 타입


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


function logMessage(message: string): void {
  console.log(message);
}

Null과 Undefined 타입


null과 undefined 타입은 각각 null과 undefined 값을 가질 수 있습니다.


let nullableValue: null = null;
let undefinedValue: undefined = undefined;

인터페이스


인터페이스는 객체의 구조를 정의하는 데 사용됩니다. 인터페이스를 사용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.


기본 인터페이스


인터페이스는 interface 키워드를 사용하여 정의합니다.


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

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

선택적 프로퍼티


인터페이스의 프로퍼티는 선택적으로 정의할 수 있습니다. 선택적 프로퍼티는 프로퍼티 이름 뒤에 ?를 붙입니다.


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

let user: Person = {
  name: "John Doe"
};

읽기 전용 프로퍼티


읽기 전용 프로퍼티는 readonly 키워드를 사용하여 정의합니다.


interface Person {
  readonly id: number;
  name: string;
}

let user: Person = {
  id: 1,
  name: "John Doe"
};

// user.id = 2; // 오류 발생: 읽기 전용 프로퍼티는 수정할 수 없습니다.

함수 타입


인터페이스는 함수 타입도 정의할 수 있습니다.


interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc = function(source: string, subString: string): boolean {
  return source.includes(subString);
};

인덱싱 가능 타입


인터페이스는 배열과 객체를 위한 인덱싱 가능 타입을 정의할 수 있습니다.


interface StringArray {
  [index: number]: string;
}

let myArray: StringArray = ["Bob", "Fred"];

interface NumberDictionary {
  [key: string]: number;
}

let myDictionary: NumberDictionary = {
  age: 25,
  height: 180
};

인터페이스 상속


인터페이스는 다른 인터페이스를 상속받아 확장할 수 있습니다.


interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

let employee: Employee = {
  name: "John Doe",
  employeeId: 1
};

타입 별칭


타입 별칭은 type 키워드를 사용하여 새로운 타입을 정의할 수 있습니다.


type StringOrNumber = string | number;

let value: StringOrNumber = "Hello";
value = 42;

유니언 타입과 인터섹션 타입


유니언 타입은 여러 타입 중 하나를 가질 수 있으며, 인터섹션 타입은 여러 타입을 모두 만족하는 타입을 정의합니다.


type Pet = "dog" | "cat";
let myPet: Pet = "dog";

type Shape = { color: string };
type Circle = Shape & { radius: number };

let circle: Circle = { color: "red", radius: 10 };

주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 타입스크립트의 기본 타입과 인터페이스를 활용하는 방법에 대해 살펴보았습니다. 타입스크립트를 사용하면 코드의 가독성과 유지보수성을 향상시킬 수 있으며, 특히 대규모 프로젝트에서 매우 유용합니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전