TIL 230429 readonly / unknown / Generic

🎆 오늘 한 것

• 노마드 TS 강의

✨ TS - readonly

변수나 속성을 읽기 전용으로 설정할 때 사용

readonly로 설정된 변수나 속성은 선언시나 클래스의 생성자에서만 값을 할당할 수 있으며, 이후에는 값을 변경할 수 없다.

class Person {
  readonly name: string;
  readonly age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person("John", 30);
person.name = "Mary"; // 에러

readonly로 설정된 속성은 값이 변경되지 않기 때문에 다른 코드에서 의도하지 않은 값 변경을 방지할 수 있다.

✨ TS - unknown

어떤 값이든 할당할 수 있지만, 그 값의 타입은 알 수 없는 상태를 나타냄.

unknown은 타입 검사 시 유용하게 사용할 수 있으며, 다른 타입으로 변환하거나 사용하려면 명시적인 타입 변환을 해줘야 함.

function getUserInfo(userId: unknown) {
  if (typeof userId === "string") {
    console.log(`User ID is ${userId}`);
  } else {
    console.log("User ID is unknown");
  }
}

getUserInfo("12345");   // User ID is 12345
getUserInfo(12345);     // User ID is unknown

getUserInfo 함수는 unknown 타입으로 선언된 userId 인자를 받아, 이 인자가 문자열인지 확인한다. 만약 문자열이면 해당 문자열을 출력하고, 그렇지 않으면 "User ID is unknown"을 출력함.

이렇게 unknown 타입을 사용하면 컴파일러가 인자의 타입을 미리 알 수 없는 상황에서도 타입 검사를 수행할 수 있다. 단, unknown은 다른 타입으로 변환하기 전에 반드시 명시적인 타입 변환을 해줘야 됨.

let userInput: unknown;

userInput = "hello";
console.log(typeof userInput);   // string

userInput = 10;
console.log(typeof userInput);   // number

const userName: string = userInput;   // 에러: 'unknown' 타입은 'string' 타입에 할당할 수 없음
const userNumber: number = userInput; // 에러: 'unknown' 타입은 'number' 타입에 할당할 수 없음

const userString: string = userInput as string;   // 명시적인 타입 변환을 통해 'unknown' 타입을 'string' 타입으로 변환
console.log(userString);    // hello

userInput 변수는 unknown 타입으로 선언되어 있다. 이 변수에는 어떤 값이든 할당할 수 있지만, 할당된 값의 타입은 알 수 없음. 따라서 변수를 사용하기 전에 반드시 타입 변환을 수행해야 함.

unknown 타입은 모든 타입의 상위 타입으로 취급되며, any 타입보다 타입 안정성을 높일 수 있다. 따라서 타입 검사를 보다 엄격하게 수행하고자 할 때 unknown 타입을 사용할 수 있음.

✨ TS - Generic

타입의 일반화를 통해 재사용성을 높이는 기능

제네릭은 함수나 클래스에서 사용되며, 실행 시점이 아니라 컴파일 시점에서 타입을 결정함

function reverse<T>(items: T[]): T[] {
  let result: T[] = [];

  for (let i = items.length - 1; i >= 0; i--) {
    result.push(items[i]);
  }

  return result;
}

let names = ["Alice", "Bob", "Charlie"];
let reversedNames = reverse(names);
console.log(reversedNames);   // ["Charlie", "Bob", "Alice"]

let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = reverse(numbers);
console.log(reversedNumbers);   // [5, 4, 3, 2, 1]

reverse 함수는 T라는 타입 변수를 선언하여, 배열의 요소 타입을 일반화한다. 이 함수를 호출할 때, 인자로 전달된 배열의 타입에 따라 T의 값이 결정된다. 예를 들어 names 배열을 전달하면 T는 string 타입이 되고, numbers 배열을 전달하면 T는 number 타입이 됨.

T[]는 배열 타입을 의미하며, 이 배열을 역순으로 정렬하여 새로운 배열을 반환한다. 반환되는 배열의 타입은 입력받은 배열의 요소 타입과 동일.