Frontend/TypeScript

TypeScript Type

개발자의 첫 걸음 2025. 11. 20. 10:00

안녕하세요. 오늘은 타입스크립트의 타입에 대해 알아볼게요.

 

 

 

타입스크립트의 타입(Type)

 

타입은 "변수에 담을 수 있는 데이터의 종류"를 의미해요.

 

쉽게 설명하면, "이 변수에는 어떤 종류의 값이 들어올 수 있는가?"미리 정해두는 규칙이에요.

 

하나의 예제를 본다면

let name: string = "Tom"; // 문자열만 가능
let age: number = 25;     // 숫자만 가능
let isLogin: boolean = true; // true / false만 가능

여기에 만약 잘못된 타입의 값을 넣으면?

age = "스물다섯"; // ❌ 오류 발생!

이렇게 TS가 미리 잡아줘서 실행 전에 오류를 예방할 수 있어요.

 

 

 

기본(Promitive) 타입

 

타입스크립트의 기본타입의 정리표예요.

타입 설명 예시
string 문자열 "hello", 'TS', `TypeScript`
number 숫자 (정수, 소수 모두) 10, 3.14
boolean 논리형 (참/거짓) true, false
undefined 값이 정의되지 않음 let a: undefined = undefined;
null 값이 없음 let b: null = null;
any 모든 타입 허용 (지양해야 함) let x: any = 123; x = "hi";

any는 “타입 검사하지 않겠다”는 뜻이에요.

 

JS처럼 자유롭게 쓰지만, TS의 장점을 잃게 되므로 되도록 사용을 피하는 게 좋아요.

 

 

 

배열(Array) 타입

 

배열에는 같은 타입의 값들이 들어가거나 제네릭(generic) 방식으로도 쓸 수 있어요.

let numbers: number[] = [1, 2, 3, 4];
let names: string[] = ["Tom", "Jane", "Mike"];

// 제네릭 타입
let scores: Array<number> = [90, 85, 100];

 

 

 

객체(Onject) 타입

 

객체 내부 속성 각각에 타입을 지정할 수 있어요.

let user: { name: string; age: number; isAdmin: boolean } = {
  name: "Alice",
  age: 20,
  isAdmin: false,
};

// 이렇게 하면 user.age = "스무살"; 같은 코드는 ❌ 오류가 납니다.

 

 

 

함수(Function) 타입

 

함수의 매개변수와 반환값에도 타입을 지정할 수 있어요.

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

let result = add(3, 5); // ✅ 8
// add("3", 5); // ❌ 오류

// a: number, b: number → 매개변수 타입
// : number → 반환 타입

 

 

 

유니언(Union) 타입

 

변수가 여러 타입을 가질 수 있게 허용하는 문법이에요.

let value: string | number = "Hello";
value = 123; // ✅ 가능

// | 기호는 “또는(or)”의 의미

 

 

 

리터럴(Literal) 타입

 

값 자체를 타입으로 고정시킬 수도 있어요.

let direction: "left" | "right" | "up" | "down";
direction = "left"; // ✅
direction = "top"; // ❌ 오류!

 

 

 

타입 추론(Type Inference)


TS는 대부분 자동으로 타입을 추론해요.

let message = "Hello"; // 자동으로 string 타입 인식
// message = 123; // ❌ 오류

//👉 굳이 매번 : string을 써주지 않아도,
//   TS가 알아서 “이건 string이구나!” 하고 판단해줍니다.

 

 

 

 

여기까지 타입스크립트의 타입에 대해 알아봤는데요.

 

이런 타입들을 잘 사용한다면 더 안전하고 예측 가능한 코드를 만들 수 있을 것 같아요.

'Frontend > TypeScript' 카테고리의 다른 글

Synchronous & Asynchronous & async / await  (0) 2025.11.25
TypeScript Generic(Advanced)  (0) 2025.11.23
TypeScript Generic  (0) 2025.11.21
TypeScript Interface  (0) 2025.11.21
TypeScript(TS)  (0) 2025.11.19