타입스크립트 - 06 함수

6.1. 타입스크립트 함수 사용

애플리케이션의 코드를 구성하는 기본요소

클래스나 네임스페이스 내에서 선언 하거나 모듈로 사용

자바스크립트에서와의 다른점은 매개변수나 반환값의 타입을 지정 하여 타입 안정성을 강화 할 수 있음. 

  6.1.1. 자바스크립트 함수

  기명 함수와 익명 함수의 선언

   - 기명함수 : 이름이 명시된 함수, 호출시 호이스팅 발생. 함수를 선언하는 위치와 관계없이 호출 가능

// 기명함수 선언
function nameFn() {

}

   - 익명함수 : 이름이 없는 함수, 즉시실행 하거나 변수에 할당 한 후에 호출 가능

// 익명한수 변수에 할당 예
let namelessFn = function() {

}

  자바스크립트 함수의 불안정성

  자바스크립트는 느슨한 타입 언어라서 프로그램이 실행될때 함수의 매개변수나 반환값으 타입을 동적으로 할당, 추론된 타입이 지정

  타입을 사용하지 않으므로 브라우저 환경에서도 빠른속도를 보장

  동적으로 타입이 정해지기때문에 런타임시 의도치 핞은 타입변화이 일어날 수 있음

  타입을 명시하지 않아 일어날 수 있는 문제를 해결하기위한 추가코드가 필요 ex) 매개변수나 반환값의 타입에 대한 타입변환

 

  6.1.2. 타입 안전성을 갖춘 타입스크립트 함수

  타입스크립트에서는 매개변수와 반환값에 타입을 지정하여 타입 안전성을 강화

// 타입스크립트로 함수에 타입지정하는 예제
function typeFn(a: string, b: string) : string {

}

  매개변수에 지정한 타입과 다른 타입의 변수를 전달시 오류발생

 

6.2. 매개변수의 활용

  6.2.1. 기본 초기화 매개변수

  ES6에 추가, 매개변수에 인수가 전달되지 않았을때 매개변수에 설정된 값으로 변수를 초기화

// 기본 초기화 매개변수 예제
function typeFn(a: string, b: string = '1') : string {

}

  ES5로 컴파일시 함수내부에 기본값을 처리 할 수 있는 조건문이 추가됨

 

  6.2.2. 나머지 매개변수

  ES6에 추가, 개수가 정해지지 않은 인수를 배열로 받을 수 있는 기능

// 나머지 매개변수 예제
function typeFn(...stringList) : string {

}

// 모든 매개변수를 나머지 매개변수로 받지 않을 수 있음
function typeFn(x, y, ...stringList) : string {

}

// 나머지 매개변수 타입선언 예제
function typeFn(...stringList: string[]) : string {

}

  ES5로 컴파일시 나머지 매개변수의 기능을 동작시키기 위한 for문이 추가

  나머지 매개변수를 인수객체인 arguments로 받아서 for문 실행

  인수객체는 배열형태로 인수들을 저장하고, length프로퍼티를 제공하지만 배열은 아님

 

  6.2.3. 선택 매개변수

  나머지 매개변수의 경우 받을수 있는 인수의 최대 수 제한이 없음

  인수가 없거나 최대 몇개까지만 받고싶을 경우는 선택 매개변수를 사용

// 선택 매개변수 예제
function typeFn(a: string, b?: string) : string {

}

  선택 매개변수는 생략 할 수있음

  선택 매개변수는 초기화 매개변수로 사용 할 수 없음

  선택 매개변수에 인수가 전달되지 않았을때 초기값을 설정하고 싶으면 함수안에서 로직을 구현해야 함

  

  6.2.4. 함수 오버로드

  함수명은 같지만 매개변수와 반환타입이 다른 함수 여러개 선언 가능한 특징

  컴파일시에 오버로드들 중 가장 적합한 오버로드를 선택

// 함수 오버로드 예제
function typeFn(a: number, b: string) : string
function typeFn(a: number, b: number) : number
function typeFn(a: any, b?: any) : string {

}

  오버로드 선언시에 함수의 body는 한번만 있어야 함

  가장 일반적인 함수의 시그니처를 가장 아래에 선언 후, 그위에 구체적인 타입을 명시한 시그니처를 쌓는 방식으로 선언

  선택매개변수를 사용하여 매개변수의 개수가 다른 오버로드 가능

  함수 내부에서 오버로드에 선언한 타입별로 별도의 로직으로 처리

 

