타입스크립트
17 minutes read (About 2608 words)

typescript chapter5. 연산자

연산자

산술 연산자

타입스크립트는 자바스크립트와 동일한 산술 연산자를 지원한다.
더하기, 빼기, 곱하기, 나누기, 나머지 연산자(%)와 타입스크립트는 지수 연산자인 **을 지원하므로 Math.pow를 대체해 사용 가능하다.

1
2
console.log(1 + "happy"); //1happy
console.log(10 ** 3); //지수 연산자 1000

**은 타입스크립트에만 있는 지수 연산자이므로 js로 컴파일시 Math.pow로 컴파일된다.

위 코드를 컴파일 시
1
2
console.log(1 + "happy"); // 숫자 + 문자 = 문자
console.log(Math.pow(10, 3));

타입스크립트에서는 더하기 연산자를 허용하지 않는 예외 사항이 있다.

  • number + boolean 값 연산시의 오류
1
2
3
4
5
6
1 + false; // Operator '+' cannot be applied to types 'number' and 'boolean'.ts

// 번외로 다른 연산자를 넣었을 경우
false * false;
// The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2363)
// 산술 연산의 오른쪽은 'any', 'number', 'bigint'또는 enum 유형이어야합니다 .ts (2363)

js에서는 fasle를 0으로 인식하여 1로 출력하지만 타입스크립트에서는 타입 오류라고 판별한다.

  • boolean + boolean 값 연산시의 오류
1
false + false; //Operator '+' cannot be applied to types 'boolean' and 'boolean'.ts

마찬가지로 false 를 0으로 인식하지 않으므로 불리언 값끼리의 연산에도 타입 오류가 발생한다.

또한, 문자열 타입의 숫자를 연산식에 사용할 수 없다.

js에서 문자열 타입의 숫자 연산시
1
2
console.log(10 / "2"); // 5
console.log(10 - "2"); // 8

자바스크립트에서는 위 식은 정상적으로 실행되지만, 타입스크립트에서는 타입 오류가 발생한다.

ts에서 문자열 타입의 숫자 연산시
1
2
3
console.log(10 / "2");
console.log(10 - "2");
// The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

비교, 논리, 조건 연산자

타입스크립트에서 조건문에 사용할 수 있는 연산자는 크게 세 부류가 있다.

  • 비교 연산자
  • 논리 연산자
  • 조건 연산자
  • 비교 연산자

    자바스크립트에서는 피 연산자 간에 타입이 달라도 비교 할수 있다.
    타입스크립트에서는 피 연산자 간에 타입이 다르면 연산을 허용하지 않는다.

피연산자간의 타입이 다를때 비교
1
2
3
4
1 === true;
0 === false;
// this condition will always return 'false' since the types 'number' and 'boolean' have no overlap.ts(2367)
// 'number'와 'boolean'유형이 겹치지 않으므로이 조건은 항상 'false'를 반환합니다 .ts (2367)

타입스크립트는 true === false와 같이 타입이 같은 피 연산자간의 비교만 허용한다.
또한 , 타입스크립트는 ==보다 ===를, != 보다 !==를 권장한다. 자바스크립트로 컴파일 한 이후에도 타입 안정성을 보장 할 수 있기 때문이다.

  • 논리 연산자

    논리 연산자는 &&, ||, ! 세가지가 있다.
    비교 연산자와 달리 피 연산자 간의 타입이 일치하지 않아도 된다.

1
2
3
console.log(1 && true); // true
console.log(true || false); // true
console.log(!true); // false

&& : 피 연산자가 모두 참일 때 참이라는 의미
|| : 피 연산자 가운데 하나라도 참이면 참이라는 의미
! : 부정 연산자 !true === false

  • 조건 연산자 (?:)

    피 연산자 3개를 이용하는 삼항 연산자이다.
    판별조건 ? true일때 실행하는 표현식 : false일때 실행하는 표현식

불리언 타입과 부정 연산자

  • 불리언 타입(true/false)

    타압스크립트에서는 상황에 따라 타입 변환이 발생해 true 인지 false인지 명확하지 않을 때가 있다.
    입력값이 숫자, 문자일 때 발생한다.

