TypeScript 강의 (5) ( const, readonly, any, unknown, union )

내일배움캠프 스파르타 코딩클럽

 

[ const, readonly ]

 

1. let

 - let 키워드를 사용하여 선언하면 변수가 된다.

 - 변수는 값을 변경할 수 있다.

 

2. 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로 선언되었으므로 다시 할당될 수 없다.

그러나 위와같이 = 연산자를 통한 재할당이 아닌 데이터를 추가/삭제 하는 변동적인 부분에는 문제가 없다.

쉽게 = 연산자 기준으로만 생각하면 된다. ( 요약 : 값자체의 근원을 바꿀수는 없지만 내부적인 변동 가능 )

 

3. readonly

 - 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 속성이므로 재 할당할 수 없다.

 

---

[ any, unknown, union ]

 

시작하기에 앞서..

어쩔 수 없이 가변적인 타입의 데이터를 저장하고 싶다면 any를 쓰기보다는 unknown을 사용

그리고 가변적인 타입을 일일이 정의할 수 있다면 union 타입 사용이 가장 낫다.

 

1. any 타입

 - TypeScript 에서 any 타입은 모든 타입의 슈퍼 타입이다.

 - 이는 어떤 값이든 저장할 수 있다는 의미

 - JavaScript 의 object 타입과 같은 최상위 타입이라고 생각하면 된다.

   (

     1. JavaScript 몇 가지 기본타입 :

       - undefined, null, boolean, number, string, symbol, bigint

       - object : 

         object 타입은 다음과 같은 여러 종류의 값을 포함한다.

         1. 객체 리터럴: { }

            let person = { name: "John", age: 30 };

         2. 배열: [ ]

            let arr = [1, 2, 3];

         3. 함수: function() {}

            function greet() { console.log("Hello"); }

         4. null: 특별히 비어 있는 객체를 나타냄

            let emptyValue = null;

         5. Date 객체, RegExp 객체, Error 객체 등

         6. 예시 :

let obj: object;

obj = { name: "John" };   // OK
obj = [1, 2, 3];          // OK
obj = () => {};           // OK
obj = "string";           // Error: string은 object 타입이 아님

    )

 - 예시 :

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

 

2. unknown 타입

 - unknown 타입은 any  타입과 비슷한 역할을 하지만 더 안전한 방식으로 동작한다.

 - unknwon 타입의 변수에도 모든 타입의 값을 저장할 수 있다.

 - 하지만, 그 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 한다.

 - 예시 : 

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

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

1. stringValue = unknownValue as stirng; 코드를 Type Assertion(타입 단언)이라고 한다.

2. unknown 타입 변수를 다른 곳에서 사용하려면 타입 단언을 통해 타입 보장을 하여 사용할 수 있다.

let unknownValue: unknown = '나는 문자열!';
let stirngValue: string;

// 위 예시와 다르게
if (typeof unknownValue === 'string') { // unknownValue 가 string 만 들어오게 보장한 if 문
  stirngValue = unknownValue;
  console.log('unknownValue는 문자열');
} else {
  console.log('unknownValue는 문자열이 아님);
}

1. 타입 단언만이 답은 아니다.

2. typeof 키워드를 이용하여 타입 체크를 미리한 후 unknown 타입의 변수를 string 타입의 변수에 할당할 수 있다.

 

3. union 타입

 - unknown 의 한계 :

  1. unknown 타입이 그나마 재할당을 할 때 타입 체크가 되어서 안전함을 보장한다.

  2. 하지만, unknown 타입도 결국 재할당이 일어나지 않으면 타입 안전성이 보장이 되지 않는다.

 

 - union :

  1. 이럴 때를 위해 union 타입이라는 것이 사용된다.

  2. union 은 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용된다.

  3. union 은 | 연산자를 사용하여 여러 타입을 결합하여 표현한다.

  4. 예시 :

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

function processValue(value: StringOrNumber) {
  if (typeof value === 'string') {
    // value 는 여기서 string 타입으로 간주된다.
    console.log('Stirng value:', value);
  } else if (typeof value === 'number') {
    // value 는 여기서 number 타입으로 간주된다.
    console.log('Number value:', value);
  }
}

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

// Stirng value: Hello
// Number value: 42

 

잊지 말아야 할 것

 - TypeScript 를 쓰면서 여러 타입을 하나의 변수로 해결하겠다는 생각은 가급적 지양

 - 이런 사소한 습관들이 여러분들의 코드의 안정성을 높이고 유지 보수성을 개선할 수 있다는 것을 명심!