[TIL / DAY 25] TypeScript 기본 타입

miseullang·2024년 11월 18일
post-thumbnail

TypeScript 기본 타입

타입스크립트의 기본 타입으로는 string, number, boolean, object, array, null, undefined, unknown이 있다.
자바스크립트의 기본 자료형과 차이가 있거나 기억해야 할 내용이 있는 타입만 추렸다.

object

 // object (타입)
    // 배열, 객체, 함수 커버 가능 => 포괄적이기 때문에 사용에 주의를 요함 (잘 사용하지 않음)
    let emptyObj = {};
    // let userObj: object = { name: "철수", age: 10}; // 이렇게 사용하는 것보다
    let userObj = { name: "철수", age: 10 }; // 이렇게 프로퍼티별로 타입을 지정해주고 사용해야 함
    let emptyFunc = function () { };
}

Array (배열)

// 빈 배열 - 명시적 타입 지정 필요
const emptyArr: number[] = [];

// 타입 추론이 가능한 배열
const numbers = [1, 2, 3];          // number[]
const strings = ["a", "b", "c"];    // string[]

// 혼합 타입 배열
const mixed: (number | string | object | number[])[] = [1, "a", {}, [1, 2, 3]];

// 중첩 배열
const nested: number[][] = [
  [1, 2, 3],
  [4, 5, 6]
];

Tuple (튜플)

// 기본 튜플
const user: [string, number] = ["John", 25];

// 옵셔널 요소를 가진 튜플
const userWithOptional: [string, number, string?] = ["John", 25];

// Note: push() 사용은 권장되지 않음

Null과 Undefined


// null
let nullValue: null = null;

// 널 병합 연산자
let value = null;
let result = value ?? "default"; // "default"

// undefined
let undefinedValue: undefined = undefined;

Any vs Unknown


Any와 Unknown은 모든 타입을 허용한다는 점이 같다.
그렇다면 어떤 점에서 차이가 있을까?

Any

  • 모든 타입 허용
  • 타입 검사를 비활성화
  • 실무에서는 사용을 지양
let anyValue: any = 10;
anyValue = "string";  // 에러 없음
anyValue = [1, 2, 3]; // 에러 없음

Unknown

  • 타입 안전성 제공
  • 사용 전 타입 검증 필요
  • any 대신 권장됨
let value: unknown = 10;

// 타입 가드 사용
if (typeof value === "string") {
    console.log(value.toUpperCase());
}

if (Array.isArray(value)) {
    console.log(value[0]);
}

Next.js 등 많은 프레임워크에서 any 대신 unknown 사용을 권장한다.




추가 개념

정적 vs 동적

  • JavaScript: 런타임에 타입이 결정되는 동적 언어
  • TypeScript: 컴파일 단계에서 타입이 결정되는 정적 언어

TypeScript는 기본적으로 모든 파일을 전역 스코프로 인식한다. 따라서 서로 다른 파일에서 같은 이름의 변수를 선언해도 에러가 발생한다.
따라서{} 코드 블록으로 구분하거나, 모듈 시스템을 이용한다.

💡 실무에서는 모든 TypeScript 파일에 export {}를 추가하는 것이 일반적

profile
괴발개발 💻

0개의 댓글