[ts] 함수에 타입 지정하기

💻함수 타입

함수의 인자와 반환 값과 함수의 구조 타입을 지정한다.

🌱 함수의 기본적인 타입 선언

function 함수(a: number, b:number):number {

  return a + b;
  
}

파라미터와 반환 값에 타입을 추가하였다.

🌱함수 인자 타입 지정

  let 사람 = { name: "kim", age:25 };
  
  function logAge(obj: { age: number }){ 
  	console.log(obj.age);  ///25
  
  }
  
  
  logAge(사람); 

함수에서 받는 인자의 타입뿐만이 아니라 구조 분해 할당해서 받는 객체의 속성도 타입을 지정할 수 있다.

🌱파라미터에 타입 지정하기

function hello(name = "word"){   //함수에 마우스오버하면 뜨는 타입은 function hello(name?: string): void 라고 뜬다. 

    console.log(name);  /// "나는땅주"가 출력된다.
}

hello("나는땅주")


/// 위와 아래와 같은 코드 

function hello2(name?: string){
    console.log(`Hello ${name || "world"}`) // 호출시 넘어오는 인자가 없기 떄문에 hello world가 출력. 
}

hello2();
}

인자 name은 word를 string으로 인식한다. 그러므로 나는땅주는 string이기 때문에 콘솔에 출력이 가능했다!

❗ 인자를 여러 개 받을 때 옵션 속성을 사용하는 파라미터를 첫번 째 인자에 두면 error가 발생한다.
선택적 파라미터는 무조건 뒤로, 필수적 파라미터는 앞으로!
만약 옵션 속성(?)을 사용하지 않고 정의된 파라미터 갯수만큼 인자를 넘기고 싶지 않다면 undefined이나 null을 사용한다.

🌱REST 문법이 적용된 파라미터

인자가 여러개 들어올 때 여러개의 파라미터를 설정하는 것이 아니라, Rest 를 사용하여...a이렇게 적어주면 여러 인자들이 넘어올 수 있다.

function rest(a: number, ...nums: number[]) {

  console.log(a)  // 1 
  console.log(...nums) // [2,3,4,5]
   for (let key in nums) {
     console.log(key); /// 0 1 2 3
   }
}

rest(1, 2, 3, 4, 5);

rest는 다른 일반 파라미터 뒤에만 올 수 있다. 또 rest 파라미터 자리에 집어넣은 값들은 전부 []안에 담겨있다.

❗ rest와 Spred 연산자와는 다르다!
spred연산자의 경우에는 array 또는 object 괄호를 벗기고 싶을 때 사용한다.

🌱 파라미터에 타입을 설정할 때 "|" 을 사용하는 경우에..🤔

function 함수(a: number | string){
	return x + 1 //error
}

에러가 나는 이유는? 타입으로 지정해준 number | string 같은 union type에는 일반적으로 조작을 못하게 막아놨다.

이럴 땐 두 가지 방법이 있다. 1.Narrowing 또는 2. ASSERT

:: Type Narrowing

function 함수(a :number | string){
  if (typeof a === 'number') {
    return a + 1
  } 
  else if (typeof a === 'string') {
    return a + 1
  }
  else {
    return 0
  }
}

if와 typeof 키워드로 파라미터를 검사하여 타입이 확실하지 않을 때 생기는 부작용을 막는다. (typeof대신에 in, instanceof 키워드도 가능!)

:: Type Assertion

function 함수(a :number | string){ 
    return (a as number) + 1  // number라고 설정 
}
console.log( 함수(123) )

변수명 as number는 number로 타입을 그냥 지정하겠다는 것이다. 하지만 주의해야할 점은 100%타입이 확실해야 한다는 점이다.

💻as 키워드 특징

• union type 가읁 복잡한 타입을 정확한 타입으로 줄이는 역할을 한다.
• 임의로 변경하여 코드 실행 결과를 확인할 수 있다.