240625 TIL

TypeScript의 타입

TypeScript는 JavaScript에 타입 시스템을 추가한 언어로, 코드의 안정성과 가독성을 높여줍니다. TypeScript의 주요 타입들에 대해 자세히 살펴보겠습니다.

기본 타입

1. Boolean

   let isDone: boolean = false;

   true 또는 false 값을 가질 수 있습니다.

2. Number

   let decimal: number = 6;
   let hex: number = 0xf00d;
   let binary: number = 0b1010;
   let octal: number = 0o744;

   정수와 부동 소수점을 포함한 모든 숫자 타입을 의미합니다.

3. String

   let color: string = "blue";
   color = 'red';

   텍스트 데이터를 나타내며, 큰따옴표("), 작은따옴표('), 백틱(`)을 사용합니다.

4. Array

   let list: number[] = [1, 2, 3];
   let list: Array<number> = [1, 2, 3];

   배열을 표현하는 두 가지 방법입니다.

5. Tuple

   let x: [string, number];
   x = ["hello", 10];

   고정된 요소 수와 각각의 타입을 가진 배열입니다.

6. Enum

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

   열거형 타입으로, 값의 집합에 이름을 부여할 수 있습니다.

7. Any

   let notSure: any = 4;
   notSure = "maybe a string instead";
   notSure = false;

   특정 타입을 알지 못하거나 다양한 타입을 가질 수 있는 변수에 사용합니다.

8. Void

   function warnUser(): void {
       console.log("This is my warning message");
   }

   값을 반환하지 않는 함수의 반환 타입으로 주로 사용됩니다.

9. Null and Undefined

   let u: undefined = undefined;
   let n: null = null;

   이 두 가지는 다른 모든 타입의 하위 타입입니다. 기본적으로 null과 undefined는 모든 타입에 할당될 수 있습니다.

고급 타입

1. Union Types

   let value: string | number;
   value = "hello";
   value = 10;

   변수에 둘 이상의 타입을 사용할 수 있습니다.

2. Intersection Types

   interface ErrorHandling {
       success: boolean;
       error?: { message: string };
   }
   
   interface ArtworksData {
       artworks: { title: string }[];
   }
   
   type ArtworksResponse = ArtworksData & ErrorHandling;

   여러 타입을 결합하여 하나의 타입으로 만듭니다.

3. Type Aliases

   type Name = string;
   type NameResolver = () => string;
   type NameOrResolver = Name | NameResolver;
   
   function getName(n: NameOrResolver): Name {
       if (typeof n === "string") {
           return n;
       } else {
           return n();
       }
   }

   타입에 별칭을 붙일 수 있습니다.

4. Interfaces

   interface LabelledValue {
       label: string;
   }
   
   function printLabel(labelledObj: LabelledValue) {
       console.log(labelledObj.label);
   }
   
   let myObj = {size: 10, label: "Size 10 Object"};
   printLabel(myObj);

   객체의 구조를 정의할 수 있습니다. 클래스와 함께 사용되기도 합니다.

5. Type Assertions

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

   특정 변수의 타입을 강제할 수 있습니다.

6. Literal Types

   type Easing = "ease-in" | "ease-out" | "ease-in-out";
   function animate(dx: number, dy: number, easing: Easing) {
       if (easing === "ease-in") {
           // ...
       } else if (easing === "ease-out") {
           // ...
       } else if (easing === "ease-in-out") {
           // ...
       } else {
           // error! should not pass here
       }
   }
   
   animate(0, 0, "ease-in");

   특정 값만 가질 수 있는 타입을 정의할 수 있습니다.

7. Generics

   function identity<T>(arg: T): T {
       return arg;
   }
   
   let output = identity<string>("myString");
   let output = identity<number>(100);

   타입을 파라미터로 사용하는 함수나 클래스를 정의할 수 있습니다.

8. Mapped Types

   type Keys = "option1" | "option2";
   type Flags = { [K in Keys]: boolean };

   기존 타입을 기반으로 새로운 타입을 만들 수 있습니다.

9. Conditional Types

   type MessageOf<T> = T extends { message: unknown } ? T["message"] : never;
   
   interface Email {
       message: string;
   }
   
   interface Dog {
       bark(): void;
   }
   
   type EmailMessageContents = MessageOf<Email>;
   type DogMessageContents = MessageOf<Dog>;

   타입에 조건을 적용하여 새로운 타입을 정의할 수 있습니다.

결론

TypeScript는 강력하고 유연한 타입 시스템을 제공하여 JavaScript 개발의 안정성과 생산성을 높입니다. 기본 타입에서 고급 타입까지 다양한 타입을 통해 더욱 안전하고 명확한 코드를 작성할 수 있습니다. 이를 통해 TypeScript는 대규모 애플리케이션 개발에 특히 유용한 도구가 됩니다.