입력값이 숫자일 때, 예를 들어 1의 타입은 number이지만

1
2
if (1) {
}

위처럼 숫자 1이 조건문에 들어가면 타입 변환이 일어나 true가 된다. 1 , -1모두 true이다.
다만 0은 false가 된다.

입력값이 문자일 때 에를 들어 “abc”의 타입은 string이지만 boolean 타입으로 변환하면 true가 된다.
다만 빈 문자열 “”는 false가 된다.

Boolean 메서드를 이용하면 입력값에 따라 불리언 타입으로 변환할 수 있다.

1
2
3
4
5
console.log(Boolean(-1)); // true
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean("ab")); // true
  • 부정 연산자

    값이 문자열, 숫자, 불리언이냐에 따라 다른 결과가 출력된다.

1
2
3
console.log("hello", !"hello", !!"hello", !""); // "hello", false , true , true
console.log(1, !1, !!1, !0, !!0); //1 false true true false
console.log(!true, !false, !!true); //false true true

문자열 “hello”에 부정 연산자를 사용하면 “hello”자체가 조건문에서는 true가 되므로 !true === false가 된다.
부정 연산자를 두번쓰면(!!) 부정의 부정이므로 참이 된다.

디스트럭처링

타입스크립트는 ES6의 디스트럭처링(destructuring)을 지원한다. 객체의 구조(structure)을 제거(de)한다는 의미가 있다.
객체의 구조를 분해 후 할당, 확장과 같은 연산을 수행하는 것을 말한다.
배열 디스트럭처링과 객체 디스트럭처링 이 있다.

객체 디스트럭처링

객체 디스트럭처링은 객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당할 때 유용하며,
객체의 속성값을 변수에 할당하는 것을 디스트럭처링 할당이라고 한다.

  1. 할당 표현식은 {id,myName} 으로 표현한다. 할당 시에 id와 myName은 객체의 속성값(0,”lee”)에 대응한다.
디스트럭처링 할당
1
2
3
4
let { id, myName } = { id: 0, myName: "lee" };

console.log(id); // 0
console.log(myName); // "lee"
  1. 디스트럭처링 할당 시에 할당 받을 속성이 없다면 표현식에 새롭게 정의한 변수를 선언해 초기화 할 수 있다.
1
2
3
4
let { id, myName = "kim" } = { id: 0 };

console.log(id); // 0
console.log(myName); // "kim"
  1. 속성 재명명을 이용해 할당할 객체 속성에 새로운 이름을 부여 할 수 있다.
1
2
3
4
let { id: name1, myName: name2 } = { id: 0, myName: "lee" };

console.log(name1); // 0
console.log(name2); // "lee"

디스트럭처링 매개변수 선언

함수 호출 시에 객체 리터럴을 전달하고 속성을 검사하려면

함수의 매개변수의 속성 검사 시
1
2
3
4
5
6
7
8
9
10
11
12
function profile(obj) {
  var name = "";
  var jobs = "";

  name = obj.name === undefined ? "no name" : obj.name;
  jobs = obj.jobs === undefined ? "no jobs" : obj.jobs;

  console.log(name); // lee
  console.log(jobs); // no jobs
}

profile({ name: "lee" });

이런식으로 속성을 검사하기 위한 코드가 계속 발생하게 된다.
객체의 특정 속성이 있는지 없는지를 타입에서 검사하고 없으면 기본값을 할당 할 수 있도록 함수의 매개변수에 디스트럭처링 매개변수를 선언 할 수 있다.

함수의 매개변수로 객체 디스트럭처링을 사용한 경우
1
2
3
4
5
6
function profile({ name = "no name", jobs = "no jobs" }) {
  console.log(name); // lee
  console.log(jobs); // no jobs
}

profile({ name: "lee" });

객체 디스트럭처링 시 type 키워드 활용

type 키워드를 이용해 매개변수에 타입을 선언함으로써 객체 디스트럭처링을 할 수 있다.

1
2
3
4
5
6
7
8
9
type C = { a?: string; b: number };

