[TypeScript] 타입스크립트를 이용하여 함수 사용하기

dev.galim·2023년 9월 8일
0

TypeScript

목록 보기
2/10

일급 객체(first-class object)

→ 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체.

  • 일급 객체의 조건
    • 다른 함수에 매개변수로 제공할 수 있음.
    • 함수에서 반환 가능해야 함.
    • 변수에 할당 가능해야 함.
💡 자바스크립트와 타입스크립트의 함수는 일급객체이다.

타입스크립트를 이용해 함수 사용하기

  • 타입스크립트 함수 작성 시, 반환 타입을 추론하도록 하는걸 권장함.
  • 함수의 매개변수와 인수의 타입이 호환 가능하게 작성.
  • 인수의 타입을 잘못 전달하면 에러가 발생함.

함수 선언 방법

  • 함수 선언식
    function world(name) {
    	return 'hello ${name}';
    }
    
    // 타입스크립트
    function world(name: string): string {
    	return 'hello ${name}';
    }
  • 함수 표현식 → 변수로 할당.
    let world2 = function(name) {
    	return 'hello ${name}';
    }
    
    // 타입스크립트
    let world2 = function(name: string): string {
    	return 'hello ${name}';
    }
  • 화살표 함수 표현식
    let world3 = name => {
    	return 'hello ${name};
    }
    
    // 타입스크립트
    let world3 = (name: string): string => {
    	return 'hello ${name};
    }
  • 단축형 화살표 함수 표현식
    let world4 = name => 'hello ${name}';
    
    // 타입스크립트
    let world4 = (name: string): string => 'hello ${name}';
  • 함수 생성자 → 되도록 사용을 권장하지 않음
    let world5 = new Function("name", 
    'return "hello" + name');

타입 추론

→ 타입스크립트 컴파일러는 방정식의 한쪽에만 타입이 있더라도 타입을 추론할 수 있음.

이러한 타입 추론 형태를 contextual typing 라고 함.

// 일반적인 함수
let f12 = function (x: number, y: number): number {
	return x + y;
}

// contextual typing
let f12: (baeValue: number, increment: number) => number = function(x, y) {
	return x + y;
}

함수의 매개변수

  • 기본 매개변수(Parameter) → 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야함.
    function buildName(firstName: string, lastName: string) {
    	return firstName + " " + lastName;
    }
    let res1 = buildName("Bob"); // Error, 인자가 1개이기 때문에 에러 발생.
    let res2 = buildName("Bob", "Adams", "Kim"); // Error, 인자가 3개이기 때문에 에러 발생.
  • 선택적 매개변수(Optional Parameter) 자바스크립트에선 모든 매개변수가 선택적으로, 인수가 없다면 undefined가 됨. 타입스크립트에서도 선택적 매개변수를 사용할 수 있음(변수명 뒤에 ‘?’)
    function buildName(firstName: string, lastName: string) {
    	if(lastName) return firstName + " " + lastName;
    	else return firstName;
    }
    let res1 = buildName("Bob"); // buildName의 두번째 매개변수가 선택적 매개변수이기 때문에 에러가 발생하지 않음.
    let res2 = buildName("Bob", "Adams", "Kim"); // Error, 인자가 3개이기 때문에 에러 발생.
  • 기본-초기화 매개변수(Default Parameter) → 타입스크립트에선 값을 제공하지 않거나, undefined로 했을 때 매개변수의 값 할당 가능.
    function buildName(firstName: string, lastName = "Smith") {
    	return firstName + " " + lastName;
    }
    // 값을 전달하지 않거나, undefined여도 default 값이 할당되어 있기 때문에 에러가 발생하지 않음.
    let res1 = buildName("Bob"); // "Bob Smith"
    let res2 = buildName("Bob", undefined); // "Bob Smith"
    let res3 = buildName("Bob", "Adams"); // "Bob Adams"
    let res4 = buildName("Bob", "Adams", "Kim"); // Error, 인자가 3개이기 때문에 에러 발생.
  • 나머지 매개변수(Rest Parameters) 컴파일러는 생략 부호(…) 뒤의 인자 배열을 빌드해 함수에 사용할 수 있음. 나머지 매개변수는 매개변수의 수를 무한으로 취급함. 아무것도 넘겨주지 않을때도 있음.
    function buildName(firstName: string, ...restOfName: string[]) {
    	return firstName + " " + restOfName.join(" ");
    }
    
    // buildName 호출 시, 2-4번째 인수는 나머지 매개변수가 할당되어 Array로 선언됨.
    // ...restOfName은 나머지 인자들을 문자열 배열로 받아 블럭 구문에 넘긴다.
    let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie"); // "Joseph Samuel Lucas Mackinzie"
    
profile
열심히 해볼게요

0개의 댓글