[TypeScript 공식문서] 2. Everyday Types(1)

1. 원시 타입

• string, number, boolean : 자바스크립트와 동일
• String, Number, Boolean (대문자 버전)은 사용하지 않는 것을 권장

2. 배열

• [1, 2, 3]과 같은 배열의 타입을 지정할 때 number[] 구문을 사용할 수 있습니다.
• Array<number>와 같은 형태로 적을 수 있으며, 동일한 의미를 가집니다.
• [number] 는 전혀 다른 의미를 가짐(튜플)

3. any

• 어떤 타입도 허용, 타입 검사 무시
• 디버깅이 어려워지므로 사용은 최소화
• noImplicitAny 설정 시, 암묵적 any를 에러로 잡음

4. 타입 표기

• let name: string = "Alice" → 명시적 타입 표기(선택 사항)
• 대부분은 초기값 기반 타입 추론이 잘 됨

5. 함수

• 매개변수, 반환값에 타입 지정 가능

function greet(name: string): void { ... }

• 익명 함수, 화살표 함수도 타입 추론 가능

6. 객체 타입(Object Types)

• { x: number; y: number }처럼 직접 구조 명시

// 매개 변수의 타입은 객체로 표기되고 있습니다.
function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

• 옵셔널 프로퍼티: last?: string
• 어떤 프로퍼티는 있을 수도 있고, 없을 수도 있을 때, ? 를 붙여서 옵셔널로 선언

function printName(obj: { first: string; last?: string }) {
  // last 는 있어도 되고 없어도 됨
}
// 둘 다 OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

7. 유니언 타입(Union Types)

• 서로 다른 두 개 이상의 타입들을 사용하여 만드는 것
• 유니언 타입의 값은 타입 조합에 사용된 타입 중 무엇이든 하나를 타입으로 가질 수 있다.
• 조합에 사용된 각 타입을 유니언 타입의 멤버 라고 부름

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");
// 오류
printId({ myID: 22342 });

타입 좁히기 (Type Narrowing)

TypeScript에게 "지금 이 값은 string이야!" 라고 알려줘야 함

→ typeof 연산자가 그걸 도와줌

function printId(id: number | string) {
  if (typeof id === "string") {
    // 여기서는 id가 'string'임을 확신
    console.log(id.toUpperCase());
  } else {
    // 여기선 number
    console.log(id);
  }
}

📌 왜 작동하나?

typeof id === "string" 조건문을 통해

→ 이 if 블록 안에서는 TypeScript가 id의 타입을 string으로 좁혀줌

→ 이제 toUpperCase() 써도 오류 없음

🔍 typeof 연산자란?

• 런타임에서 변수의 타입을 문자열로 반환
• 사용 예:

typeof "hello"      // "string"
typeof 123          // "number"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof null         // "object" ← 이건 JS의 역사적 버그
typeof [1, 2, 3]    // "object"
typeof () => {}     // "function"

유사 예시: 배열 vs 문자열 구분

function welcomePeople(x: string[] | string) {
  if (Array.isArray(x)) {
    // string[]로 좁혀짐
    console.log("Hello, " + x.join(" and "));
  } else {
    // string으로 좁혀짐
    console.log("Welcome lone traveler " + x);
  }
}

여기서는 typeof 대신 Array.isArray() 사용

→ 배열 타입 좁힐 때는 Array.isArray() 가 더 정확(배열도 typeof 사용하면 object로 나옴)