[TypeScript] 함수에 타입 지정하기

2022. 5. 8. 15:49·TypeScript/기초
반응형

함수에는 2곳에 타입을 지정할 수 있다. 

함수에는 총 두 군데 타입 지정이 가능하다. 

1. 함수에 들어오는 자료 ( 파라미터 )

2. 함수에서 나가는 자료 ( return )

 

function 함수( props :number) :number {
	return props * 2
}

파라미터로 받는 타입은 파라미터 옆에 적어주면 된다. 

그리고 함수에서 return 되는 자료의 타입을 정해주고 싶으면, 함수명() 옆에 적어주면 된다. 

 

설정을 해주면 파라미터와 리턴 값이 이상하면 에러를 나타낸다. 

- 파라미터에 타입을 지정하면 필수 파라미터가 된다. 

 

void 타입

함수에만 void라는 타입을 사용할 수 있다. 

' 아무것도 리턴하지 않는다 ' 를 뜻하는 타입으로 리턴할 자료가 없는 함수의 타입으로 사용한다. 

function 함수(x : number) :void {
	console.log(x * 2);
//  return x   에러가 난다.
}

void 타입을 가지고 있는 함수의 경우 return을 하려고 하면 에러가 난다. 

즉, 함수에 return 을 방지하고 싶은 경우에 void 타입을 사용한다.

 

옵션인 파라미터 

함수에 파라미터를 만들었지만, 필요에 따라선 파라미터가 없어도 사용되는 경우가 있다. 

이 경우엔 타입스크립트에선 " 이 파라미터는 옵션이다 " 정의를 해줘야 에러가 나지 않는다. 

 

function 함수(x? :number) {
	// ...
}

함수();
함수(30);
// 둘다 가능

파라미터 우측에 ?를 넣어주면 파라미터 없이도 쓸 수 있다는 뜻이 된다. 

? 는 이전에 배운 Union과 같은 의미로 x: number | undefined와 같은 의미이다. 

 

파라미터가 정의가 안된다면 자동으로 undefined가 할당된다. 

 

함수에 Union 타입 사용하기

당연하게 함수에도 Union 타입을 사용할 수 있다. 

function anyFunc2(x?: number): number | string {
  return x ? x : "undefined";
}

 

깃허브

https://github.com/SeoJaeWan/TypeScript/tree/master/Function%20Types

 

GitHub - SeoJaeWan/TypeScript

Contribute to SeoJaeWan/TypeScript development by creating an account on GitHub.

github.com

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'TypeScript > 기초' 카테고리의 다른 글

[TypeScript] type 키워드 & readonly  (1) 2022.05.10
[TypeScript] 타입 확정하기  (1) 2022.05.09
[TypeScript] 추가 타입  (5) 2022.04.21
[TypeScript] 기본 타입 정리  (0) 2022.04.16
[TypeScript] 컴파일 시 세부 설정  (0) 2022.04.15
'TypeScript/기초' 카테고리의 다른 글
  • [TypeScript] type 키워드 & readonly
  • [TypeScript] 타입 확정하기
  • [TypeScript] 추가 타입
  • [TypeScript] 기본 타입 정리
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    덤프
    네트워크
    Docker
    리액트
    프로그래머스
    식물
    CSS
    바질 키우기
    리얼학습일기
    typescript
    ChatGPT
    webpack
    바질
    다이소
    영어독학
    타입스크립트
    javascript
    영어회화
    redux
    타일러영어
    react
    next.js
    ReactNative
    네이버 부스트캠프
    리얼클래스
    알고리즘
    CCNA
    Node.js
    Babel
    자바스크립트
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[TypeScript] 함수에 타입 지정하기
상단으로

티스토리툴바