TypeScript 강좌 8. 변수 Union Type과 범위

숫자 또는 문자열로 지정 가능한 변수

// 태어난 연도를 숫자 또는 문자열로 설정

let birthYear: number | string;

// 정상

birthYear = 1980;

// 이것도 정상

birthYear = '천구백팔십';

// 대답하기 싫어서 null을 넣으면 에러

birthYear = null;

// error TS2322: Type 'null' is not assignable to type 'string | number'.

Union Type

다음 타입스크립트 코드는 변수에 들어가는 값을 특정 문자열들로 제한하는 기능입니다. "|"으로 대입 가능한 여러 값을 열거합니다. 이렇게 복수 형태로 취하는 것을 Union Type 형태라고 합니다. 미리 정의되지 않은 문자열을 대입하면 오류입니다.

// 변수에 특정 문자열에서만 설정하는 예시

let favoriteFood: "북극" | "시원한 음식";

favoriteFood = "시원한 아이스크림"

// error TS2322: Type '"시원한 아이스크림"' is not assignable to

//   type '"북극" | "시원한 음식"'.

// number 값도 사용 가능

type PointRate = 8 | 10 | 20;

// 아래는 에러

let point: PointRate = 12;

자료형 형식과 값을 결합할 수도 있습니다.

// 값과 자료형을 함께 선언할 수 있음

let country: number | "고구려" | "발해";

country = "고구려";

country는 number 또는 고구려 또는 발해란 값만 가질 수 있습니다. (... 충격이다 증말 ...)

같은 이름의 변수

아래 타입스크립트 코드를 보면 압니다.

function oldFunction() {

  console.log(`테스트 ${v}`);

  var v = "어린이";

}

oldFunction();

// 새로 선언한: let/const

function letFunction() {

  console.log(`테스트 ${v}`);

  let v = "테스트 문자";

  // error TS2448: Block-scoped variable 'v' used before its declaration.

}

letFunction();

변수의 범위 

이전에는 {, }가 제어 구문용 블록에 지나지 않았고, var 변수는 선언된 function 어디에서나 접근할 수 있었습니다. 타입스크립트에서는 let, const로 선언한 변수 범위는 선언된 블록(if, for 포함)에 한정됩니다. 범위가 좁아지면 파악할 범위가 줄어들어 코드 가독성이 높아집니다.

// 예전 스타일 코드

for (var i = 0; i < 10; i++) {

  // do something

}

console.log(i); // -> 10

// 새로운 스타일 코드

for (let i = 0; i < 10; i++) {

  // do something

}

console.log(i);

// error TS2304: Cannot find name 'i'.

... 미완성 글입니다. ...