타입스크립트 3일차 - 연산자

연산자

타입스크립트는 자바스크립트의 최신 연산자를 기반으로 객체나 배열을 더욱 쉽게 다룰 수 있습니다.

산술연산자

기본적으로 가감승제(+-*/)와 나머지(%)는 기본적으로 지원합니다.
거기에 ES7에서 추가된 지수연산자인 **이 추가되서 Math.pow()를 대체해 사용할 수 있습니다.

지수연산자만 한번 사용해볼까요?

새로운 지수연산자

그리고 타입스크립트에서는 자바스크립트와 다르게 문자열과 불린(boolean)값을 연산할 수 없습니다.
이처럼 엄격한 타입검사로 연산자를 사용할 때 안전성을 높입니다.

비교연산자

자바스크립트와 같습니다. 간단하게 적어본다면

  • a==b : a와 b가 같은 값인지 비교
  • a!=b : a와 b가 값이 다른지 비교
  • a===b : a와 b가 값과 타입이 같은지 비교
  • a!==b : a와 b가 값과 타입이 다른지 비교
  • a > b : a가 b보다 큰지
  • a < b : a가 b보다 작은지
  • a >= b : a가 b보다 크거나 같은지
  • a <= b : a가 b보다 작거나 같은지

JS기준으로 다음과 같습니다만 타입스크립트에서는 조금 다른점이 있습니다.
바로 ==연산자를 사용하여 비교 시 타입이 달라 반드시 false가 나올 경우 오류메시지로 표시합니다.
만약 1과 “1”을 비교했을 경우도 "1"이기 때문에 숫자 1과 비교시에 반드시 틀린것이죠.
즉, 타입스크립트에서는 타입이 다른 피연산자 간에는 비교 연산이 불가능 하다는 것이고 될 수 있으면 ===를 쓰도록 책도 추천하고 Lint도 추천하도 다른 사람들도 추천하고 있습니다.

숫자와 문자열의 ==연산

논리연산자

JS와 같습니다

  • a && b : a와 b가 참이여야 true
  • a || b : a와 b 둘 중하나가 참이면 true
  • !a : a의 반대로 출력(not a)

JS와 사용법도 같고 타입스크립트의 엄격한 타입검사도 사용하지 않습니다.
즉, 타입이 달라도 무리없이 논리연산자의 적용이 가능합니다.

예를 들어

1
2
3
4
5
if (1 && "0") {
console.log('true');
} else {
console.log('false');
}

다음과 같은 조건문이 있다고 하면 값은 true를 떨궈줍니다.
왜냐 라고 물으신다면 JS에서는 변수 단독으로 선택 시 전에 말했듯이 false, undefined, 0 등의 값에서만 false로 인식하기 때문에 해당 조건문에서는 숫자 1(true)과 문자열 0(true)의 값으로 계산하기 되는 것이죠.

조건연산자

말이 조건연산자이지 타 언어에서 삼항연산자로 배웠던 연산자입니다.
사용법만 간단히 알고 넘어가겠습니다.

1
판별 조건 ? 참일때 처리 : 거짓일떄 처리

디스트럭처링

디스트럭처링이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 방법입니다.
말이 어려운데 제생각에는 조금 쉽게 풀어쓰면 속성을 여러개의 변수로 한번에 선언해서 편하게 쓰고 싶다. 정도 될 것 같네요.

JS에서는 크게 객체와 배열의 디스트럭처링으로 나눌 수 있으며 타입스크립트도 같이 쓰고 있습니다.
여기에 추가적으로 타입을 사용하여 안전성을 좀 더 보충해주는 것이죠.

객체 디스트럭처링

객체 디스트럭처링은 객체 리터럴에서 변수명에 대응하는 속성을 추출해 변수로 할당할 때 유용하다고 합니다.
기본적인 JS 사용법은 다음과 같습니다.

1
2
()는 생략가능, []는 1개이상 필요하면 추가생성가능
let { 속성1 (: 새로운변수1)[, 속성2 (: 새로운변수2).....]} = 값을 할당할 객체;

그리고 기본값을 추가가능합니다. 그렇게 된다면 사용법은 다음과 같습니다.

1
let { 속성1 (: 새로운변수1)(= 디폴트값1) [, 속성2 (: 새로운변수2)(= 디폴트값2) .....]} = 값을 할당할 객체;

기본값을 사용하는 식에서 새로운 변수와 디폴트값은 동시에 선언할수도 있고 원하는 것만 하나씩 선언도 가능합니다.

그럼 이제 타입스크립트 답게 타입을 넣어서 해보겠습니다.

1
2
3
4
5
무조건 함수파라미터에만 사용가능합니다.
type C = {a: number, b:string}
function test({ a,b } : C): void{
//TODO
}

배열 디스트럭처링

이번에는 배열의 값을 동시에 쉽게 뽑아 사용할 수 있도록 도와주는 문법입니다.
사용법은 다음과 같습니다.

1
let [변수명1 (= 기본값1), 변수명2 (= 기본값2), 변수명3 (= 기본값3) .....] = 배열객체;

객체가 아니고 배열이기 떄문에 {} 대신 []을 쓰는 것을 잊지마시기 바랍니다.
그리고 이 디스트럭처링을 사용하면 배열 요소를 함수에 파라미터로 쉽게 줄 수 있습니다.

함수 파라미터와 배열 디스트럭처링+타입

전개연산자

타입스크립트는 ES6의 전개연산자인 ...을 지원합니다.
이 연산자는 합치기와 디스트럭처링에서 사용하며 배열과 객체 모두 사용할 수 있습니다.

먼저 배열에서 먼저 전개연산자를 사용해보겠습니다.
아래의 스샷에서 쉽게 확인하실 수 있습니다.

배열의 전개연산자

위의 연산을 보시면 전개연산자를 적용한 arr2는 arr이 뒤로 합쳐진 것을 보실 수 있고 디스트럭처링의 전개연산자에서는 처음 가져가는 first를 제외한 나머지 값을 가지고 있는 것을 볼 수 있습니다.

다음은 객체입니다.

객체의 전개연산자

객체도 마찬가지로 확인이 가능하고 객체의 속성까지 같이 가져가는 것을 볼 수 있습니다.

이것으로 연산자에 대한 설명을 마치고 다음에는 함수로 돌아오겠습니다.