[TS] 타입스크립트 주요 기능과 기본 문법 소개

TypeScript는 JavaScript에 타입을 추가한 언어로, 코드의 오류를 줄이고 유지보수를 쉽게 해 줍니다. 이번 포스팅에서는 TypeScript의 주요 기능을 중심으로 기초 문법을 함께 다뤄보겠습니다.

 

목차

1. 타입 지정

2. 함수의 타입

3. 인터페이스 (Interface)

4. 제네릭 (Generics)

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. 타입 지정

TypeScript의 기본 기능 중 하나는 타입을 지정하는 것입니다. 변수, 함수의 매개변수, 반환 값 등에 타입을 지정할 수 있어 코드의 가독성을 높이고 오류를 줄입니다.

const name: string = "Kim";
const age: number = 20;
const isAdult: boolean = true;

 

타입 종류

• 기본 타입: string, number, boolean, null, undefined
• 배열: 타입 뒤에 []를 붙여 배열로 지정할 수 있습니다.
  

  const user: string[] = ["Kim", "Kang", "Lee"];

• 튜플: 고정된 수의 요소를 가진 배열이며, 각 요소의 타입을 지정할 수 있습니다.
  

  const user: [string, number] = ["Kim", 20];

• 열거형 (Enum): 관련 값들을 하나의 그룹으로 묶을 때 유용합니다.
  

  // index.ts
  enum Color {
    Red,
    Green,
    Blue
  }
  
  let c: Color = Color.Green;

• 유니언 타입 (Union Type): 여러 가지 타입을 허용할 때 사용합니다.
  

  let id: string | number;
  id = 123;
  id = "ABC123";

2. 함수의 타입

함수의 매개변수와 반환 타입에도 타입을 지정할 수 있습니다. 이렇게 하면 의도하지 않은 타입의 값이 전달되거나 반환되는 것을 방지할 수 있습니다.

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

console.log(add(3, 5)); // 8

 

여기서 a와 b는 number 타입으로 지정되었으며, 함수는 number 타입의 값을 반환합니다.

 

선택적 매개변수

매개변수를 선택적으로 만들 수 있습니다. 선택적 매개변수는 매개변수 이름 뒤에 ?를 붙여 선언합니다.

function hello(name: string, age?: number): string {
  return age ? `Hello I'm ${name}, ${age} years old.` : `Hello I'm ${name}`;
}

console.log(hello("Kim", 20)); // Hello I'm Kim, 20 years old
console.log(hello("Kim")); // Hello I'm Kim

 

매개변수 기본값

기본값을 가진 매개변수도 지정할 수 있습니다.

function hello(name: string = "Kim") {
  return `Hello, ${name}!`;
}

console.log(hello()); // Hello, Kim!

 

3. 인터페이스 (Interface)

인터페이스는 객체의 구조를 정의하는 데 사용됩니다. 인터페이스를 사용하면 객체가 일관된 구조를 가지도록 강제할 수 있어 코드의 가독성과 유지보수성이 높아집니다.

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

const user: Person = {
  name: "Kim",
  age: 20,
};

 

함수에서 인터페이스 사용

인터페이스는 함수의 매개변수 타입으로도 사용할 수 있습니다. 인터페이스를 사용하면 다른 객체가 Person의 구조를 따르도록 강제할 수 있습니다.

function printPersonInfo(person: Person): void {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

printPersonInfo(user);

 

4. 제네릭 (Generics)

제네릭은 함수나 클래스가 다양한 타입에서 재사용될 수 있도록 만들어 줍니다. 다양한 타입을 받아들이는 함수나 클래스에서 타입을 지정하는 데 유용합니다.

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

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

 

 

 

TypeScript는 JavaScript의 기능을 확장하면서 코드의 오류를 줄여주는 강력한 도구입니다. 이번 포스팅에서는 TypeScript의 주요 기능인 타입 지정, 함수 타입, 인터페이스, 클래스, 제네릭에 대해 알아보았습니다. TypeScript를 활용하면 복잡한 애플리케이션에서도 안정적이고 읽기 쉬운 코드를 작성할 수 있습니다.

 

 

[TS] 타입스크립트 : 자바스크립트에 타입을 더하다