일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- BlockFormattingContext
- parent padding
- accordian
- Carousel
- QueryClient
- 제어컴포넌트
- DOM
- 부모패딩
- 문제해결
- alias설정
- debouncing
- ignore padding
- useQueryClient
- 부모요소의 패딩 무시
- createPortal
- 화살표2개
- 함수형프로그래밍
- ㅡ
- twoarrow
- BFC
- es6
- ?? #null병합연산자
- 리액트
- CustomHook
- react
- vite
- 조건부스타일
- tailwindCSS
- 서초구보건소 #무료CPR교육
- transition
Archives
- Today
- Total
프론트엔드 첫걸음
type void 본문
타입스크립트의 타입으로 void가 쓰이는 경우는 세가지 경우가 있다.
매개변수, 메서드 일때의 void와 함수일때의 void가 다른데,
매개변수, 메서드에서의 void는 Return 값을 사용하지 않겠다(상관하지않겠다) 라는 뜻이고,
함수에서의 void는 return값이 '없다'는 뜻이다.
//함수를 선언하고 그밑에 바로 함수를 구현하면 위에 있는 함수의 선언에 대한 부분은 타입이 된다.
function forEach(arr: number[], callback: (el: number) => undefined): void;
function forEach() {
}
구현하기 싫으면 declare 로 선언하면 되는데, 여기서 callback함수의 리턴값을 undefined로 해줬을때와
void로 해줬을때의 차이점을 확인 할 수 있다.
//push 의 리턴값은 number니까 forEach의 리턴값이 undefined면 에러가 난다.
//declare function forEach(arr: number[], callback: (el: number) => undefined): void;
//리턴값이 void면 push의 return값이 number여도 에러가 나지 않는다.
declare function forEach(arr: number[], callback: (el: number) => void): void;
let target: number[] = [];
forEach([1, 2, 3], el => target.push(el));
//
=> 여기서 확인할 수 있는것.
매개변수일때 void는 return값을 상관하지 않겠다 라는 뜻.
cf. declare가 언제쓰이냐?
해당 함수를 사용하는 script와 해당 함수를 선언한 script가 분리되어 있을 때 ,
해당함수를 사용하려는데 타입에러가 날 때 ~
이 함수가 어딘가에 선언이 되어있다는걸 보증하면서 타입을 선언해줄때 declare 사용해준다.
여기서 void가 쓰여야 하는 이유가 나온다.
1. return 값이 undefined일때
//1. return 값이 undefined 일때
declare function forEach(arr: number[], callback: (el: number) => number): void;
let target: number[] = [];
forEach([1, 2, 3], el => { target.push(el) }); //void 형식은 undefined 형식에 할당할 수 없습니다.
forEach([1, 2, 3], el => target.push(el)); // number 형식은 undefined 형식에 할당할 수 없습니다.
2. return 값이 number 일때
//2. return 값이 number 일때
declare function forEach(arr: number[], callback: (el: number) => number): void;
let target: number[] = [];
forEach([1, 2, 3], el => { target.push(el) });// void형식은 number 형식에 할당할 수 없습니다.
forEach([1, 2, 3], el => target.push(el));
결국 void로 해야 두 경우 모두 에러가 안난다.
declare function forEach(arr: number[], callback: (el: number) => void): void;
let target: number[] = [];
forEach([1, 2, 3], el => { target.push(el) });
forEach([1, 2, 3], el => target.push(el));
interface 에서 메서드가 void일 때
interface A {
talk: () => void;
}
const a : A = {
talk() { return 3; } //에러가 안남. return 값이 숫자인데도 talk가 리턴값을 신경안쓰니깐..
}
// 이렇게 하면 b는 3이 되는데 b의 타입은 void가 되어버리는 상황
//const b= a.talk();
//const b:number= a.talk(); //이렇게 하면 에러가 남
const b = a.talk() as unknown as number;
// b는 number가 확실할때 as unknown as number 이렇게 타입변환을 시켜준다.
'개발 공부 > Typescript' 카테고리의 다른 글
웹스톰 타입스크립트 파일 실행하기 (0) | 2024.04.27 |
---|---|
객체 리터럴의 추가 속성 검사 (0) | 2024.02.23 |
object를 enum처럼 사용하기 (0) | 2024.02.23 |