📘 타입스크립트 개념 정리07

📘 1. 함수 타입 정의

👉 함수는 이렇게 생각하면 쉬워요:
“어떤 값을 받고 → 어떤 값을 돌려준다”

• 매개변수 타입 + 반환 타입 정의

function func(a: number, b: number): number {
  return a + b;
}

✔ 의미

• a, b → number 타입 받음
• 결과 → number 반환

📘 2. 화살표 함수 타입

const add = (a: number, b: number): number => a + b;

✔ 위 함수랑 완전히 동일
👉 요즘 JS/TS에서 더 많이 씀 (중요🔥)

📘 3. 매개변수 (Parameter)

✔ 기본 + 선택적 매개변수

function introduce(name = 'army', age: number, tall?: number)

핵심 포인트

1. tall?: number
   👉 있을 수도 있고 없을 수도 있음 → number | undefined
2. 선택적 매개변수는 뒤에 와야 함

❌ 잘못된 예

function test(a?: number, b: number) {}

✔ 타입 가드 (핵심🔥)

if (typeof tall === 'number') {

👉 "이 값이 진짜 number인지 확인"
✔ 이유
→ undefined일 수도 있어서 오류 방지

📘 4. Rest 파라미터 (나머지 매개변수)

function getSum(...rest: number[])

👉 여러 개 값을 배열로 받음

getSum(1,2,3) → [1,2,3]

✔ 중요 포인트

• 타입은 배열로 지정해야 함

📘 5. 함수 타입 표현식 (타입 별칭)

type Operation = (a: number, b: number) => number;

👉 함수 타입을 미리 정의

const add: Operation = (a, b) => a + b;

✔ 장점

👉 코드 재사용 가능 (실무에서 많이 씀🔥)

📘 6. 호출 시그니처 (Call Signature)

type Operation2 = {
  (a: number, b: number): number;
  name: string;
};

👉 함수 + 속성을 같이 가질 수 있음
✔ 이런걸 하이브리드 타입이라고 함

📘 7. 함수 타입 호환성 (🔥 난이도)

✔ 기준 1. 반환값

type A = () => number;
type B = () => 10;

✔ 결과

a = b; // 가능 (업캐스팅)
b = a; // 불가능 (다운캐스팅)

👉 쉽게 말하면

• 작은 → 큰 : 가능
• 큰 → 작은 : 불가능

✔ 기준 2. 매개변수

💥 헷갈리는 부분
👉 반환값이랑 반대로 생각해야 함

✔ 같은 개수일 때

type C = (value: number) => void;
type D = (value: 10) => void;

d = c; // 가능
c = d; // 불가능

👉 이유

• 매개변수는 더 "넓은 타입"이 안전함

✔ 객체 타입일 때

type Animal = { name: string }
type Cat = { name: string, color: string }

catFunc = animalFunc; // 가능
animalFunc = catFunc; // 불가능

👉 이유

• cat은 color 필요함 → 위험

✔ 매개변수 개수 다를 때

func1 = func2 // 가능
func2 = func1 // 불가능

👉 규칙

• 매개변수 적은 쪽 → 가능
• 많은 쪽 → 불가능

🚨 가장 많이 하는 실수

❌ 1. optional 위치 실수

function test(a?: number, b: number) ❌

✔ 해결
→ optional은 무조건 뒤로

❌ 2. 타입가드 안씀

tall + 10 ❌

✔ 해결

if(typeof tall === 'number')

❌ 3. rest 타입 안붙임
function sum(...rest) ❌

✔ 해결

(...rest: number[])