[타입스크립트]Optional - 매개변수, 속성과 메소드, 체이닝, 널 병합 연산자

 ?    키워드를 사용하는 optional!

 

1. 선택적 매개변수(Optional Parameter)

우리는 타입 선언할 때 선택적 매개변수를 지정할 수 있다. 

function add(x: number, y?: number): number {
  return x + (y || 0);
}
const sum = add(2);
console.log(sum);

y를 선택적 매개변수로 두었기 때문에 받은 인자가 없어도 오류가 나지 않음!!

 

 ? 키워드는  | undefined 를 추가한 것과 동일하다!

function add(x: number, y: number | undefined): number {
  return x + (y || 0);
}
const sum = add(2, undefined);
console.log(sum);

 

---

 

2. 선택적 속성과 메소드

 

선택적으로 써주면 위와 동일하게 써주지 않아도 오류가 나지 않는다.

interface IUser {
  name: string,
  age: number,
  isAdult?: boolean
}

let user1: IUser = {
  name: 'Neo',
  age: 123,
  isAdult: true
};

let user2: IUser = {
  name: 'Evan',
  age: 456
};

 

type이나 class에서도 사용이 가능하다

interface IUser {
  name: string,
  age: number,
  isAdult?: boolean,
  validate?(): boolean
}
type TUser = {
  name: string,
  age: number,
  isAdult?: boolean,
  validate?(): boolean
}
abstract class CUser {
  abstract name: string;
  abstract age: number;
  abstract isAdult?: boolean;
  abstract validate?(): boolean;
}

 

 

 

---

3. 체이닝(Chaining)

 ?.  (optional chaining) 연산자는 참조나 기능이  undefined  또는  null 일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.

 

// Error - TS2532: Object is possibly 'undefined'.
function toString(str: string | undefined) {
  return str.toString();
}

// Type Assertion
function toString(str: string | undefined) {
  return (str as string).toString();
}

// Optional Chaining
function toString(str: string | undefined) {
  return str?.toString();
}

 

 

&& 연산자를 사용하여 각 속성의 Nullish 체크(null이나 undefined를 확인) 하는 부분에서 유용!

 

 

---

4. Nullish 병합 연산자(Nullish coalescing operator)

 ??  로 쓰이는 널 병합 연산자는 왼쪽 피연산자가 null  또는 undefined일 때 오른쪽 피연산자를 반환, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 

 

const foo = null ?? 'Hello nullish.';
console.log(foo); // Hello nullish.

const bar = false ?? true;
console.log(bar); // false

const baz = 0 ?? 12;
console.log(baz); // 0

 

 

 

 

 

 

---

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

https://edu.goorm.io/learn/lecture/22106/%ED%95%9C-%EB%88%88%EC%97%90-%EB%B3%B4%EB%8A%94-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/lesson/1042582/%ED%8E%98%EC%9D%B4%EB%8B%9D-chaining

goorm

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish coalescing operator - JavaScript | MDN