티스토리 뷰
타입스크립트에세 자주 사용되는 함수는 크게 다음 3가지 타입을 정의할 수 있습니다.
- 함수의 파라미터(매개변수) 타입
- 함수의 반환 타입
- 함수의 구조 타입
1. 함수의 기본적인 타입 선언
1-1. JS의 기본 함수 선언 방식
function add(a, b) {
return a + b;
}
1-2. TS의 기본 함수 선언 방식
- 함수 선언식
// TS 함수 선언 - 함수의 매개 변수
function add(a: number, b: number) {
return a + b;
}
let result = add(10,20);
// 파라미터 a, b는 number 타입, 함수 리턴 타입은 정의되지 않음.
// 이런 경우 result는 자동으로 number 로 타입을 추론함. (num + num 이므로)
------------------------------------------------------------------------------------
// TS 함수 선언 - 함수의 반환 타입 추가
function add(a: number, b: number): number {
return a + b;
}
let result = add(10, 20);
// 파라미터 a, b는 number 타입, 함수 리턴 타입 또한 number 타입
// 함수 리턴 타입을 number 가 아닌 string, boolean 으로 하면 오류 발생. (num + num 은 number 타입이므로)
- 함수 표현식
/* TS - 함수 표현식 */
// 이름 있는 함수 표현식
const add = function add(a: number, b: number): number {
return a + b;
};
// 이름 없는 함수 표현식
const add = function (a: number, b: number): number {
return a + b;
};
// 화살표 함수
const add = (a: number, b: number): number => {
return a + b;
};
// 리턴 생략한 화살표 함수
const add = (a: number, b: number): number => a + b;
2. 함수의 인자
2-1. 기본값, 선택적 파라미터
// 함수 기본값 파라미터(default parameter)
function printText(text: string, type: string) {
console.log(text);
}
printText('hi'); // Error (str 타입의 파라미터 2개를 넘겨야하는데 하나만 넘겼으므로)
printText('hi','type');
--------------------------------------------------------------------------------
// 함수 옵셔널 파라미터(optional parameter)
function printText(text: string, type?: string) {
console.log(text);
}
printText('hi');
printText('hi','type');
// ? 를 통해 타입을 정의하면 해당 파라미터 값은 넘기지 않아도 됨.
2-2. Rest 문법을 통한 나머지 매개변수
// REST 문법이 적용된 나머지 매개변수
function sum(a: number, ...nums: number[]): number {
let totalOfNums = nums.reduce((acc, cur) => acc += cur, a);
return a + totalOfNums;
}
sum(0, 1, 2, 3); // nums = [1, 2, 3]
sum(0, 1, 2, 3, 4, 5); // nums = [1, 2, 3, 4, 5]
나머지 매개변수를 통해 타입 정의 시 주의해야 할 사항이 있습니다.
- 나머지 매개변수는 항상 마지막에 있어야 합니다.
- 나머지 매개변수는 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수에 제약이 없습니다.
- 나머지 매개변수는 함수 호출에서 파라미터의 "나머지"를 배열로 모아주는 기능입니다.
기초적인 함수 사용법에 대해서만 정리해봤다. 공부할 때마다 함수에 관한 새로운 내용을 배우면 추가적으로 정리해야겠다!
(현재 210506 기준 정리)
* 참고
'TypeScript' 카테고리의 다른 글
TS - Generics (0) | 2022.05.10 |
---|---|
TS - Class (0) | 2022.05.09 |
TS - 인터페이스 (0) | 2022.05.08 |
TS - 기본 타입 (0) | 2022.05.04 |
TS - 타입스크립트 란? (0) | 2022.05.01 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- javascript
- debouncing
- 시맨틱 웹
- vue
- 매겨변수와 인자
- next.js 환경변수
- array
- zustand
- 목표 일기
- React로 쓰로틀링 디바운싱 구현
- 1급 시민
- 자바스크립트 비동기 동작원리
- redirects
- 자바스크립트 동작원리
- 1급 함수
- programmers
- 함수형 컴포넌트
- rewrites
- 1급 객체
- Virtual Scroll
- typescript
- 타입스크립트
- 호이스팅
- 가상스크롤
- redux
- next.js에 .gitignore가 적용되지 않을 때
- 렌더링 속도 개선
- react
- useRef
- Next.js
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함