Typescript Basics & Basic Types

목차

• 함수 반환 타입 및 void
• 타입의 기능을 하는 함수
• 함수 타입 및 콜백
• unknown 타입
• never 타입

✧ 함수 반환 타입 및 void

• void는 함수가 그 어떤 것도 return 하지 않을 때 반환 타입으로 지정된다.

function add(n1: number, n2: number) {
  // return의 타입은 명시적으로 작성되지 않았기 때문에 number 타입으로 추론되어 지정된다.
  return n1 + n2;
}

function printResult(num: number): void {
  // printResult 함수는 콘솔에 출력할 뿐이지 그 어떤 것도 return 하고 있지 않기 때문에 void 타입으로 추론되어 지정된다.
  console.log("Result" + num);
}

printResult(add(5, 12)); // 17

✧ 타입의 기능을 하는 함수

function add(n1: number, n2: number) {
  return n1 + n2;
}

function printResult(num: number): void {
  console.log("Result" + num);
}

printResult(add(5, 12)); // 17

let combineValues;
conbineValues = add;

console.log(combineValues(8, 8)); // 16

• 하지만 typescript 입장에서 변수 combineValues는 any 타입이 된다.

function add(n1: number, n2: number) {
  return n1 + n2;
}

function printResult(num: number): void {
  console.log("Result" + num);
}

printResult(add(5, 12)); // 17

let combineValues;

conbineValues = add;
conbineValues = 22; // 컴파일 에러가 나지 않음; 런타임 에러가 발생!

console.log(combineValues(8, 8)); // 16

• 그래서 combineValues에 숫자를 할당해도 타입스크립트는 인지하지 못하고, 컴파일 에러를 내지 않는다. 그러나 런타임에서는 에러가 발생한다! 숫자인 combineValues를 함수로 실행하려 한 명확한 이유가 있기 때문이다. 이런 에러를 방지하려면 combineValues가 함수를 지니게 된다고 '명시' 하면 된다.

function add(n1: number, n2: number) {
  return n1 + n2;
}

function printResult(num: number): void {
  console.log("Result" + num);
}

printResult(add(5, 12)); // 17

let combineValues: Function;

conbineValues = add;
// conbineValues = 22; // 컴파일 에러가 발생!
conbineValues = printResult; // 문제가 있음에도 컴파일 에러가 발생되지 않음!

console.log(combineValues(8, 8)); // 16

• 하지만, combineValues에 해당되지 않는 printResult 함수를 할당해도 컴파일 에러가 발생하지 않는다는 단점이 있다. 이 때문에 함수만 타입으로 지정하는 것이 아니라, 세부적으로 지정해줄 수 있다면 더 좋을 것이다.

let combineValues: () => ;

• Function 타입을 지우고 함수의 매개변수와 반환 값에 관련된 함수를 설명하는 함수로 사용할 수 있도록 arrow function의 형태로 표기한다.

let combineValues: () => number;

• 그리고 호살표의 오른쪽에 원하는 함수의 반환 타입 number를 지정하여 저장할 수 있도록 해준다.

let combineValues: (a: number, b: number) => number;

• 그리고 매개변수를 취하지 않는 any 타입을 거부하기 위해서 해당 타입을 사용하는 함수처럼 매개변수 각각의 타입을 지정하고 number를 반환하도록 작성한다.

function add(n1: number, n2: number) {
  return n1 + n2;
}

function printResult(num: number): void {
  console.log("Result" + num);
}

printResult(add(5, 12)); // 17

let combineValues: (a: number, b: number) => number;

conbineValues = add;
// conbineValues = printResult; // 컴파일 에러가 발생!

console.log(combineValues(8, 8)); // 16

✧ 함수 타입 및 콜백

function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
  const result = n1 + n2;
  cb(result);
}

addAndHandle(10, 20, (result) => {
  console.log(result);
});

• 함수 내에 callback 함수를 전달하면 타입스크립트는 해당 결과가 number가 될 것이라고 추론할 수 있기 때문에 addAndHandle 함수가 받는 매개변수인 result로 어떤 작업이든 할 수 있다.

addAndHandle(10, 20, (result) => {
  console.log(result);
});

• result 매개변수에 number 타입이라고 명시하지 않고도 number로 작업을 수행할 수 있는 이유는 number라는 인수 하나를 callback에서 가져온다고 우리가 명시하였기 때문에

