TS 변수의 기본형과 변수 선언

1. 개요

Angular를 하기 전에 Angular에서 사용하는 TS 에 대한 정리가 먼저 필요할 것이다.

 

무턱대고 시작한 Angular는 개발시간을 오래 걸리게 하고, 디버깅에 혼선만 주기 시작했다.

 

기본적으로 TS를 사용하는 프레임워크이기 때문에 TS를 알아보도록 한다.

 

2. JS ES5와 ES6의 차이

 

ES5와 ES6에서 변수 선언 방식은 각각 다음과 같다

var a = 10; // ES 5
let a = 10; // ES 6

변수 선언 방식과 변수의 타입 지정 등 여러가지가 바뀌었다.

하지만 여전히 ES5의 선언방식을 ES6에서 사용할 수 있다.

 

주의사항은, 이 둘을 혼용했을 때, 디버깅을 어렵게 할 수 있다는 점이다.

 

var로 선언한 변수는 다른 코드블럭에서도 접근이 가능하기 때문에, 변수가 꼬일 수 있다.

 

// var 변수 선언시 극단적인 예시

var a = 0;
for( var i = 0; i<10; i++){
    console.log('outer i : '+ i);
    for( var i = 0; i<10; i++){
    	console.log('inner i : '+ i);
    }
}

console log 결과

outer i : 0
inner i : 0
inner i : 1
inner i : 2
inner i : 3
inner i : 4
inner i : 5
inner i : 6
inner i : 7
inner i : 8
inner i : 9

내부에서 선언된 i와 외부에서 선언된 i가 중복선언되어 발생한 현상이다.

내부에서 선언된 i가 외부에서 선언된 i에 영향을 주기 때문이다.

 

이를 해결하기 위한 방법은 변수를 다르게 사용하는 방법이 유일했지만, ES2015에서는 다음과 같이 간단하게 해결한다.

 

// let 변수 선언시 해결되는 문제점

let a = 0;
for( let i = 0; i<10; i++){
    console.log('outer i : '+ i);
    for( let i = 0; i<10; i++){
    	console.log('inner i : '+ i);
    }
}

let 변수 사용시 이전에 발생했던 문제가 해결되고, 내 외부에 각각 선언된 i에 대해서 간섭이 일어나지 않는다.ㅣ

원래 의도했던대로 inner i 가 0~9까지 10회 출력되고, outer i 는 0~9까지 각 1회씩 출력된다.

 

ES5에서 가장 강력하지만 가장 위험한 기능이었던 변수 선언시 scope에 대한 문제가 해결된 것이다.

 

동일한 변수를 재선언 할 수 없다는 것도 let과 var의 차이이다.

// ES5 

var i = 10; // OK
var i = 100; // OK
var i = true; // OK
var i = '문자열'; // OK

// ES6
let i = 10; // OK
let i = 100; // ERROR
let i = true; // ERROR
let i = '문자열'; // ERROR

3. TS와 JS의 차이

JS의 가장 강력한 부분은 바로 Type에 대한 정의가 없다는 것이다.

가장 강한 장점이면서도 가장 강한 단점이기도 하다.

변수형에 관계없이 모든 변수를 var로 선언할 수 있으며, JS의 런타임에서 각 변수가 어떤 타입인지 판단한다.

 

이 점이 가장 큰 단점으로도 꼽히는 이유는 디버깅의 문제이다.

어떤 변수를 1000이라고 받았을 때, 이 값이 숫자인지 문자인지 판단하는 기준에 따라 처리할지 말지를 정할 수 있다.

기존의 js는 이 변수의 값을 받아서 처리하고, 어떤 타입인지 알아낸 다음 이후의 처리 로직을 태울 수 있다.

하지만, TS에서는 이 변수의 타입이 애초에 잘못들어온다면 에러메시지를 반환하며, 이 때 바로 다른 처리로직을 태울 수 있다.

 

 

4. 변수형

 

