1) 함수 타입과 Narrowing

1. Function Type

TypeScript의 함수는 기본적으로 JavaScript 함수와 동일한 방식으로 동작합니다. 다만 TypeScript에서는 함수의 매개변수에 전달받을 값의 타입과 반환할 값의 타입을 명시적으로 지정할 수 있다는 점이 큰 차이점입니다.

ex) Function Type 예시

function greet(name:string): string{
    return name+"님안녕하세요!";
}

---

2. void 타입

함수를 단순히 호출만 하고, 반환(return)시킬 값이 없을 때 사용하는 타입입니다. 함수의 반환형 미작성시 반환형은 void타입으로 지정됩니다.

---

3. Optional Properties(선택속성)

• 함수의 파라미터 중 있어도 되고 없어도 되는 데이터를 표현할 때 사용하는 속성

ex) 회원가입폼 예시

type SignUpForm = {
  name: string; // 필수 
  email: string; // 필수
  profileImageUrl?: string; // 있어도 되고 없어도 됨. ?(선택속성)
};

---

4. Type Narrowing

• Union Type처럼 여러 타입이 혼합된 값이 있을 때, 실제 사용할 하나의 타입으로 좁혀서 타입을 확정짓는 문법

* Type을 Narrowing할 수 있는 연산자들

1) typeof : 변수의 자료형을 반환하는 연산자

function print(value: string | number) {
  if (typeof value === 'string') {
    console.log(value.toUpperCase()); // value는 string으로 좁혀짐
  } else {
    console.log(value.toFixed(2)); // value는 number로 좁혀짐
  }
}

2) in : 객체가 가지고 있는 속성을 검사하는 연산자

type Cat = { meow: () => void };
type Dog = { bark: () => void };

function sound(animal: Cat | Dog) {
  if ('meow' in animal) { 
    animal.meow(); // Cat으로 좁혀짐
  } else {
    animal.bark(); // Dog으로 좁혀짐
  }
}

3) instanceof : 변수가 특정 클래스의 인스턴스인지 확인하는 연산자

class A { a = 1 }
class B { b = 2 }

function check(obj: A | B) {
  if (obj instanceof A) {
    console.log(obj.a); // A로 좁혀짐
  } else {
    console.log(obj.b); // B로 좁혀짐
  }
}

---

5. Type Assertion(타입 단언)

• 개발자가 해당 값의 타입을 확실히 알고 있으므로 특정 타입으로 취급 해달라고 컴파일러에게 "단언"하는 문법

• 실제 자료형을 형변환 시켜주는 개념이 아닌, 컴파일러의 타입검증을 우회하기 위한 기능이다

const strOrNumber: string | number = "12345";
const length = (strOrNumber as number).toFixed(2); // 런타임 에러(형변환x)

• strOrNumber에는 문자열 값이 저장되었지만, 타입단언문으로 number자료형이라고 우기고 있는 상황

• 컴파일 에러는 없앨 수 있으나 런타임시에는 에러가 발생할 수 있다.

• 즉, 타입단언은 실제 타입에 대해 완벽히 파악하고 있는 상황에서만 사용해야 한다.

• ex) HTML에서 DOM선택시

// querySelector로 가져오는 요소는 전부 HTMLElement요소로, 내가 지정한 태그요소로 해석할 수 
// 있게끔 타입단언을 활용한다.
const el = document.querySelector('#myInput') as HTMLInputElement; 
el.value = "Hello";

---

6. 함수 타입 표현식

타입스크립트와 같은 함수형 프로그래밍 언어에서 함수는 값으로써 처리됩니다. 따라서 함수를 변수에 대입할 수 있고 , 파라미터에 매개변수로 넘겨 줄 수도 있으며 함수를 반환 시킬 수도 있습니다. 즉 , 함수는 값이기 때문에 이 값에 대한 타입 또한 정의해 주어야 합니다.

타입스크립트에서 함수의 시그니처를 타입으로 표현하는 문법을 함수 타입 표현식이라고 부릅니다

• 함수의 시그니처?

  • 함수가 가지는 매개변수의 숫자와 자료형, 반환형을 의미

ex) 함수타입표현식 예시

const greet: (name: string) => void;

• 함수의 매개변수와 반환값에 대한 타입을 지정.

---

7. Type Aliases(타입별칭)

Type Aliases는함수표현식이나, 객체타입, 인터페이스 및 Union Type처럼 복잡한 타입들에 별칭을 붙여 가독성과 재사용성을 높여주는 문법입니다.

type PrintFunction = (s: string) => void;
type HelloFunction = (callback: PrintFunction) => void

---

8. Never

• 어떠한 값도 가질 수 없는 타입으로 , 절대 반환되지 않는 함수나 도달할수 없는 코드를 표현할 때 사용한다.

• 예외적인 상황을 명확히 표현하여 , 버그를 예방하는 역할로써 사용한다.

// 예시 1)
function error(message: string): never {
  throw new Error(message); // 함수가 절대 값을 반환하지 않음을 명시. 이 함수 이후 코드가 절대 실행되지 않는 걸 알려줄 수 있음. 
}
// 예시 2)
function infiniteLoop(): never {
  while (true) {
    // 계속 반복 중. return에 도달할 수 없음. 코드상의 에러가 존재하므로 수정 필요.
  }
  return 1
}
// 예시 3) 
type etc = string|number ; // 타입별칭 문법. 나중에배움
function typeNarrowing(strOrNumber:etc) : void{
    if(typeof strOrNumber === 'number' ){
        console.log(strOrNumber); // number
    }else if(typeof strOrNumber === 'string'){
        console.log(strOrNumber); // string
    }else{ // 도달할 수 없는 블럭. 모든 케이스가 검사되었는지 확인하기 위해 사용한다.
         const check:never = strOrNumber;// 이 else는 절대 실행되면 안됨.
    }
}