function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
  const result = n1 + n2;
  cb(result);
}

• cb: (num: number) => void 이를 보고 타입스크립트는 result(num)가 number가 될 것임을 추론했기 때문이다. 만약 addAndHandle 함수에서 무언가를 return 하게 된다면 어떨까?

addAndHandle(10, 20, (result) => {
  console.log(result);
  return result;
});

• return result를 입력하면 callback이 무언가를 반환하게 된다. 아무 것도 반환하면 안된다고 명시(void)했음에도 말이다. 그러나 이는 타입스크립트의 실수나 버그가 아니다. 기본적으로 callback 타입에 void를 지정하면여기서 반환할 수 있는 모든 값을 무시하게 되기 때문이다.

function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
  const result = n1 + n2;
  cb(result);
}

• 그래서 addAndHandle 함수에서 매개변수로 받는 콜백함수가 return 타입으로 void를 설정함으로써 아무 작업도 수행하지 않을 것이라고 입력한 것이다.

addAndHandle(10, 20, (result) => {
  console.log(result);
  return result;
});

• 따라서, addAndHandle에서 아무 문제 없이 무언가를 반환할 수 있는데 그 이유는 앞서 설명한 것처럼 addAndHandle 가 받는 매개변수인 callback 함수가 반환되는 값의 타입으로 void를 명확하게 지정하고 있기 때문이다.

cb: (num: number) => void

• 그렇기에 addAndHandle 함수는 값을 반환하는 어떤 작업도 수행하지 않는다.

addAndHandle(10, 20, (result) => {
  console.log(result);
});

✧ unknown 타입

• unknown 타입은 어떤 타입이든 저장이 가능하지만 any 타입과 다르게 작동한다.

✧ unknown 타입일 때

let userInput: unknown; // 어떤 타입이든 저장이 가능하다.
let userName: string;

userInput = 5;
userInput = "Max";

userName = userInput; // 컴파일 error 발생!!!

✧ any 타입일 때

let userInput: any; // 어떤 타입이든 저장이 가능하다.
let userName: string;

userInput = 5;
userInput = "Max";

userName = userInput; // 정상 작동 된다

• any는 타입스크립트에서 아주 유연한 타입이고, 덕분에 타입 확인을 수행하지 않도록 하기 때문에 컴파일 에러가 발생하지 않는다. 반면 unknown 타입은 any 보다 조금 더 제한적이라는 특징을 갖는다.

let userInput: unknown; // 어떤 타입이든 저장이 가능하다.
let userName: string;

userInput = 5;
userInput = "Max";

userName = userInput; // 컴파일 error 발생!!!

• unknown을 사용하는 경우, userInput에 현재 저장된 타입을 확인해야 문자열을 원하는 변수 userName에 할당할 수 있다.

let userInput: unknown; // 어떤 타입이든 저장이 가능하다.
let userName: string;

userInput = 5;
userInput = "Max";

if (typeof userInput === "string") {
}

• 따라서 문자열이 필요하면 if 문을 만들어서 typeof userInput을 입력하고 문자열과 같은지 추가적으로 확인을 해준다. 그러면 타입스크립트는 이 확인 작업을 감지하고, 이 라인에 userName을 저장했다는 걸 이해하게 된다.

let userInput: unknown; // 어떤 타입이든 저장이 가능하다.
let userName: string;

userInput = 5;
userInput = "Max";

if (typeof userInput === "string") {
  userName = userInput;
}

• if 문에서 userInput이 문자열 타입이라고 설정했기 대문에 userInput은 문자열 타입이 되고, 그렇기 때문에 userName이 문제 없이 할당되는 것이다. 따라서 추가적인 타입 검사가 필요하다. unknown 타입은 unknown을 사용해서 unknown 값을 고정된 값에 할당할 수 있으므로, unknown이 모든 타입 확인을 무시하는any타입 보다 훨씬 낫다. 어떤 타입을 저장할지 아직 알 수 없지만, 추가적인 검사를 추가하여 어떤 작업을 수행할지 명시함으로써 문자열로 작업을 하려는 경우 문자열을 저장할 수 있다. unknown 타입은 매번 사용할만한 타입이라 말하긴 곤란하지만, 앞서 말한 이런 경우에 따라 any 타입을 사용하는 대신 선택하는 게 훨씬 더 나을 수도 있다.

