본문 바로가기
Typescript

변수 선언(let, const, readonly) 와 슈퍼타입(any, unknown,union)

by 새싹개발자1호 2024. 6. 28.

Let

  • let 키워드를 사용하여 선언하면 변수가 선언됨
  • let 을 사용하여 선언한 변수는 값을 변경 할 수 있음
더보기
let num: number = 5;
console.log(num);  // 출력: 5

num = 10;
console.log(num);  // 출력: 10

const

  • const 키워드를 사용하여 선언하면 변수가 아닌 상수가 됨
  • 상수 는 값을 변경할 수 없음
  • 값을 변경할 수 없다는 이야기는 = 연산자로 다시 할당이 불가능하다는 얘기
더보기
const num: number = 5;
console.log(num);  // 출력: 5

num = 10;  // 에러: 'num'은 const로 선언되었으므로 다시 할당될 수 없어요!
const nums: number[] = [];
console.log(nums);  // 출력: []
nums.push(1); // 할당은 되지 않아도 배열에 데이터를 추가/삭제하는 것은 문제가 안됩니다!
nums.push(2); // 은근히 헷갈릴 수 있지만 = 연산자 기준으로만 생각하면 매우 쉬워요!
console.log(nums);  // 출력: [1, 2]

nums = [];  // 에러: 'nums'는 const로 선언되었으므로 다시 할당될 수 없어요!

readonly

  • 앞의 두 키워는 JS 에서 많이 사용되는 키워드지만 readonly 는 TS 에서 등장한 키워드
  • readonly 는 TS 에서 객체의 속성을 불면으로 만드는데 사용되는 키워드
  • 즉, 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만듬
더보기
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 속성이므로 다시 할당할 수 없어요!
  • 클래스의 속성에 const 키워드를 사용할수 없음
  • const 키워드는 일반 변수를 상수화 할때 사용하는것

any

  • TS 에서 any타입은 모든 타입의 슈퍼타입
  • 이는 어떤 타입의 값이든 저장할 수 있다는 의미
  • JS 에서 object 타입과 같은 최상위 타입
더보기
let anything: any;
anything = 5; // 최초에는 숫자를 넣었지만
anything = 'Hello'; // 문자열도 들어가고요
anything = { id: 1, name: 'John' }; // JSON도 들어가네요
  • TS를 사용하는 주된 이유는 프로그램의 타입 안정성을 확보하는것인대, any타입은 목적과 상반됨
  • 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 = unknwonValue as string; 코드를 Type Assertion(타입 단언) 이라고 함
  • unknown 타입의 변수를 다른 곳에서 사용하려면 타입 단언을 통해, 타입 보장을 하여 사용 할수 있음
let unknownValue: unknown = '나는 문자열이지롱!';
let stringValue: string;

if (typeof unknownValue === 'string') {
  stringValue = unknownValue;
  console.log('unknownValue는 문자열이네요~');
} else {
  console.log('unknownValue는 문자열이 아니었습니다~');
}
  • 타입 단언 외에도 typeof 키워드를 사용하여 타입 체크를 미리한 후 unknown 타입의 변수를 string 타입의 변수에 할당할 수 있음

 

union

  • union은 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용
  • unknown 타입이 재할당이 일어나지 않으면 안정성이 보장이 되지 않은 타입이니
    그럴 경우를 대비해 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);