[코딩애플] ts part 1-8. method types

함수와 methods에 type alias 지정하는 법

type alias에 함수 type 저장해서 쓰는 법

화살표 함수로 지정해야 한다.

• 파라미터는 string 자료형,
• number 자료형으로만 반환 가능

type 함수타입 = (a :string) => number; 

함수 type alias 부착하려면 "함수표현식"을 써야함

function 함수(){} // 함수 선언식

이렇게 함수를 만들지 말고 다르게 만들어야 한다. 함수를 정의하는 다른 방법일 뿐이다.

let 함수 = function () {} // 함수 표현식

여기에 타입을 지정하면 된다.

let 함수 :함수타입 = function () {}

object안에 함수 만들 수 있음

let 회원정보 = {
    name: 'kim',
    plusOne(){
        
    }
}

회원정보.plusOne();

Q. object 안의 함수 타입지정은 어떻게?

일반함수일 때

• 파라미터 하나는 number, return 값은 number로 지정하고 싶다.

let 회원정보 = {
    name: 'kim',
    plusOne(a){
        return a + 1;
    }
}

회원정보.plusOne(); // 에러!

이렇게만 짜면 에러난다. 왜냐하면 파라미터가 있는데 타입지정안했다고 혼나기 때문이다.

함수는 항상 예측가능한 값을 넣고 뺴야한다. 그래서 항상 타입을 줘야한다.

type NumOut = (x: number) => number

let 회원정보 = {
    name: 'kim',
    plusOne(a :number) :number {
        return a + 1;
    }
}

회원정보.plusOne();

화살표 함수일 때

화살표 함수도 객체에 넣을 수 있다.

type NumOut = (x: number) => number

let 회원정보 = {
    name: 'kim',
    plusOne(a :number) :number {
        return a + 1;
    },
    changeName: () => {
        console.log('안녕');
    }
}

숙제를 위한 잠깐 콜백함수 개념설명

실행: 함수1 -> 함수2

function 함수1(a){
    a();
}
function 함수2(){
    
}

함수1(함수2); // 함수2가 콜백함수임

숙제

1. 위 코드에서 회원정보라는 변수에 타입지정 알아서 해보십시오.

\- plusOne이라는 속성은 함수여야하고, 숫자를 넣어서 숫자를 뱉는 함수여야합니다.

\- changeName이라는 속성은 함수여야하고, 아무것도 return하면 안됩니다.

\- type 키워드를 쓰든 말든 알아서 합시다.

➡️

type Member = {
    name: string,
 	plusOne: (x :number) => number,
    changeName: () => void
}

2. 다음 함수2개를 만들어보고 타입까지 정의해보십시오.

\- cutZero()라는 함수를 만듭시다. 이 함수는 문자를 하나 입력하면 맨 앞에 '0' 문자가 있으면 제거하고 문자 type으로 return 해줍니다.

\- removeDash()라는 함수를 만듭시다. 이 함수는 문자를 하나 입력하면 대시기호 '-' 가 있으면 전부 제거해주고 그걸 숫자 type으로 return 해줍니다.

\- 함수에 타입지정시 type alias를 꼭 써보도록 합시다.

물론 문자제거 하는 방법을 모른다면 구글검색이 필요합니다.

➡️

type CutType = (x :string) => string;
type RemoveType = (x :string) => number;

let cutZero :CutType = function(x){
    return a.indexOf(0) === '0' ? a.slice(1, a.length - 1) : a;
}
let removeDash :RemoveType = function(x){
    const answer = x.replaceAll('-','');
    return parseInt(answer)
}

코딩애플 풀이

type CutType = (x :string) => string

let cutZero :CutType = function (x){
    let result = x.replace(/^0+/, "");
    return result
}
function removeDash(x :string) :number{
    let result = x.replace(/-/g, "");
    return parseFloat(result)
}

3. 함수에 함수를 집어넣고 싶습니다.

숙제2에서 만든 함수들을 파라미터로 넣을 수 있는 함수를 제작하고 싶은 것입니다.

이 함수는 파라미터 3개가 들어가는데 첫째는 문자, 둘째는 함수, 셋째는 함수를 집어넣을 수 있습니다. 이 함수를 실행하면

1. 첫째 파라미터를 둘째 파라미터 (함수)에 파라미터로 집어넣어줍니다.
2. 둘째 파라미터 (함수)에서 return된 결과를 셋째 파라미터(함수)에 집어넣어줍니다.
3. 셋째 파라미터 (함수)에서 return된 결과를 콘솔창에 출력해줍니다.

이 함수는 어떻게 만들면 될까요?

둘째 파라미터엔 cutZero, 셋째 파라미터엔 removeDash 라는 함수들만 입력할 수 있게 파라미터의 타입도 지정해봅시다.

(실행예시)

만들함수('010-1111-2222', cutZero, removeDash)

이렇게 사용하면 문자에 1. cutZero를 해주고, 2. removeDash를 해주고 그 결과를 콘솔창에 1011112222 이렇게 출력해줍니다.

이런거 처음이면 어려울 수 있으니 하루 드림

➡️

type MakeType = (x :string, func1 :CuteType, func2 :RemoveType) => void
type CutType = (x :string) => string
type RemoveType = (x :string) => number

let 만들함수 :MakeType = function(str, func1, func2){
    let result = func1(str);
    let result2 = func2(result)
    console.log(result2);
}
let cutZero :CutType = function (x){
    let result = x.replace(/^0+/, "");
    return result;
}
let removeDash :RemoveType = function(x){
    let result = x.replace(/-/g, "");
    return parseFloat(result)
}
만들함수('010-1111-2222', cutZero, removeDash);