일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- JavaScript
- express
- API
- nodejs
- 자바스크립트
- frontend
- CSS
- 리액트
- react
- Mongoose
- Flutter
- ES6
- NextJs
- javscript
- heroku
- node.js
- form
- Component
- ECMAScript
- DART
- HTML
- Session
- MongoDB
- pug
- clonecoding
- backend
- GRID
- graphQL
- TypeScript
- CLONE
- Today
- Total
Enjoy Programming
Generic - [작성중] 본문
https://www.typescriptlang.org/ko/docs/handbook/2/generics.html
generic이란 데이터의 타입을 일반화하는 것이다. 자료형을 정하지 않고 여러 타입을 사용할 수 있게 해준다.
선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 방법이다.
한번의 선언으로 다양한 타입에 재사용이 가능하다.
어떤 함수 예를들어
const numberFn = (arg: number): number => {
return arg;
}
const stringFn = (arg: string): string => {
return arg;
}
const booleanFn = (arg: boolean): boolean => {
return arg;
}
이런 중복되는 함수가 여러개 있다고 하자. 함수의 인자와 반환값이 다르지만 형태는 동일하다 동일 인자를 받아 반환한다.
이걸 쉽게 하는 방법은 any타입이 있겠지만 any 타입은 반환시점에서 타입체크가 이루어지지 않기에
제네릭을 쓴다.
const genericFn = <T extends {}> (arg: T): T => {
return arg;
}
이렇게 말이다. 위 <> 안에 extends {}의 경우 jsx 문법 안에서 동작 할때 화살표함수의 경우 이렇게 작성해주면 되고
일반 function의 경우
function genericFn<T> (arg:T):T => {
return arg;
}
이렇게 작성해주자.
.. 작성중
'JavaScript > TypeScript' 카테고리의 다른 글
typescript interface (0) | 2021.08.23 |
---|---|
typescript default type (0) | 2021.08.22 |
event And Typescript (0) | 2021.08.02 |
React Props and Typescript (0) | 2021.08.01 |
Typescript and react : STATE (0) | 2021.07.07 |