TS - TIL(2)

돌리의 하루·2023년 6월 23일
0

void

함수에 리턴값이 없다면, void를 사용하여 작성할 수 있습니다. 이 또한 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수입니다.

let printAnswer = (): void => {
	console.log("YES");
}

매개변수의 개수에 맞춰서 전달인자를 전달해야한다.

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//에러가 납니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

만약 개발자가 전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있습니다. 이는 JavaScript에서의 default parameter와 같은 동작을 합니다.

이때는 뒤의 인자로 undefined를 보내도 값은 “hello, coding kim”으로 반환됩니다.

혹은 선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있습니다.

let greeting = (firstName: string, lastName: string ="kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동합니다. 
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', undefined);

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');
let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동합니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

유니온 타입

둘 이상의 타입을 합쳐서 만든 새로운 타입.
'|'을 이용해서, 자바스크립트의 || 연산자와 같이 'a거나 b이다'라는 의미를 가지고있다.

예를 들어서 아래의 예제는 value의 값이 숫자이냐, 스트링이냐에 따라서 타입이 달라지는걸 볼 수 있다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

유니온 타입 사용 시 유의점

유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야한다.

예를 들어 interface가 Developer, Person이 있고, 공통 프로퍼티인 name이 있다고 가정해보자.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

askSomeone이라는 함수가 있는데, 이 함수는 Developer | Person을 매개변수로 받고있고,
이 두 개의 공통된 프로퍼티인 'name'에만 접근할 수 있다.

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

공통 프로퍼티뿐만 아니라, 나머지 프로퍼티에도 접근하고 싶다면, 타입 가드를 활용해야한다.

아래는 타입 가드에 대한 예시 코드이다.
in연산자를 사용해서 객체의 프로퍼티 이름과 함께 사용, 해당 프로퍼티가 객체 내에 존재하는지의 여부를 검사한다.

function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

유니온 ( | )이 있다면, ( & ) 도 있어야겠지? => 인터섹션 타입

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

type User = Developer & Person;

인터섹션은 Developer, Person 각각에 정의된 속성 모두를 받게된다.
인터섹션으로 단일 타입으로 표현할 수 있기 때문에, 인터섹션은 타입 가드가 필요하지 않다.

그.러.나

인터섹션은 타입 가드는 필요없는 반면 아예 새로운 교집합을 만들어내기 때문에,
전달인자를 전달할 때 모든 프로퍼티를 전부 내보내야한다.

유니온 타입은 타입 가드를 해줘야 전달인자를 전달할 수 있는 것처럼!

밑은 말한 내용의 예제로 참고하면 된다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
	//이런 식으로 프로퍼티에 접근할 수 있습니다.
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

//유니온 타입은 전달인자를 전달할 때 선택지가 생깁니다.
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});

function askSomeone2(someone: Developer & Person) {
	//타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있습니다.
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

//그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없습니다.
askSomeone2({name: '김코딩', skill: '웹 개발', age:20});
profile
진화중인 돌리입니다 :>

0개의 댓글