2020-03-30

타입스크립트

23 minutes read (About 3461 words)

typescript chapter6. 함수

자바스크립트 함수

타입스크립트는 함수의 매개변수나 반환값에 타입을 지정해 타입 안정성을 강화할 수 있다.
자바스크립트 함수는 기명 함수와 익명함수로 나뉜다.

기명함수는 호출 될 때 호이스팅이 발생한다. 함수를 선언하기 전에도 선언한 후에도 호출할 수 있다.

기명함수

myFunction(1,2);
function myFunctiion(x,y){
}
myFunction(1,2);

변수에 익명함수를 할당해 호출하면 익명 함수를 할당 한 뒤에만 함수를 호출 할 수 있다.

익명함수

1
2
3

myFunc(1, 2); // Block-scoped variable 'myFunc' used before its declaration.ts(24
let myFunc = function (a, b) { }
myFunc(1, 2);

let 선언자는 익명 함수를 변수에 할당 한 후에만 호출하게 함

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

자바스크립트 - 느슨한 타입 언어 , 프로그램이 실행될 때 동적으로 타입을 할당, 타입 추론, 타입이 없어 브라우저 환경에서 속도가 빠름
그러나, 타입이 없기 때문에 런타임때 의도치 않은 타입 변환이 일어날 수 있다.

function abc(str) {
    return str + 1000;
}

let result = abc('10');

console.log(typeof result, result); // string 101000

함수의 매개변수와 반환값에 타입을 지정하지 않아 함수에서 연산시 결과를 예측할 수 없음
이를 방지하기위해 자바스크립트는 불필요한 매개변수 검증이나 타입 캐스팅을 수행

불필요한 타입 캐스팅의 예

function abm(num) {
    if (typeof num !== 'number') {
        num = Number(num)
    }

    return Number(num) + 1000;
}

let result = Number(abm('1000'))

타입이 고정되어 있지 않아 불필요한 코드가 발생함

타입 안정성을 가진 타입 스크립트 함수

타입스크립트는 함수의 매개변수나 반환 값에 타입을 추가해 타입 안정성을 강화함 , 이러한 과정을 함수에 대한 타입 지정(typing)이라고 함
안정성이 보장되므로 타입 검사나 캐스팅 작업이 필요가 없음

function max(x: number, y: number): number { // 매개변수와 반환값에 number 타입 지정
    if (x > y) {
        return x;
    } else {
        return y;
    }
}

let a = max(1, 2);
let b = max("abc", "ABC"); // Argument of type '"abc"' is not assignable to parameter of type 'number'.ts

console.log(`a=${a}`);
console.log(`b=${b}`); //   Argument of type '"abc"' is not assignable to parameter of type 'number'.ts

안전하게 매개변수로 숫자 값만 전달하고, 함수에서 안전하게 숫자 값만 반환함

매개변수의 활용

ES6에 추가된 기본 초기화 매개변수는 함수의 특정 매개변수에 인수가 전달되지 않으면 매개변수에 설정된 초깃값으로 값을 초기화하는 기능이다.

타입스크립트

function pow(x: number, y: number = 2): number {
    return x ** y
};

console.log(pow(10)); // 100
console.log(pow(10, 3)); // 1000

나머지 매개변수

나머지 매개변수(rest parameter)는 es6에서 제안된 특징으로 개수가 정해지지 않은 인수를 배열로 받을 수 있는 기능이다.

function concat(a, b, ...rest) {
    return a + b + rest.join('');
}

// concat() //Expected at least 2 arguments, but got 0.ts(2555)

concat("a", "b", 1, 2, true, false);

나머지 매개변수는 0개 이상 요소를 받을 수 있다. 위 concat 함수를 호출하려면 최소 0개 이상 인수를 전달해야한다.
선언된 나머지 매개변수는 타입이 없기 때문에 타입 구분 없이 여러 인수를 전달받아 문자열 합치기를 수행한다.

만약, 전달받을 요소가 string으로만 받아야 한다면 타입을 제한해야할 필요가 있다.
이때 나머지 매개변수에 타입을 추가하면 지정한 타입의 인수만 받을 수 있다.

1
2
3

function concat(a, b, ...rest: string[]) {
    return a + b + rest.join('');
}

나머지 매개변수는 개수가 정해지지 않은 인수를 받기 때문에 문자열 배열 타입인 string[]으로 지정해야한다.

나머지 매개변수는 ES6에 도입된 특징이므로 위 코드를 ES5로 컴파일하면 나머지 매개변수 기능을 동작시키지 위해
함수 내부에 인수(arguments) 객체를 순회하는 for문이 추가된다.

// 나머지 매개변수 사용시(es6)
function colors(a: string, ...rest: string[]) {
    return a + " " + rest.join(" ");
}

//es5로 변환시
function colors(a) {
    var rest = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        rest[_i - 1] = arguments[_i];
    }
    return a + " " + rest.join(" ");
}

선택 매개변수

