타입스크립트 기초 - 7

Stulta Amiko·2022년 6월 28일
0

타입스크립트 기초

목록 보기
7/24
post-thumbnail

고차함수

고차함수는 또 다른 함수를 반환하는 함수를 말한다.
함수형 프로그래밍에서 중요한 부분이라고 한다.

const add = (a: number) : (number) => number => (b: number): number => a+b
const result = add(1)(2)
console.log(result) 

책에있는 고차함수 예제인데 이해가 잘안된다. 생긴게 난해하다.

export type NumberToNumberFunc = (number) => number
export const add = (a: number): NumberToNumberFunc =>{
    const _add: NumberToNumberFunc = (b: number) =>{
        return a+b
    }
    return _add
}

add.ts

import { NumberToNumberFunc,add } from "./add"

let fn : NumberToNumberFunc = add(1)

let result = fn(2)
console.log(result)
console.log(add(1)(2))

index.ts

위와같은 코드를 나눠서 보면 다음과 같다.

2차 고차 함수로 만들어진 add 함수이기 때문에 저런식으로 괄호가 두개 들어가야한다.
아직 개념이해가 잘 안된듯한 느낌이니 나중에 한번더 보는걸로 하자

디폴트 매개변수

여러 객체지향 언어를 보다보면 디폴트 매개변수를 지정할 수 있는 언어들이 있다.
대표적으로 C++의 경우는 디폴트 매개변수를 지원하는 언어이다.
하지만 그렇다고 모든 객체지향언어가 디폴트 매개변수를 지원하지는 않는다.

export type Person = {name:string, age:number}

export const makePerson = (name: string,age: number = 10) : Person =>{
    const person = {name: name,age: age}
    return person
}

console.log(makePerson('jack'))
console.log(makePerson('jack',20))

위와 같이 디폴트 매개변수를 정해줄 수 있다.
타입스크립트에서는 다음과같이 좀더 간결한 구문을 제공한다.

export type Person = {name:string, age:number}

export const makePerson = (name: string,age: number = 10) : Person =>{
    const person = {name,age}
    return person
}

console.log(makePerson('jack'))
console.log(makePerson('jack',20))

const person 부분을 보면 간략화 한 모습을 볼 수있다.

export type Person = {name:string, age:number}

export const makePerson = (name: string,age: number = 10) : Person => ({name,age})

console.log(makePerson('jack'))
console.log(makePerson('jack',20))

그리고 이런식으로 해서 간략화 할수 있다.
화살표함수의 내부를 구성하는게 아니고 바로 반환하는 형태로 만드는 것이다.
{}를 객체로 인식하게 하려면 소괄호로 감싸야 하기때문에 위와같은 형태가 만들어지게 된다.

키-밸류 타입으로 객체 만들기

const makeObject = (key,value) =>({[key]: value})

console.log(makeObject('name','Jack'))
console.log(makeObject('firstName','Jane'))

이런방식으로 객체를 만들 수 있다.

메서드

export class A{
    value: number = 1
    method: () => void = function(): void {
        console.log(`value: ${this.value}`)
    }
}

export class B{
    constructor(public value: number = 1) {}
    method(): void{
        console.log(`value: ${this.value}`)
    }
}

default.ts

import {A,B} from './default'

let a: A = new A
a.method()
let b: B = new B
b.method()

index.ts

위와같은 클래스가 두개있다.
A는 일반적으로 만든거고 B는 타입스크립트의 기능을 이용해서 만들었다.
원래라면 function 키워드를 사용해서 만들어야하지만 타입스크립트는 클래스의 속성 중 함수 표현식을 담는 속성은 생략할수 있는 기능을 제공한다.

메서드 체인

연속 해서 메서드를 호출하는것을 메서드 체인이라고 부른다.
타입스크립트로 메서드 체인을 구현하려면 항상 this를 반환하게 한다.

export class Calc{
    constructor(public value: number =0){}
    add(value: number){
        this.value += value
        return this
    }
    sub(value: number){
        this.value -= value
        return this
    }
    multi(value: number){
        this.value *= value
        return this
    }
}

default.ts

import {Calc} from './default'

let calc = new Calc
let result = calc.add(1).add(2).sub(3).multi(5)
console.log(result)

index.ts

위와같은 형식으로 메서드 체인을 이용할수 있다.
result를 계산하면
(1+2-3)*5가 되므로 0이 나오는것을 알 수 있다.

0개의 댓글