[타입 스크립트] 기본 개념 정리

타입 스크립트 기본 개념 정리

---

타입과 문자열

• let 선언자

let 선언자가 나오게 된 이유? 호이스팅 문제 발생 때문

(호이스팅 : 지역 스코프에 선언된 변수가 전역 스코프에 선언된 변수에 영향을 미치는 현상)

호이스팅이 발생하는 예시

var emotion="happy";
{
    var emotion="sad";
}

console.log(emotion);

실행결과
sad

코드를 보면 emotion 변수가 2번 선언되어 있다.

첫번째 emotion은 전역 스코프, 두번째 emotion은 지역 스코프에 선언되어있는 모습이다.

전역에서 설정되어 있는 happy가 출력되어야 맞지만, 실행결과는 지역 스코프의 sad가 출력되는데 이것이 전형적인 호이스팅 문제다.

이유 : 지역 스코프에 선언된 emotion이 동일한 이름을 가진 전역 스코프 emotion 변수의 값을 변경해 버린다.

이러한 상황에 필요한 것이 변수가 현재 블록 내에서만 유효 범위를 가질 수 있도록 블록 스코프를 처리해야 한다. 이를 해결하기 위해 ‘let’ 선언자가 탄생했다.

let 사용법

let 변수명: 타입;

호이스팅 문제 해결한 상황

var emotion2 = "sad";
{
    let emotion2:string = "happy";
    console.log(emotion2);
}
console.log(emotion2);

실행결과
happy
sad

다음과 같이 블록 안에서만 유효한 변수를 선언할 때는, let을 사용하도록 하자

• 배열 타입

타입스크립트에서 배열은 다음과 같이 선언한다.

let fruits: string[] = ["banana", "apple", "mango"];

대괄호를 사용해 문자열 배열 타입을 선언한 모습이다. 위 코드는 선언과 할당이 동시에 이루어지는 모습을 볼 수 있다.

이를 분리하고 싶다면? push를 사용하자

let fruits: string[] = [];
fruits.push("banana")
fruits.push("apple")
fruits.push("mango")

제너릭 타입 형식은 아래와 같이 선언한다.

Array<타입>

let num:Array<number> = [1,2,3];

위 코드도 선언과 할당이 동시에 이루어져 있다. push를 사용해 분리가 가능하다.

let num2:Array<number> = new Array<number>();
num2.push(1)
num2.push(2)
num2.push(3)

2차원 배열도 만들 수 있다.

var 변수명: 타입[][];

예제

var Matrix: number[][] = [
    [1,0,0],[0,1,0],[0,0,1]
];

console.log(Matrix[0][0], Matrix[1][1], Matrix[2][2]);

실행결과
1 1 1

2차원 배열에서 첫 번째 인덱스는 행, 두 번째 인덱스는 열을 나타낸다.

다음은 유니언 타입이다. 이는 타입스크립트 1.4부터 추가된 특징이다.

유니언 타입은 2개 이상의 입력된 타입을 하나의 타입으로 정의한다. 예제를 통해 확인해보자

var unionX: string | number = 1;
var unionY: boolean | string = true;

console.log(typeof unionX, unionX);
console.log(typeof unionY, unionY);

실행결과
number 1
boolean true

유니언 타입은 둘 중 하나의 타입만 유효할 때 할당이 이루어진다. 위 코드에서는 1이 숫자 타입이기 때문에 number 타입이 유효되어 실행결과에 출력된다. true도 boolean 타입에 해당한다.

만약 1과 true를 “1”, “true”로 문자열로 나타냈다면, 타입은 string으로 출력된다.

유니언 타입은 메서드의 매개변수 값으로 받을 때 타입을 제약하는 용도로도 사용한다.

function typeCheck(p: string | number): string | number {
    return p;
}

let type = typeCheck(1);
let type2 = typeCheck("1");

console.log(typeof type, type);
console.log(typeof type2, type2);

실행결과
number 1
string 1

위처럼, typeCheck라는 함수를 사용하여 p라는 매개변수로 타입을 넣어두고, 들어온 변수의 타입을 확인한 뒤 유효한 것을 출력시킬 수 있다.

• 문자열 표현

문자열을 표현할 때는 string 타입을 이용해 작은 따옴표나 큰 따옴표 안에 문자열을 입력한다.

1) 연산자 이용

let intro: string = "one = " + String(1) + "\ntwo = " + String(2);
console.log(intro);

실행결과
one = 1
two = 2

2) 백틱(`) 이용

let multi_line: string = `
one = 1
two = 2
`

console.log(multi_line);

실행결과
one = 1
two = 2

3) 표현식 이용

let w: string = "world";
let one: number = 1;
function hi(){
    return "hi";
}

let hello_message: string = `
hello ${w}
1 + ${one} = ${1+1}
${hi()}
`

console.log(hello_message);

실행결과
hello world
1 + 1 = 2
hi

• 디스트럭처링 지원

디스트럭처링은 배열이나 객체에서 데이터를 선택적으로 추출할 수 있는 자바스크립트 표현식이다.

var params = ['happy 동물원', 100];
let [m_name, m_num] = params;

console.log(`
이름 : ${m_name}
만족도 : ${m_num}%
`);

실행결과
이름 : happy 동물원
만족도 : 100%