let isDone: boolean = false; // boolean 타입 지정
let decimal: number = 6; // 숫자 타입 지정
let hex: number = 0xf00d; // 숫자(16진수) 타입 지정
let binary: number = 0b1010; // 숫자(2진수) 타입 지정
let octal: number = 0o744; // 숫자(8진수) 타입 지정
let color: string = "blue"; // 문자열 타입 지정 ' 또는 " 사용, ' 사용 권장
let fullName: string = `Bob Bobbington`;  // ` 사용시, 내부에 변수 대입 가능. ${변수} 형태로 삽입
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;
let sentence: string = "Hello, my name is " + fullName + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";
    
let list: number[] = [1, 2, 3]; // 배열 선언의 두 가지 방법
let list: Array<number> = [1, 2, 3];

// 튜플 타입 선언
let x: [string, number]; // 각 배열 위치별 타입을 지정하는 것, 이외의 배열요소는 여기 선언한 모든 타입을 가질 수 있다.
// 초기화
x = ["hello", 10]; // 좋아요
// 부정확한 초기화
x = [10, "hello"]; // 오류
console.log(x[0].substr(1)); // 좋아요
console.log(x[1].substr(1)); // 오류, 'number'은 'substr'을 가지고 있지 않습니다. - 디버깅 용이
x[3] = "world"; // 좋아요, 'string'은 'string | number'에 할당될 수 있습니다.

console.log(x[5].toString()); // 좋아요, 'string' 및 'number'에 모두 'toString'이 있습니다.

x[6] = true; // 오류, 'boolean'은 'string | number' 타입이 아닙니다.

num Color {Red, Green, Blue} // 변수 열거
let c: Color = Color.Green;

let notSure: any = 4; // 타입을 지정하지 않기 때문에 어떤 타입이든 올 수 있다.
notSure = "문자열일수도 있다";
notSure = false; // 좋아요, 확실한 boolean

function warnUser(): void { // 어떠한 형태도 반환하지 않는다.
    alert("This is my warning message");
}

// 그 외에도 이러한 변수에 할당할 수 있습니다!
let u: undefined = undefined;
let n: null = null;

 

Never 형의 선언은 조금 더 공부가 필요하다.

// 반환되는 함수에는 연결할 수 없는 end-point가 있어서는 안 됩니다.
function error(message: string): never {
    throw new Error(message);
}

// 추론되는 반환 타입은 절대로 없습니다.
function fail() {
    return error("Something failed");
}

// 반환되는 함수에는 연결할 수 없는 end-point가 있어서는 안 됩니다.
function infiniteLoop(): never {
    while (true) {
    }
}

타입 단언 (Type assertions)

때로는 TypeScript보다 더 많은 값을 알아야 하는 상황에 놓일 수도 있습니다.
일반적으로 이 문제는 일부 엔티티의 타입이 현재 타입보다 더 구체적일 수 있다는 것을 알고 있을 때 발생합니다.

Type assertions 은 컴파일러에게 "나를 믿어, 내가 하고 있는 일을 안다"라고 말하는 방법입니다.
type assertion은 다른 언어의 형 변환(타입캐스팅)과 비슷하지만 특별한 검사나 데이터를 재구성하지는 않습니다.
런타임에 영향을 미치지 않으며 컴파일러에서만 사용됩니다.
TypeScript는 개발자가 필요한 특별한 검사를 수행했다고 가정합니다.

Type assertions은 두 가지 형태를 가집니다.
하나는 "angle-bracket" (꺾쇠괄호) 구문입니다:

let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length;

그리고 다른 하나는 구문은 as 입니다 :

let someValue: any = "this is a string"; let strLength: number = (someValue as string).length;

두 샘플은 동일합니다.
다른 하나를 사용하는 것은 주로 선호도에 따른 선택입니다.
그러나 TypeScript를 JSX와 함께 사용할 때는 as 스타일의 단언만 허용됩니다.