본문 바로가기

프론트엔드15

[타입스크립트] 제네릭 - 2 (타입 제한) 제네릭 타입 제한 1. 배열 함수 호출 시 타입을 명시하지 않을 경우, 아래처럼 에러가 날 수 있음 function logTextLength(text: T): T { console.log(text.length); // error! T에 length 프로퍼티가 없다 return text; } logTextLength('hi'); T → T[] 배열로 바꾸면 length 프로퍼티를 사용할 수 있음 function logTextLength(text: T[]): T[] { console.log(text.length); return text; } logTextLength(['hi', 'abc']); 2. 정의된 타입 extends를 이용해 LengthType을 상속하면 length 프로퍼티를 기본으로 갖고, 더 .. 2023. 1. 12.
[타입스크립트] 제네릭 - 1 (개념과 예제) 애니스크립트 대신 제네릭을 사용해보자 공통으로 사용할 커스텀 훅을 만들 때, 어떤 타입의 파라미터가 들어올 지 모르면 value : any 로 하곤 했었다 (No! 지양해야 됨) 이 때 팀원 분께서 해주신 코드 리뷰! " any 대신 사용하는 곳에 따라서 type을 넣어줄 수 있는 generic을 사용해주세요 " 이름만 들어보고 어떤 역할을 하는지 몰랐었는데 타입스크립트 강의를 들어보니 정말 유용한 개념이라 글로 남기게 되었다. 제네릭이란? 개념 단순하게 설명하면 '인자로 타입을 받는 함수' // 인자로 들어온 것을 타입으로 삼는다 : "hi" => string const log = { console.log(value); return value; }; const res = log("hi"); extend.. 2023. 1. 12.
[함수형 프로그래밍] 커링 사례 모음 1. 필터링 함수 색상, 사이즈를 모두 만족하는 옷 찾기 const items = [ { 이름: '스웨터', 색상 : '검정색', 사이즈: 'M', }, { 이름: '가디건', 색상 : '갈색', 사이즈: 'S', } ]; const identity = key => value => item => item[key] = value; const colorCheck = identity('색상'); const stateCheck = identity('지역'); const allFilters = (items, ...checks) => { return items. .filter(item => checks.every(check => check(item)) .map(item => item['이름']); }; allFil.. 2022. 12. 28.