function func({ a, b }: C): void {
  console.log(a, b);
}
func({ a: "abc", b: "def" }); // (property) b?: number
func({ a: "abc", b: 0 }); // "abc" , 10
func({ b: 0 }); // "abc"
func({ a: "def" }); //Argument of type '{ a: string; }' is not assignable to parameter of type 'C'.

객체 디스트럭처링을 수행시 매개변수 a,b에 타입을 미리 정의한 타입 변수 C를 이용한다.
a?는 string 타입이고 ?(선택연산자)로 선언했으므로 생략 가능하다. b는 number 타입이고 생략 불가능하다.

배열 디스트럭처링

배열 디스트럭처링은 배열 요소를 간결한 방법으로 변수에 할당하는 방법을 제공한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 0. 배열 디스트럭처링을 활용하지 않을 때
let numbers = [1, 2, 3, 4, 5];
// let num1 = numbers[0]; // 1;

// 1. 배열 디스트럭처링을 활용할 때
let [num1, num2] = numbers;

console.log(num1); // 1
console.log(num2); // 2

// 2. 배열의 3번째, 4번째 요소를 변수에 할당할 때
// 앞의 요소는 쉼표로 건너 뛴다.
let [, , num3, num4] = numbers;

console.log(num3); // 3
console.log(num4); // 4

// 3. 값을 교환할 때
[num3, num4] = [num4, num3];

console.log(num3); // 4
console.log(num4); // 3

// 4. 기본값을 지정할 수 있다.

let [color1, color2 = "red"] = ["black"];
console.log(color1); // "black"
console.log(color2); // "red"

배열 요소를 함수의 디스트럭처링 매개변수로 전달

배열 디스트럭처링을 이용하면 함수에 배열을 전달할 때 배열 요소를 디스트럭처링 매개변수로 전달 할 수 있다.

1
2
3
4
5
6
function func([a, b]: [number, string]) {
  console.log(a); // 1
  console.log(b); // "hi"
}

func([1, "hi"]);

전개 연산자

타입스크립트는 ES6의 전개연산자(…)를 지원한다. 전개 연산자는 다음과 같을때 사용한다.

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

  • 나머지 매개변수를 선언
    뒷장에서 설명

  • 배열 요소 확장
    배열 합치기와 배열 디스트럭처링 할 때 사용한다.

  • 객체 요소 확장
    객체 합치기와 객체 디스트럭처링 할 때 사용

전개 연산자를 이용한 배열 요소 확장

  • 전개 연산자를 이용해 배열을 합칠 수 있다.
배열 합치기
1
2
3
4
5
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
let arr3 = [4, ...arr1, 5];
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
console.log(arr3); // [ 4, 1, 2, 3, 5 ]

전개 연산자를 이용하면 간단히 배열을 합칠 수 있고 원하는 위치에 배열 요소를 전개할 수 있다.

  • 할당받는 변수에 전개 연산자를 사용하면 나머지 요소를 배열로 받을 수 있다.(배열 디스트럭처링)
배열 디스트럭처링
1
2
3
4
5
let [first, ...rest]: [number, number, number] = [10, 20, 30];

console.log(first); // 10
console.log(rest); // [20,30]
console.log(rest[0]); // 20

전개 연산자를 이용한 객체 요소 확장

  • 객체 합치기를 수행할 때 전개 연산자를 이용해 합칠 수 있다.
1
2
3
4
let obj1 = { c: 3, d: 4 };
let obj2 = { a: 1, b: 2, ...obj1, e: 5 };

console.log(obj2); // { a: 1, b: 2, c: 3, d: 4, e: 5 }
  • 객체 디스트럭처링에서 전개 연산자 사용
1
2
3
4
5
let group = { a: 1, b: 2, c: 3 };

let { b, ...rest } = group;
console.log(b); // 2
console.log(rest); // { a: 1, c: 3 }

위 코드 속성 rest에 전개 연산자가 사용되었으므로 rest는 rest 속성(나머지)가 된다. b속성을 제외한 나머지에 해당하는 객체를 받게 된다.

typescript chapter6. 함수
typescript chapter4. 제어문

Comentarios

Categorias

Nube de etiquetas

const for git세팅 if let map set var 배열 스코프 이터레이터 인스턴스 제너레이터 제어문 클래스 클로저 프로퍼티
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×