타입스크립트 정리
typescript
작성일 : 2024.08.17
타입스크립트를 사용한 지 1년 정도가 되었는데 그동안 작성했던 타입스크립트 정리 글에 잘못된 부분들이 많아 이 게시글을 작성하며 다시 정리해 보려고 합니다.
TypeScript 란?
타입스크립트는 자바스크립트를 기반으로 한 정적 타입 언어입니다. 컴파일 시점에서 타입 오류를 확인할 수 있고 타입을 명시해 유지보수하기 쉽고 미리 오류를 잡을 수 있도록 도와줍니다.
타입
기본 타입
문자열(String): string
숫자(Number): number
불리언(Boolean): boolean
Null: null
Undefined: undefined
Symbol: symbol
BigInt: bigint
Array
배열은 타입[] Array<타입> 두가지 방법으로 선언할 수 있으며 | 유니언(Union)을 사용하면
여려개의 타입을 가질 수 있습니다.
let numbers: number[] = [1, 2, 3]; // 숫자만 가질 수 있습니다.
let strings: Array<string> = ["a", "b", "c"]; // 문자만 허용되는 배열 입니다.
let array: (string | number)[] = [1, 2, "A"]; // 숫자와 문자가 허용됩니다.
Tuple
튜플은 고정된 길이와 순서를 가지는 배열 입니다.
let user: [string, number] = ["Alice", 25];
Enum
열거형은 관련된 타입도 정의한 수 있습니다.
enum Direction {
Up = 1,
Down, // 2
Left, // 3
Right // 4
}
let move: Direction = Direction.Up; // 1
Object
객체의 구조에 대해 타입을 정의할 수 있습니다.
type User = {
id: number;
name: string;
isActive: boolean;
};
let user: User = {
id: 1,
name: "Alice",
isActive: true,
};
Function
함수의 매개변수와 반환값에 대한 타입을 지정할 수 있습니다.
function add(a: number, b: number): number {
return a + b;
}
const subtract = (a: number, b: number): number => {
return a - b;
}
add(3, 5) // 8
add(3, "5") // Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)
any, unknown, void, never
any: 모든 타입을 허용합니다.
unknown: any와 같이 모든 타입에 할당할 수 있지만 타입 단언이 필요합니다.
void: 비어있다는 의미로 반환값이 없는 함수에 사용할 수 있습니다.
never: 절대 발생하지 않는 값을 의미하며 주로 오류를 던지는 함수등에 사용하며 값이 비어있다는 `void`와 혼동하면 안됩니다.
Generic
제네릭 타입은 타입을 매개변수처럼 받아 사용할 수 있습니다.
function identity<T>(value: T): T {
return value;
}
let output = identity<string>("Hello");
타입추론
타입스크립트는 명시적은 타입선언을 하지 않아도 타입에 대한 정보를 제공합니다.
let text = "text"
text = 1 //Type 'number' is not assignable to type 'string'.ts(2322)
이 타입추론은 제네릭 타입에도 적용할 수 있습니다.
function Box<T>(arg: T): T {
return arg;
}
let num = Box(10); // num은 number 타입
let str = Box("Hello, TypeScript!"); // str은 string 타입
타입 선언 방법
타입을 선언하는 방법으론 type과 Interface가 있습니다.
type
변수처럼 type 키워드를 이용해 타입을 선언할 수 있습니다.
type IdType = number
type NameType = string
type UserType = {
id: IdType;
name: NameType;
info: string[]
}
const user: UserType = {
id: 1234;
name: "김지훈"
info: ["안", "녕"]
}
Interface
인터페이스는 객체의 타입을 정의하는데 큰 도움이 되며 readonly을 이용해 읽기 전용 속성을 정의하거나
extends를 이용해 확장할 수 도 있습니다.
interface User {
name: string;
age: number;
isAdmin: boolean;
}
const user: User = {
name: "John",
age: 30,
isAdmin: true,
};
interface User {
readonly id: number; // 읽기 전용 속성은 수정할 수 없습니다.
name: string;
}
const user: User = { id: 1, name: "Charlie" };
user.id = 3; // Cannot assign to 'id' because it is a read-only property.ts(2540)
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
const myDog: Dog = {
name: "Buddy",
breed: "Golden Retriever",
};
타입 연산자
keyof
key of는 인덱싱 가능한 타입의 속성 이름들을 유니온 타입으로 적용시킵니다.
type User = {
id: number;
name: string;
age: number;
};
type UserKeys = keyof User; // "id" | "name" | "age"
as
as를 사용하면 컴파일러에 명시적으로 타입을 알려줍니다.
const value: unknown = "Hello, TypeScript";
const str = value as string; // unknown → string으로 단언
function add(a: string | number, isNumber: boolean) {
if (isNumber) {
// Property 'toFixed' does not exist on type 'string | number'.
// Property 'toFixed' does not exist on type 'string'.ts(2339)
a.toFixed(2);
(a as number).toFixed(2) // 이상 없음
}
}
is
반환 타입을 좁혀주는 역할을 합니다.
function isNumber(value: unknown): value is number {
return typeof value === "number";
}
const input: unknown = 123;
if (isNumber(input)) {
console.log(input.toFixed(2)); // input이 number로 타입이 좁혀짐
}
in
특정 속성이 있는지 확인합니다.
type Cat = { meow: () => void };
type Dog = { bark: () => void };
function makeSound(animal: Cat | Dog) {
if ("meow" in animal) {
animal.meow();
} else {
animal.bark();
}
}
extends
인터페이스나 제네릭 타입에 확장할 수 있습니다.
function logLength<T extends { length: number }>(value: T): void { // length속성이 있는 변수만 허용함
console.log(value.length);
}
logLength("Hello"); // string은 length 속성이 있음
logLength([1, 2, 3]); // 배열도 length 속성이 있음
interface Animal {
name: string;
age: number;
}
interface Dog extends Animal {
breed: string;
}
const myDog: Dog = {
name: "Buddy",
age: 3,
breed: "Golden Retriever",
};
infer
조건부 타입과 함께 사용되어 타입을 추론합니다.
type ElementType<T> = T extends (infer U)[] ? U : T;
type A = ElementType<string[]>; // string
type B = ElementType<number>; // number
type C = ElementType<boolean[]>; // boolean
& 와 |
&는 and를 의미합니다. |는 or을 의미합니다
type Name = { name: string };
type Age = { age: number };
type Person = Name & Age;
const person: Person = { name: "Alice", age: 30 };
type Status = "success" | "error" | "pending";
function handleStatus(status: Status) {
if (status === "success") {
console.log("Success!");
} else if (status === "error") {
console.log("Error!");
}
}
? 옵셔널 프로퍼티
객체 타입에서 필수 속성이 아닌 선택적으로 지정합니다.
interface User {
name: string;
age?: number; // 옵셔널 프로퍼티
}
// age?는 number | undefined 으로 해석됩니다.
마치며
여기까지 타입스크립트의 문법과 타입의 종류에 대해서 정리했는데
다음 주에는 타입스크립트의 유틸리티 타입에 대해 정리해 보도록 하겠습니다.