함수 호출 시에는 매개변수를 선언한 만큼 인수를 전달해야한다. 그런데 나머지 매개변수는 개수가 정해져 있지 않아 불필요한 인수가 전달 될 수 있다.
따라서 전달할 인수의 개수를 0개 이상 1개 미만으로 제한하려면 선택 매개변수(optional parameter)을 이용해야 한다.
선택 매개변수는 변수명 뒤에 물음표를 붙이는 식으로 선언한다. 선택 매개변수를 이용하면 지정한 매개변수는 생략 할 수 있다.

function sum(a: number, b?: number): number {
    return a + b
}
console.log(sum(1)) // NaN

매개변수는 2개지만 두번째가 선택 매개변수라서 인수 하나를 생략해 호출하더라도 에러가 발생하지 않는다.
다만 선택 매개변수로 지정된 b가 초기화되지 않았으므로 NaN 값이 되어 반환값도 NaN이 된다.

선택 매개변수와 매개변수의 초깃값 설정은 함께 사용할 수 없다.

1
2
3

function sum(a: number, b?: number = 2): number { //Parameter cannot have question mark and initializer.
    return a + b
}

위 내용을 수정하려면 매개변수 b에 대한 undefined 검사를 통해 초깃값을 설정해야한다.

function sum2(a: number, b?: number) {
    if (b === undefined) {
        b = 0;
    }
    return a + b;
}

console.log(sum2(1));

매개변수 b가 아무것도 전달 못받았을 때 어떤 값으로 초기화해야하는지에 대한 로직을 추가함

함수 오버로드

함수 오버로드란 매개변수와 반환 타입이 다른 함수를 여러 개 선언할 수 있는 특징을 말한다.
오버로드는 목록 형태로 선언할 수 있다.

function add(a: string, b: string): string;
function add(a: number, b: number): number;
function add(a: any, b: any): any {
  return a + b;
}

가장 일반적인 함수(매개변수가 any 타입)을 가장 아래에 선언하고 그 위로 구체적인 타입을 명시한 함수를 쌓는 방식으로 선언한다.
각 오버로드를 독립된 블록 형태로 선언하면 안됀다.
매개변수의 개수가 다른 오버로드를 지정할 때는 선택 매개변수를 둬 매개변수 개수에 변화를 줄 수 있도록 허용할 수 있다.

선택 매개변수를 둔 경우

function add(a: number): number;
function add(a: number, c: number): number;
function add(a: any, b?: any): any {
  if (b === undefined) {
    return a;
  } else {
    return a + b;
  }
}

console.log(add(1, 2)); // 3
console.log(add(1)); // 1

add 함수 두번째 매개변수에 ?를 사용해 선택 매개변수로 선언했다. 선택 매개변수는 전달 받은 값이 없을수도 있으므로 undefined 인지 검사하는 로직을 추가해야한다.

익명함수의 이해와 활용

익명함수와 화살표 함수

화살표 함수(arrow function)은 ES6 표준에 포함된 익명 함수를 좀 더 간략하게 표현 할 수 있는 방법이다.
매개변수가 하나도 없을 때는 ( )로 표현한다. 화살표 함수를 호출하려면 변수에 할당해야 한다.

1
2
3

let x1 = () =>{};

x1(); // 함수 호출시

매개변수가 1개인 화살표는 다음과 같이 표현할 수 있다.

1 2	let y1 = x => {return x}; let y1 = (x) => {return x};

매개변수가 1개일때는 소괄호를 생략할수 있다. 생략하지 않는 형태도 유효하지만 타입스크립트 스타일 가이드에서 추천하지 않는다.

화살표 함수를 호출할때는 변수를 이용해 호출한다. 유의할 점은 중괄호{}를 사용한 경우 반환값이 있으면 return 키워드를 사용해 값을 반환해야한다.
매개변수가 2개일 때는 소괄호를 사용해 표현한다.

let x1 = (x) => {
  x;
}; // 반환값이 없다.

let x2 = (x, y) => {
  return x + y;
}; // 매개변수가 2개일 때

화살표함수는 익명함수라 변수를 할당에 호출했지만, 변수를 사용하지 않고 화살표 함수를 사용하려면 즉시실행함수(IIEF)를 이용해야 한다.
즉시 실행함수는 코드를 실행하면 별도의 외부호출없이 바로 함수가 자체적으로 호출된다.

IIEF

// reteurn 값이 없을때
(x => { x;})(3);

// retunr 값이 있을 때
let iife = ((x) => {
  return x;
})(3);

위와 같이 return 를 사용해 실행하면 iife 변수에 즉시실행함수가 반환한 값이 할당된다.

필터 메서드 (filter)

화살표함수는 필터 메서드를 적용할 수 있다. 필터 메서드는 배열에서 조건에 맞는 요소를 추출할 때 사용한다.
for문을 순회해 조건에 맞는 값을 찾는 것보다 편리하고 유지보수에도 좋다.

filter 메서드

let list = [1, 2, 3, 4, 5];

