[TypeScript] 타입스크립트 기본 타입

타입스크립트는 자바스크립트에 타입 시스템 추가로 코드의 안정성과 유지보수성이 향상됨

---

1. string 타입

문자열 처리 타입

• 큰따옴표(""), 작은따옴표(''), 백틱(`) 모두 string 타입으로 처리 가능
• 템플릿 리터럴(${expression})에서 표현식의 결과도 string 타입으로 변환
• 이모티콘도 string 타입으로 처리 가능

let str: string = "Hello, TypeScript";
let backTick: string = `Hello ${doubleQuote}`;
let emoji: string = "😊";

console.log(str); // Hello, TypeScript
console.log(backTick); // "Hello World"
console.log(emoji);    // "😊"

2. number 타입

정수, 소수, 음수, NaN, Infinity 등 포함한 숫자 타입

let x: number = 10;          // 정수
let y: number = 3.14;        // 소수
let z: number = -100;        // 음수
let a: number = NaN;         // Not a Number
let b: number = Infinity;    // 무한대

let result: number = 0 / 0;  // NaN
let positiveInfinity: number = 1 / 0; // 무한대

3. boolean 타입

true 또는 false 값 가짐

let isDone: boolean = true;
let isTrue: boolean = false;

// 비교 연산
let result: boolean = 10 > 5; // true
let result2: boolean = "hello" === "hello"; // true

• 문자열 "true"는 boolean 타입으로 설정 시 오류 발생, JSON.parse()로 변환한 true는 boolean 타입으로 지정 가능

let boolTrue: boolean = JSON.parse("true"); // 가능
// let boolString: boolean = "true";  // 오류 발생

• falsy로 평가되는 값들도 boolean 타입으로 지정하여 사용 가능

let empty = "";
let isZero: boolean = !!0;       // false
let isEmpty: boolean = !!empty;  // false
let isNanValue: boolean = !!NaN; // false

4. object 타입

객체, 배열, 함수 등 포함. 속성 타입을 명확히 지정하는 것이 좋음

let obj: { name: string; age: number } = { name: "John", age: 30 };
console.log(obj.name); // John

배열과 함수도 객체 타입에 포함

let emptyArr: object = [];
let emptyFunc: object = function () {};

5. array 타입

배열 타입 정의 방식 두 가지:

• type[] (최신 스타일)
• Array<type> (구버전)

const numArr: number[] = [1, 2, 3];
const stringArr: Array<string> = ["a", "b", "c"];

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

// 혼합 배열 (유니언 타입)
const mixedArr: (string | number)[] = ["apple", 1, "banana", 2];

// 생성자 함수를 사용한 배열 생성
const constructorArr: number[] = new Array(1, 2, 3);

6. tuple 타입

튜플: 배열의 각 요소가 다른 타입을 가질 수 있는 배열. 특정 위치에 있는 타입 명시 가능

// 튜플
const mixArr: [number, string, {}, number[]] = [1, "a", {}, [1, 2, 3]];

// 옵셔널 요소
let user: [string, number, string?] = ["John", 25];
user.push(23); // 가능
console.log(user); // ["John", 25, 23]

// 구조 분해 할당
let [item, ...rest]: [string, ...number[]] = ["item1", 1, 2, 3, 4];

옵셔널 요소: string?는 해당 위치의 요소가 문자열이거나 생략 가능함을 표시. 타입 끝에 ?를 붙여 할당되지 않은 요소의 타입을 지정할 수 있음

구조 분해 할당: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식. 위 예제에서는 첫 번째 요소를 item으로, 나머지 요소들을 rest 배열로 분해함

7. null과 undefined 타입

null과 undefined는 각각 비어 있음을 나타냄

let x: null = null;
let b: undefined = undefined;

// null 병합 연산자
let result = x ?? "default"; // x가 null 또는 undefined면 "default" 반환

8. any 타입

모든 타입 허용으로 개발 속도를 높이는 데 사용. 타입 안전성이 낮아 남용은 피해야 함

let value: any = 10;
value = "hello";
value = true;
console.log(value); // true

9. unknown 타입

unknown은 모든 타입을 허용하지만, 실제로 사용하기 전에 타입 검증이 필요함

let value: unknown = [1, 2];

// 타입 검증 (타입 가드)
if (Array.isArray(value)) {
  console.log(value[0]); // 1
}

10. any vs unknown 타입 비교

any와 unknown 타입은 모든 타입 허용. 사용 방식과 안전성에서 차이점 존재

any 타입:

let value: any = 10;
value = "hello";
console.log(value.length); // 타입 검증 없이 사용 가능

unknown 타입:

let value: unknown = [1, 2];
if (Array.isArray(value)) {
  console.log(value[0]); // 타입 검증 후 사용
}

주요 차이점:

• any: 타입 검사를 무시하여 편리하지만 안전성이 낮음
• unknown: 사용 전 타입 검사 필요, 더 안전한 코드 작성 가능

Tip: 실무에서는 any 대신 unknown을 사용하는 것이 권장됨

출처: 수코딩