TS | 함수 타입과 type

| 함수타입과 type

함수타입

파라미터의 타입은 아래와 같이 설정했다

function add(a: number, b: number){
return a+b;
}
add(1,2);

그럼 함수의 return타입은 어떻게 설정해주면될까?

function add(a: number, b: number): string{
return String(a+b);
}
add(1,2);

파라미터 ()소괄호 옆에 달면된다

그러면 return값도 설정한 타입과 동일한 타입으로 반환해줘야한다

 

만약 아무것도 반환하지 않을때는 어떤 타입을쓸까? 

바로 void이다

function add(a: number, b: number): void{
return;
}
add(1,2);

return을 아예안쓰거나 return; 이렇게 사용해야한다

 

화살표함수에서의 함수타입

예시1.

변수에 함수를 담았다

오른쪽은 아래와 같이 타입을 설정할 수 있는데

const minus = (a:number,b:number): string=>String(a-b);

왼쪽(const minus)은 어떻게 설정해야할까?

const minus :(a:number, b:number) => string = (
    a:number,
    b:number
):string=>String(a-b);

이렇게 하면된다

 

예시2

예시를 하나 더보면

숫자타입 ab 를 받아 함수를 반환하는 형태이다

const multiple = (a: number, b: number) =>{
    return () => {
        return a * b * 2;
    }
}

아래와 같이 쓰면된다

const multiple: (a:number, b:number)=>()=>(number) = (a: number, b: number) =>{
    return () => {
        return a * b * 2;
    }
}

쓰고나니 너무 복잡해 보인다

그래서 type을 써서 치환하면 더쉽게 작성할수있다

 

type별칭

예시1

const minus :(a:number, b:number) => string = (
    a:number,
    b:number
):string=>String(a-b);

⬇️

type typeName = any;
type addFunc = (a: number, b:number) => string;

const minus:addFunc = (
    a:number,
    b:number
):string=>String(a-b);

 

예시2

const multiple: (a:number, b:number)=>()=>(number) = (a: number, b: number) =>{
    return () => {
        return a * b * 2;
    }
}

⬇️

type subMultiFunc = () => number;
type mainMultiFunc = (a: number, b:number) => subMultiFunc;

const multiple: mainMultiFunc = (a: number, b: number) =>{
    return () => {
        return a * b * 2;
    }
}

 

함수뿐만 아니라 다른 것들도 담을 수 있다.

type MyString = string;
type JaeNumber = number;
type SuperVoid = void;

그래서 타입별칭은 함수와 같이 복잡하거나

enum시 리터럴타입과 같이 길이가 길때 사용한다

enum만 마지막으로 예시를 들어보겠다

예시3

const sex: "MALE" | "FEMALE" | "ETC" = "MALE";

⬇️

type Hi = "MALE" | "FEMALE" | "ETC";
const sex:Hi = "MALE";