list = list.filter((x) => {
  return x % 2 === 0;
});

console.log(list); // [2,4]

리듀스 메서드(reduce)

배열의 합을 구하는데 적용할 수 있다. reduce 메서드는 배열의 요소를 왼쪽에서 오른쪽으로 더해가면서 값을 처리할수 있는 메서드이다.

reduce 메서드

console.log(
  [1, 2, 3, 4, 5].reduce((a, b) => {
    return a + b;
  })
);
// 15


// 화살표 함수로 합계 계산(reduce) 사용
function getSum(numList: number[]) {
  let sum: number = numList.reduce((a, b) => {
    return a + b;
  });
  return sum;
}

console.log(getSum([1, 2, 3, 4, 5]));
// 15

첫번째 매개변수(a)는 누적된 값이고, 두번째 매개변수(b)는 현재값 이다.

객체 리터럴

객체 리터럴은 여러 속성의 값을 한 단위로 묶어서 표현할 수 있는 객체이다.
객체 리터럴의 속성은 키(key)이며, 값(value)은 숫자,문자열뿐만 아니라 사용자가 정의한 객체도 할당 할 수 있다.

따라서 함수 역시 객체이므로 함수도 속성 값으로 할당 할 수 있다. 값을 선언하면서 객체 프로퍼티를 참조하려면 this 키워드를 사용한다.

this를 이용해 다른 객체 속성 참조하기

let person = {
  name: "lee",
  hello: function (name2: string) {
    console.log(this.name, name2); // lee park
  },
};

person.hello("park");

객체 리터럴 내부에서 다른 프로퍼티를 참조할 일이 많다면 객체 리터럴에 타입을 선언할 수 있다.
타입은 interface를 이용해 정의한다.

interface PersonType {
  name: string;
  hello(this: PersonType, name2: string): string;
}

let typedPerson: PersonType = {
  name: "lee",
  hello: function (this: PersonType, name2: string): string {
    let message = `${this.name + name2}`;
    return message;
  },
};
console.log(typedPerson.hello("world")); // leeworld

참조 : https://webclub.tistory.com/390

익명함수의 타입 선언

익명 함수는 변수에 할당 할수 있고, 익명함수가 할당된 변수는 타입을 추가 할수 있으므로 함수 자체에도 타입이 존재할 수 있다.
타입스크립트에서는 함수 자체에 대한 타입을 함수 타입(function type)이라고 한다.

할당한 익명함수에 매개변수 타입과 반환 타입을 추가할 수 있다.

익명함수에 타입 선언

1
2
3

let concat = function (str1: string, str2: string): string {
  return str1 + str2;
};

그런데, 익명함수에 선언된 타입을 별도로 분리해 선언하면 타입 안정성을 보장하면서도 익명함수의 타입이 무엇인지 쉽게 파악이 가능하다.
특히 익명함수의 타입을 분리하면 새로 정의한 타입은 반복적으로 재활용해 사용할 수 있다.

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

let add: caltype = (a, b) => a + b;
let minus: caltype = (a, b) => a - b;

새롭게 정의한 타입인 caltype은 익명함수를 할당받는 여러 변수에 함수 타입으로 선언할 수 있다.

콜백함수의 타입 선언

콜백함수(callback)함수는 또 다른 함수의 매개변수로 전달 될 수 있는 함수이다.
콜백함수를 전달받는 함수는 상위 처리를 담당하는 고차 함수(higher-order function)이라고 불린다.
고차 함수는 하나 이상의 콜백을 전달받거나, 하나 이상의 함수를 결과로 반환하는 특성이 있다.

콜백함수의 한가지 예로 setTimeout함수가 있다. setTimeout은 지정된 시간이 지난 후에 어떠한 일을 처리하기 위해 콜백 함수를 전달 받는다.

setTimeout

1
2
3

setTimeout(function () {
  console.log("종료");
}, 1000);

단순한 형태의 콜백함수는 다음과 같다.

function ehoFunction(message: string, callback) {
  return callback(message);
}

let response = ehoFunction("hello", (message) => message);
console.log(response); // hello

첫번째 인수로 문자열을 전달하고, 두번째 인수로 콜백 함수를 전달하면 문자열을 되돌려주는 에코(eho) 함수이다.
두번째 인자인 콜백함수는 문자열을 반환하는 비교적 단순한 동작을 수행하므로 타입이 없는 화살표 함수를 사용했다.
이렇게 하면 타입 안정성이 없으므로, 콜백 함수에 로직을 추가해야하고 콜백 함수가 중요하다면 콜백 함수 선언을 분리해 타입을 추가하는 편이 좋다.

type callbackType = (message: string) => string; // 콜백 함수의 타입을 먼저 선언
let callback: callbackType = (message) => message; // 콜백 함수 선언

let response = ehoFunction("hello", callback);
console.log(response); // hello

위 처럼 콜백 함수의 타입을 먼저 선언하고, 콜백함수의 선언과 사용을 분리할 수 있다.