2. 타입스크립트의 연산자

연산자

기본 연산자

산술 연산자

타입스크립트는 자바스크립트와 동일한 산술 연산자를 지원한다. 산술 연산자라 함은 사칙연산과 나머지를 구하는 % 그리고 지수연산의 **가 있다. 단 지수연산의 경우 ES7의 문법이기에 이전 버전으로 컴파일 하게 되면 MATH.pow()메소드로 변환된다.

자바스크립트의 산술연산의 특징으로 암묵적 타입 변환을 통한 산술연산이 있다. 예를 들어

1+"people";
true + 2;
"2"+true
10/"5"

위와 같은 서로 다른 타입간의 산술연산을 실행하면 자바스크립트가 암묵적으로 피연산자의 타입을 바꿔서 계산해버린다. 하지만 타입을 중시하는 타입스크립트에서 이게 허용될 리가 없다. 서로 다른 피연산자들 간의 산술연산시 타입스크립트가 오류를 던져 줌으로 암묵적인 타입 변환을 막고 연산의 안전성을 높인다.

비교, 논리, 조건 연산자

타입스크립트에서 조건문에 사용할 수 있는 연산자는 비교, 논리, 조건 연산자가 있다.

• 비교 연산자

비교연산자의 기호는 ==,===, >< 등 이 있다. 자바스크립트의 경우 비교하는 피연산자의 타입이 달라도 연산이 가능했다. 예를 들어

1===true;
1==true;
"4">3;

이 같이 서로 다른 타입간의 비교가 가능했다. 하지만 우리의 타입스크립트는 이런 연산을 하면 오류를 던져준다. 연산의 타입 안전성을 위함이며 때문에 타입스크립트는 서로 같은 타입의 피연산자만 연산을 허용한다.

• 논리연산자

논리연산자는 비교연산자와 다르게 피연산자끼리 타입이 일치하지 않아도 된다. 논리연산자의 기호로는 &&와 ||,!가 있다. 각각 and와 or, 부정의 의미로 &&는 좌우의 피연산자가 모두 참일 때 참을 반환하고, ||연산자는 두 피연산자 중 하나 이상이 참이라면 참을 반환한다. !의 경우 오른쪽에 오는 피연산자의 boolean타입을 뒤집어서 반환한다.

• 조건연산자

조건연산자는 3항 조건 연산자로 형식은 다음과 같다.

조건 ? 참일 경우 실행할 표현식: 거짓일 경우 실행할 표현식

이때 조건의 결과는 true혹은 false여야한다.

• falsy truthy, 부정연산자

true,false는 그 참, 거짓이 명확하다. 하지만 true나 false가 아님에도 true, false로 인정되는 경우가 있다.

1  - true
0  - false
""  - false
"정답"  - true

숫자의 경우 0은 false로 평가되고, 0을 제외한 나머지는 true로 평가된다. 문자열의 경우도 빈 문자열은 false로 평가되고 그 외는 true로 평가된다. 이런 숫자, 문자열의 타입변환을 이용한 불린 판단은 자명하지 않기 때문에 Boolean()메소드를 이용하여 변환해준다.

부정 연산자의 경우 위에서 본 평가의 반대 값으로 평가된다.

디스트럭처링(비구조화)

타입스크립트는 ES6의 비구조화 할당을 지원한다. 비구조화에는 객체 비구조화, 배열 비구조화 할당이 존재한다.

객체 디스트럭처링

객체 디스트럭처링은 객체 리터럴에서 키에 대응하는 값을 추출하여 변수로 할당하는 데 유용하게 사용된다. 이렇게 객체의 키에 해당하는 값을 할당해주는 것을 디스트럭처링 할당이라 한다.

let {name,age} = {name:"백승일",age:26};
console.log(name,age) //"백승일" 26

이처럼 객체의 키에 해당하는 값을 변수로 만들어 준다. 이때 변수 명을 키값이 아닌 다른 값으로 바꿀 수도 있다.

let {name:namae,age:chunchu} = {name:"백승일",age:26};
console.log(namae,chunch) //"백승일" 26

디스트 럭처링 할당할 때 할당 하는 객체에 없는 값을 같이 변수로 선언할수 있다.

let {name,age,game="monsterHunter"} = {name:"백승일",age:26};
console.log(name,age,game) //"백승일" 26 "monsterHunter
"

• 매개변수의 디스트럭처링
  함수를 호출할 때 매개변수에 객체를 전달 할 수 있다. 그리고 타입 안전성을 위해서 객체 요소의 타입을 검사하는 일은 생각보다 귀찮다. 이를 디스트럭처링 할당을 통해서 보다 편하게 할 수 있다.

function check({name,age=0}){}
check({name="백승일"})

위 처럼 할당 받는 변수가 2개인데 전달한 객체에는 1개의 요소밖에 없을 때, age를 숫자로 예상하고 코드를 짜면 분명 타입에러가 난다. 이를 방지하기 위해서 기본값을 설정해 줄 수 있다.

• 객체 디스트럭처링의 타입
  객체 디스트럭처링 시에 type키워드를 통해서 매개변수의 타입을 선언할 수 있다.

type parms = {name:string, age?:number}
function check({name,age=0}:parms) :void{}
check({name="백승일"})

age의 경우 전달 받지 못할 경우를 대비해 선택연산자로 선언한다.

배열 디스트럭처링

객체 디스트럭처링은 대응하는 키값으로 했다면 배열 디스트럭처링은 인덱스를 이용한다.

let info = ["백승일",26,"fifa4"];
const [name,age,game] = info;
const [,,what] = info
console.log(name,age,what) //"백승일" 26 fifa4

• 매개변수를 배열 디스트럭처링으로 전달

배열 디스트럭처링을 이용하면 함수의 파라미터로 배열을 전달할 때 그 요소를 쉽게 사용할 수 있다.

let info = ["백승일",26,"fifa4"];
function test([first,second]:[string,string]){
	console.log(first,second);
}
test([수학,과학]); /// 수학,과학

전개연산자(스프레드 문법)

타입스크립트는 ES6의 전개연산자를 지원한다. 전개 연산자는 '...'로 좀 아련해 보인다. 이 전개 연산자는 보통 다음과 같은 경우에 사용한다.

• 나머지 매개변수 선언
• 배열요소 확장 및 복사
• 객체요소 확장 및 복사

나머지 매개변수에 대해서는 나중에 다시 알아보고 일단 배열과 객체를 살펴보자

전개 연산자를 배열에서 사용하기

배열의 확장이나 복사를 위해서 전개 연산자를 사용한다고 했다. 예시를 봐보자

let info :[string,number,string]= ["백승일",26,"fifa4"];
let progile:string[] = ["frontend","silence"];
let copyInfo = [...info]; //복사
let addInfoProfile = [...info,...profile] // 합치기 순서보장
let [name,...rest]:[string,number,string] = info; //rest = [26,fifa4]

전개 연산자를 객체에서 사용하기

객체의 확장이나 복사를 할 때 사용한다고 했다. 예시를 봐보자

let info = {name:"백승일",age:26,game:"fifa4"};
let copyInfo = {...info}
let moreInfo = {...info,food:"strowbarry"}; //확장
let fixMoreInfo ={...moreInfo,age:27}; //수정

let {name,...rest} = info; // "백승일" {age:26,game:"fifa4"}