6.3. 익명함수의 이해와 활용

  6.3.1. 익명 함수와 화살표 함수

  화살표 함수는 ES6에 추가된 익명함수의 간략한 표현방법

  파이썬, 자바 등에서는 람다함수라고 부름

// 화살표 함수 예제
() => {}

  매개변수 목록(), 뚱뚱한 화살표=>, 함수 블록{} 으로 구성

  매개변수가 하나도 없을떄는 빈 괄호() 로 표시

  매개변수가 1개일떄는 괄호 생략 권장

  화살표함수도 익명함수이므로 호출을 하기 위해서는 변수에 할당 해야 함

  함수블록{} 으로 묶을경우 return으로 결과값 반환

  함수블록에 바로 반환값을 return시 중괄호 생략가능

// 매개변수가 1개인 화살표 함수
let a = x => { a; }

// 반환값이 있는 화살표 함수
let b = (z, x) => { return z + x; }
let b = ((z, x) => z + x); 

  변수에 할당하지않고 화살표 함수를 호출하려면 즉시호출함수(IIF) 형태로 사용가능

// 즉시실행 함수 예제
let fn = (a => a + 1)(99);

console.log(fn); // 100

  화살표 함수를 픨터 매서드에 적용

   - Array.filter() - 배열에서 조건에 맞는 요소를 추출하는데 사용, 새로운 배열 반환

   - for문보다 유지보수에 용이(???) - 새로운 빈배열을 선언하고 해당배열에 조건에 맞는 값을 담는 작업이 불필요

  화살표 함수를 리듀스 메서드에 적용

   - Array.reduce() - 배열에 있는 값의 함

  객체 리터럴의 선언과 객체 리터럴 타입의 선언

  객체 리터럴은 여러 속성과 값을 한 단위로 묶어서 표현 할 수 있는 객체

  객체 리터럴의 속성은 키가 되고, 값은 숫자나 문자열 뿐만 아니라 사용자 정의 객체도 가능

  객체 내부의 프로퍼티를 사용하기 위해선 this 사용

  객체 리터럴의 타입을 선언하여 내부를 참조함으로써 코드 어시스트가 동작하게 할 수 있음

  객체 리터럴의 타입은 인터페이스를 이용하여 정의

  this 매개변수는 반드시 첫번째에 위치해야 함

  객체 리터럴 내부의 this는 타입이 없어서 객체 속성에 접근 할 수 없슴

  객체 내부 함수에서 다른속성에 접든하려면 인터페이스를 선언한 다음 this에 객체 리터럴 타입을 추가해야 함

  noImplicitThis타입을 true로 설정하면 this에 무조건 타입을 선언해야 함

 

  6.3.2. 익명 함수의 함수 타입

  익명 함수의 타입 선언

  익명함수는 변수에 할당가능

  함수 자체에도 타입이 존재

  함수 자체에 대한 타입을 함수타입 이라고 함

  익명 함수 할당 시 변수에 타입을 지정하면 좋은점

  익명함수의 매개변수나 반환값에 각각 타입을 지정 할 수 있지만 이렇게 구현할 경우 형태가 복잡해짐

  익명 함수에 선언된 타입을 별도로 분리해 함수타입으로 선언 가능

// 변수에 익명함수에 대응하는 함수 타입 선언
let namelessFn: (a: number, b: number) => number = (a, b) => { return a + b; };

  함수타입을 type 앨리어스를 이용해 별도로 분리해 선언하면 재활용 가능

 

  6.3.3. 콜백 함수의 타입 선언과 활용

  또다른 함수에 매개변수로 전달 될 수 있는 함수

  콜백 함수를 전달받는 함수는 콜백 함수보다 상위 처리를 담당, 고차함수 라고 함

  고차함수는 하나이상의 콜백함수를 전달받거나 하나 이상의 함수를 결과로 반환

  콜백함수의 선언을 분리하여 타입을 추가 할 수 있음