TypeScript 변수 선언2 - boolean, object, array

안녕하세요. 이번에는 TypeScript의 boolean, object, array에 대한 설명을 하도록 하겠습니다. 

변수	예시	설명	자바스크립트에 존재?
number	3,2,-7,0.4	JavaScript의 모든 숫자(정수,소수)	O
string	"Hello", 'World'	모든 문자열	O
boolean	true, false	참, 거짓	O
object	{ name : "Alex"}	Object(객체)를 지칭함	O
array	[0,1,2,3,4,5]	원소의 변수에 따라 배열의 타입이 정해진다	O
tuple	[0,"Hello], ["World", 1]	고정된 길이와 속성의 배열	X
enum	[APPLE = 0, BANANA=1]	변수명에 따른 식별코드 부여	X

위 표를 볼때 boolean, object, array또한 JavaScript에서 사용할수 있는 변수로 알수 있습니다. 하지만 TypeScript에서 변수 선언을 명확하게 하고 에러를 줄이기 위해서 옆에 변수 속성을 적게 되어있습니다.

let bool : boolean; // 불리언 타입만 넣을수 있음

bool = true;

if(bool === true){

console.log("Hello World");

}

else{

console.log(`bool is ${bool}`);

}

위 코드의 변수 bool은 boolean타입의 값만 입력할수 있습니다. bool값이 true이면 console.log에서 "Hello World"가 출력되고 false시 "bool is false"라고 출력 됩니다.

let bool : boolean; // 불리언 타입만 넣을수 있음

bool = "Alex";

if(bool === true){

console.log("Hello World");

}

else{

console.log(`bool is ${bool}`);

}

하지만 만약 bool에 들어가는 값이 boolean이 아닌 다른 값을 넣을경우 TypeScript에서 경고를 내보냅니다. 

const person : {

name : string;

age : number;

} = {

name : "Alex",

age : 30

}

console.log(person.name);

Object또한 비슷한 방법으로 정의를 할수 있습니다. 위 코드와 같이 ts파일로 작성하면 에러가 발생하지 않습니다.  또한 정상적으로 person에 포함되어 있는 key가 name인 value도 console.log로 출력할수 있습니다. 

const person : object = {

name : "Alex",

age : 30

}

console.log(person.name);

하지만 person에 속성을 object로 지정한다면 console.log부분에서 TypeScript가 경고를 보내게 됩니다. 이는 person이 object로 지정 되어있는데 .name을 찾으라고 하니 오류가 생긴 것입니다.

var person = {

name: "Alex",

age: 30

};

console.log(person.name);

하시만 js파일을 확인하면 문제가 없는 것을 알수 있습니다. 이는 TypeScript의 문법검사에서 오류사항이 걸렸기 때문입니다. 이처럼 JS에 비해 오류의 검사가 강하기 때문에 그만큼 버그의 위험도 줄어듭니다.

let array1 : string[] = ["Hello", "_World"];

console.log(array1[0] + array1[1]);

let array2 : number[]

array2 = [0,1];

for(let i = 0; i < array2.length; i++){

console.log(array2[i]);

}

배열도 number, string과 비슷하게 정의를 할수 있다. 이때 배열의 원소는 지정된 변수 속성만 들어갈수 있다. 

만약 배열에 지정된 변수 속성 외의 변수를 입력하게 되면  위 사진처럼 TypeScript의 문법에 위배가 된다. 그래서 위와 같이 에러 경고가 나타나게 된다. 물론 위 ts파일을 js파일로 컴파일 해도 실행하는데 문제는 없다. 하지만 배열안에 여러 속성의 원소를 넣는 것은 피하는 것이 좋다.