🔍 검색 키워드: TypeScript 타입 에러, Type is not assignable to type, TS2322, TS2345, TypeScript 타입 오류 해결, typescript type error 해결
TypeScript 쓰다 보면 한 번쯤은 이 에러를 만난다.
Type 'string' is not assignable to type 'number'. ts(2322)처음엔 당황스럽지만, 패턴을 이해하면 금방 잡힌다. 이 글은 자주 나오는 케이스별로 원인과 해결을 정리했다.
에러가 생기는 이유
TypeScript는 정적 타입 언어다. 컴파일 타임에 타입을 검사하기 때문에, 선언된 타입과 실제 할당값이 다르면 에러를 낸다. Java의 컴파일 에러와 같은 맥락이다.
레벨 1 (초보자) — 기본 타입 불일치
증상
let count: number = "5"; // ❌ TS2322원인
number 타입으로 선언된 변수에 string을 대입했다.
해결
// 방법 1: 타입에 맞는 값으로 수정
let count: number = 5;
// 방법 2: 타입 변환
let count: number = parseInt("5");
// 방법 3: 타입 선언 수정
let count: string = "5";레벨 2 (중급자) — 함수 파라미터 타입 불일치
증상
function greet(name: string): string {
return `Hello, ${name}`;
}
greet(123); // ❌ TS2345해결
// 방법 1: 올바른 타입으로 전달
greet("홍길동");
// 방법 2: Union 타입 사용
function greet(name: string | number): string {
return `Hello, ${String(name)}`;
}레벨 3 (중급자) — Object 타입 구조 불일치
증상
interface User {
id: number;
name: string;
email: string;
}
const user: User = {
id: 1,
name: "홍길동"
// email 누락 → ❌ TS2322
};해결
// 방법 1: 빠진 프로퍼티 추가
const user: User = { id: 1, name: "홍길동", email: "hong@example.com" };
// 방법 2: 선택적 프로퍼티로 변경
interface User { id: number; name: string; email?: string; }
// 방법 3: Partial 사용
const partialUser: Partial<User> = { id: 1, name: "홍길동" };레벨 4 (중급자) — 배열/제네릭 타입 불일치
증상
const ids: number[] = [1, 2, "3", 4]; // ❌ TS2322
function first<T>(arr: T[]): T { return arr[0]; }
const result: number = first(["a", "b"]); // ❌ TS2322해결
const ids: (number | string)[] = [1, 2, "3", 4];
const result: string = first(["a", "b"]);레벨 5 (실무자) — null/undefined 처리
증상
function getUser(id: number): User | null {
return id === 1 ? { id: 1, name: "홍길동", email: "hong@example.com" } : null;
}
const user: User = getUser(999); // ❌ TS2322: 'User | null'해결
// 방법 1: 타입에 null 포함
const user: User | null = getUser(999);
// 방법 2: null 체크 후 사용 (Type narrowing)
const maybeUser = getUser(999);
if (maybeUser !== null) {
const user: User = maybeUser;
}
// 방법 3: Non-null assertion
const user: User = getUser(1)!;
// 방법 4: Nullish coalescing으로 기본값
const user: User = getUser(999) ?? { id: 0, name: "Guest", email: "" };레벨 6 (고급자) — 타입 추론 문제
증상
const config = { mode: "development" }; // TypeScript가 string으로 추론
function setup(mode: "development" | "production") {}
setup(config.mode); // ❌ TS2345해결
// 방법 1: as const로 리터럴 타입 고정
const config = { mode: "development" } as const;
// 방법 2: 명시적 타입 선언
const config: { mode: "development" | "production" } = { mode: "development" };
// 방법 3: 타입 단언
setup(config.mode as "development" | "production");상황별 체크리스트
| 상황 | 확인 포인트 |
|---|---|
| 변수 할당 에러 | 선언 타입과 값 타입 일치 여부 |
| 함수 인자 에러 | 함수 시그니처와 전달값 타입 비교 |
| 객체 에러 | 인터페이스 필수 프로퍼티 누락 여부 |
| null 에러 | strictNullChecks 활성화 여부 확인 |
| 리터럴 타입 에러 | as const 또는 명시적 타입 선언 필요 |
| any 남용 | any 대신 unknown + 타입 가드 사용 |
자주 하는 실수 — any로 도배
// ❌ TypeScript 쓰는 의미 없음
const data: any = fetchData();
// ✅ unknown 쓰고 타입 가드로 좁혀라
const data: unknown = fetchData();
if (typeof data === "string") {
console.log(data.toUpperCase());
}마무리
TypeScript 타입 에러는 대부분 세 가지다.
- 타입을 잘못 선언했거나
- 값이 여러 타입이 될 수 있는데 하나만 선언했거나
- null/undefined 처리를 안 했거나
에러 메시지를 읽으면 어느 쪽인지 대부분 나온다. ts(숫자) 에러코드로 TypeScript 공식 문서에서 정확한 설명도 찾을 수 있다.