✧ never 타입

• never 타입은 함수가 반환할 수 있는 타입이다.

function generateError(message: string, code: number) {
  throw ;
}

• 먼저 generateError 함수 내부에서 에러가 넘어가도록(throw) 할 것이다. throw는 에러 객체를 생성하여 넘기는 유틸리티 함수다. 자바스크립트에서와 마찬가지로 객체를 넘길 수 있다.

function generateError(message: string, code: number) {
  throw {};
}

• 즉, 객체나 값을 에러로서 넘길 수가 있는데, 여기에 message 매개변수 인수 값을 저장하는 message 속성을 가져와야 한다.

function generateError(message: string, code: number) {
  throw { message: message, errorCode: code };
}

• errorCode 속성 역시 입력하고, 매개변수 code 를 저장할 수 있도록 한다.

function generateError(message: string, code: number) {
  throw { message: message, errorCode: code };
}

generateError("An error occurred!", 500);

• 이제 함수를 호출하여, '에러가 발생했다' 라는 메세지를 호출하고, errorCode 500을 매개변수로 넘겨준다.

• 개발자 도구 콘솔을 확인해보면, 우리가 넘겨준 에러가 출력되는 걸 알 수 있다. 규모가 큰 어플리케이션에서는 이와 같은 유틸리티 함수를 사용하지는 않는 것이 일반적이지는 않을 것이다. 그런 규모가 큰 어플리케이션에 직접 여러개의 에러를 발생시키는 경우는 없기 때문이다. 아무튼, generateError 함수의 흥미로운 점은 void 처럼 void를 반환하는 게 아니라는 것이다. 그리고 실제로도 에러를 띄우고 있다. 물론 void 가 반환되도록 명시할 수도 있다. 아무 것도 반환하지 않기 때문이다.

function generateError(message: string, code: number): void {
  throw { message: message, errorCode: code };
}

• 하지만 generateError 함수는 단순히 void처럼 아무 것도 반환하지 않는 것은 아니다. 더 정확하게 이야기하자면 해당 함수는 never를 반환하며 반환 값을 생성하지 않는다. 반환 값을 복원하려면 console.log(result)를 입력한 다음에

function generateError(message: string, code: number) {
  throw { message: message, errorCode: code };
}

const result = generateError("An error occurred!", 500);
console.log(result);

• 코드를 컴파일하고 실행하면 log가 정의되지 않는다. 넘어간(throw) 에러가 스크립트와 충돌하기도 하므로 스크립트가 취소되기 때문이다. 이 블록을 감싸고 try catch를 입력하여 스크립트를 계속 진행할 수도 있지만 generateError 함수는 기본적으로 절대로(never) 값을 생성하지 않는다. 또한 try catch를 사용하면 해당 함수가 항상 스크립트나 스크립트의 일부와 충돌하기 때문에 아무것도 반환하지 않는다. 따라서 해당 함수의 반환 타입은 void 뿐만 아니라, never도 가능하다.

function generateError(message: string, code: number): never {
  throw { message: message, errorCode: code };
}

generateError("An error occurred!", 500);

정리

• 흥미로운 점은 해당 함수에 never를 명시적으로 타입지정을 하지 않고 해당 부근에 마우스 커서를 올리면 void가 자동으로 추론된다는 것인데 이는 never가 새로운 유형이 아니기 때문이다. 그러니까 오래 전부터 never는 사용되었지만 타입스크립트의 초기 버전부터 사용되진 않았기 때문에 아직 반영이 되지 않는 것이란 뜻이다. 그러나 never가 아무것도 반환하지 않는다는 것을 확실히 하기 위해 never를 명시적으로 설정할 수 있다. 이런 작업을 수행함으로써 코드 품질의 관점에서 의도를 더 분명히 할 수 있으며, void의 대체 타입으로 사용하기에 적절하다. 그러니까 never 타입을 반환하는 함수는 아무것도 반환하지 않으며, 기본적으로 스크립트나 스크립트의 일부를 충돌시키거나 망가트리기 위한 것임을 코드를 읽는 개발자 역시 빠르게 이해시킬 수 있게 되는 것이다.

✦ 출처

---

🚨 해당 포스팅은 Udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기