서나로그

1.any 타입

☑️ any란?

• TypeScript에서 any 타입은 모든 타입의 슈퍼 타입이에요.
• 이는 어떤 타입의 값이든 저장할 수 있다는 의미입니다!
• JavaScript의 object 타입과 같은 최상위 타입이라고 생각하시면 됩니다!

☑️ 사용 사례

let anything: any;
anything = 5; // 최초에는 숫자를 넣었지만
anything = 'Hello'; // 문자열도 들어가고요
anything = { id: 1, name: 'John' }; // JSON도 들어가네요

2.unknown 타입

☑️ any의 대체제 unknown이란?

• unknown 타입은 any 타입과 비슷한 역할을 하지만 더 안전한 방식으로 동작합니다.
• unknown 타입의 변수에도 모든 타입의 값을 저장할 수 있어요.
• 하지만, 그 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 합니다!

☑️ 사용 사례

let unknownValue: unknown = '나는 문자열이지롱!';
console.log(unknownValue); // 나는 문자열이지롱!

let stringValue: string;
stringValue = unknownValue; // 에러 발생! unknownValue가 string임이 보장이 안되기 때문!
stringValue = unknownValue as string;
console.log(stringValue); // 나는 문자열이지롱!

• stringValue = unknownValue as string; 코드를 **Type Assertion(타입 단언)**이라고 합니다.
• unkwown 타입의 변수를 다른 곳에서 사용하려면 타입 단언을 통해 타입 보장을 하여 사용할 수 있어요!

let unknownValue: unknown = '나는 문자열이지롱!';
let stringValue: string;

if (typeof unknownValue === 'string') {
  stringValue = unknownValue;
  console.log('unknownValue는 문자열이네요~');
} else {
  console.log('unknownValue는 문자열이 아니었습니다~');
}

• 타입 단언만이 답은 아닙니다!
• typeof 키워드를 이용하여 타입 체크를 미리한 후 unknown 타입의 변수를 string 타입의 변수에 할당할 수 있어요!

3. union

☑️ unknown의 한계

• unknown 타입이 그나마 재할당을 할 때 타입 체크가 되어서 안전함을 보장해요.
• 하지만, unknown 타입도 결국 재할당이 일어나지 않으면 타입 안전성이 보장이 되지 않아요ㅠㅠ

☑️ union이란?

• 이럴 때를 위해 union 타입이라는 것이 사용됩니다.
• union 은 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용됩니다!
• union은 | 연산자를 사용하여 여러 타입을 결합하여 표현합니다.

☑️ 사용 사례

type StringOrNumber = string | number; // 원한다면 | boolean 이런식으로 타입 추가가 가능해요!

function processValue(value: StringOrNumber) {
  if (typeof value === 'string') {
    // value는 여기서 string 타입으로 간주됩니다.
    console.log('String value:', value);
  } else if (typeof value === 'number') {
    // value는 여기서 number 타입으로 간주되구요!
    console.log('Number value:', value);
  }
}

processValue('Hello');
processValue(42);

☑️ readonly란?

• 앞의 두 키워드는 JavaScript에서 많이 사용되는 키워드죠.
• 하지만, readonly는 TypeScript에서 등장한 키워드에요!
• readonly는 TypeScript에서 객체의 속성을 불변으로 만드는 데 사용되는 키워드에요!
• 즉, 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만들 수 있습니다.

☑️ 사용 사례

class Person { // 클래스는 다른 강의에서 자세히 설명해드릴게요!
  readonly name: string;
  readonly age: number;

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

const person = new Person('Spartan', 30);

console.log(person.name);  // 출력: 'Spartan'
console.log(person.age);   // 출력: 30

person.name = 'Jane';  // 에러: 'name'은 readonly 속성이므로 다시 할당할 수 없어요!
person.age = 25;       // 에러: 'age'은 readonly 속성이므로 다시 할당할 수 없어요!

<aside> ⁉️ readonly를 const로 치환하면 어떻게 되나요? 이렇게 쓰면 안되나요?

</aside>

• 클래스의 속성에 const 키워드를 사용할 수 없다고 편집기가 에러를 뿜습니다!
• const 키워드는 일반 변수를 상수화 할 때 사용하는 것이에요!

☑️ 튜플이란?

• 튜플은 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열입니다.

☑️ 튜플과 배열의 차이

• 배열은 number[], string[] 처럼 같은 타입의 원소만 가질 수 있었어요.
  • const testScores: number[] = [90, 85, 78, 92, “88”];
    • 위의 코드처럼 마지막 원소를 string 타입으로 넣으면 에러가 발생하죠!
    • 숫자만 넣어줘야 합니다. 즉, 같은 타입의 원소만 취급할 수 있어요.
• 하지만, 튜플은 어떤 타입의 원소를 허용할 것인지 정의만 해주면 됩니다.
  • 얼마든지 허용된 타입의 데이터들을 저장할 수 있어요!

☑️ 사용 사례

const person: [string, number, boolean] = ['Spartan', 25, false];
const person2: [string, number, boolean] = [25, 'Spartan', false]; // 오류!

• 여기서는 string, number, boolean이라는 3개의 각각 다른 타입의 데이터를 보관하게 정의를 했어요!

<aside> ⁉️ person이라는 튜플에 데이터를 더 저장하고 싶은데 그래도 상관없나요?

</aside>

• 원칙적으로는 데이터를 더 저장하는 것은 타입 안정성에 위배가 되는 행위에요!
• 따라서, 정의된 데이터 타입의 개수와 순서에 맞추어 저장을 하는 것이 필수입니다!
• 튜플에서도 배열의 메소드인 push를 사용하여 정의된 데이터 타입의 개수보다 더 저장할 순 있어요.
  • 하지만, 이렇게 억지로 데이터를 넣으면 튜플 구조가 내부적으로 변경이 되니 좋은 선택은 아니에요!