-
알아두면 유용한 TypeScript의 Utility type 정리Frontend 2020. 6. 21. 22:11
TypeScript의 Utility Type 업무할 때 종종 튀어 나오는 애들인데 내가 잘 모르는 것 같아서 한 번 쭉 정리해보았다. 정리하다보니 진작 알아뒀으면 유용하게 많이 썼을텐데 싶은 것들이 엄청 많다. 심심할 때마다 다시 읽어봐야겠다. Partial 주어진 Type의 모든 property를 optional로 세팅한 Type을 구성한다. 다시 말해 주어진 Type의 모든 부분 집합 type을 return한다. 즉, 아래 Todo interface에 title과 description이 정의되어 있는데, Todo 중에서 일부 속성으로만 이루어진 type을 지정하고 싶을 때, Partial을 사용하면 된다. interface Todo { title: string; description: string; ..
-
[TypeScript] 타입스크립트 - GenericFrontend 2020. 3. 3. 21:49
function generateString(message: string): string { return message; } function generateNumber(message: number): number { return message; } 위 예시와 같이 string을 인자로 받아서 string을 리턴하는 함수와 number를 인자로 받아서 number를 리턴하는 함수가 있다고 해보자. 두 개 모두 인자를 받아서 그대로 리턴하는 아주 단순한 함수이다. 그런데 하나는 string을 처리하고 하나는 number를 처리한다는 차이점 밖에 없다. 이렇게 동일한 로직을 수행하는 함수를 단지 타입이 다르다는 이유로 별개의 함수로 구현한다는 것은 매우 비효율적인 일이다. 바로 이러한 상황에 유용한 것이 바로 ..
-
[TypeScript] 타입스크립트 - Type assertions, Type aliasFrontend 2020. 3. 2. 22:24
각잡고 글 쓰려고 마음 먹으니 너무 부담스럽고 잘 안하게 되어서 아주 가볍게 요약 정리하는 느낌으로 타입스크립트 기초 내용들을 하나씩 정리해보려고 한다. Type assertions 실제 데이터 구조를 바꿔주는 형 변환이 아니고 단지 ‘타입이 이것이다’라는 것을 typescript 컴파일러에게 알려주는 것을 의미 (즉, 개발자가 확실히 이 타입이라고 확신하는 경우에만 사용한다.) 변수 as 강제할 타입 변수 let someValue: any = 'this is a string'; let strLength: number = (someValue).length; let strLength2: number = (someValue as string).length; // jsx에서는 as를 많이 사용한다. ( 사용 ..
-
[TypeScript] 타입스크립트 - Installation & Basic TypesFrontend 2020. 1. 27. 17:26
JavaScript: loosely typed or a dynamic language 자바스크립트는 느슨한 타입 언어, 혹은 동적 언어라고 불린다. 즉, 변수의 타입을 미리 선언하지 않아도 코드가 해석될때 자동으로 파악이 된다. 그 말은 같은 변수에 여러 타입을 넣을 수 있다는 뜻이다. 그러니까 var a 라고 변수를 선언하면 그 변수에 숫자든 문자든 배열이든 함수든 원하는 타입을 모두 넣을 수 있다는 뜻이다. var a = 123;// a is now a number a = 'string';// a is now a string a = { b: 1 };// a is now an object 이 부분이 매우 편리할 수도 있겠지만, 반대로 여러가지 버그를 야기하는 경우가 많았다. 개발자가 의도하지 않은 타입..