Curt Poem about Computer

타입스크립트를 사용할 때 타입을 조금 더 편하게 사용할 수 있는 팁들을 준비해보았습니다.Roll 타입으로 예쁘게 펼쳐보기type Roll = { [K in keyof T]: T[K];};// & {};Matt Pocock이 고안한 Roll이라는 타입은 네이버의 infer, never만 보면 두려워지는 당신을 위한 타입 추론에서 알게된 핵입니다. 다음과 같이 복잡한 타입을 사용하면 개발자는 해당 객체에 들어있는 타입이 정확히 무엇인지 확인하기 힘든데요. Roll을 이용하면 객체를 해부하여 볼 수 있게 됩니다.type A = { a: string; b: number; c: boolean;}type B = { d: boolean; e: number; f: string[];}t..

시리즈의 다른 글 보기 이전 글들에서 타입스크립트의 타입 간의 관계는 집합처럼 포함관계를 가진다고 설명했었습니다. 조금 더 전문적인 용어로 서브타이핑 혹은 덕타이핑 방식으로 타입을 판별하기 때문에 어떤 타입이 다른 타입의 요소를 모두 가지면 대체하여 사용하여도 문제가 없는 것으로 봅니다. 특히 서브타이핑의 방식으로 이해하면 서브 타입은 수퍼타입을 대체할 수 있습니다. 이대로 해석하면 어떤 타입이 들어갈 수 있는 자리에는 그 타입의 서브타입을 넣어도 아무 문제가 없어야 합니다. 하지만 다음과 같이 입력값 즉, 함수의 매게변수 사이에서는 더 구체적인 타입을 넣는 것이 허용되지 않습니다.Typescript Playground에서 보기interface Animal { name: string;}interface..

type-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기: Easy 난이도 - 2type-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기: Easy 난이도 - 1일반적으로 프로젝트에서 타입스크립트를 사용한다고 해도 복잡한 타입을 만들고 적용할 일은 잘 없었던 것같습니curt-poem.tistory.comtype-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기 시리즈의 Easy 난이도 마지막 입니다. 그럼 바로 시작하겠습니다.Concat요구JavaScript의 Array.concat 함수를 타입 시스템에서 구현하세요. 타입은 두 인수를 받고, 인수를 왼쪽부터 concat한 새로운 배열을 반환해야 합니다.예시type Result = Concat //..

시리즈의 다른 글 보기구조적 타이핑지난 글에서 타입스크립트를 집합이라고 표현하였는데요. 이를 조금 더 정확하게 말하면 구조적 서브타이핑(structural subtpying)이라고 합니다. 구조적 서브타이핑은 다른 말로 덕 타이핑 (duck typing)이라고도 하는데, "오리처럼 꽥꽥거리고 걷고, 헤엄치고, 날아다니는 새가 있다면 그 새를 오리라고 부를 것"이라는 말에서 유래되었다고 합니다. 즉 A 타입의 규칙(속성 또는 메서드)을 전부 가진 B라는 오브젝트가 존재한다면 오브젝트 B는 A 타입으로 본다는 말입니다.type Duck = { quack: () => void; walk: () => void; swim: () => void; fly: () => void;};function quack(d..

시리즈의 다른 글 보기타입스크립트는 자바스크립트 위에 타입시스템을 추가하여 코드의 안정성을 높이고 대규모 애플리케이션 개발을 보다 용이하게 하려는 목적으로 만들어졌습니다. 자바스크립트는 동적 타입 언어로 런타입에 타입과 관련된 오류거 발생할 수 있습니다. 이에 마이크로소프트 사에서 자바스크립트의 한계, 특히 코드의 안정성과 유지 보수성 향상을 위해 타입스크립트를 개발하였습니다. 타입스크립트는 컴파일 과정을 통해 자바스크립트 코드로 변환되는데, 컴파일 시에 타입 오류를 발견할 수 있도록 만들었습니다. 더불어 자바스크립트에서 지원이 미흡했던 객체 지향 프로그래밍을 쉽게 구현할 수 있도록 하였습니다.타입 추론타입스크립트의 이름에서 드러나있듯이 타입은 타입스크립트에서 가장 중요한 요소입니다. 특히 타입스크립트는..

type-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기: Easy 난이도 - 1일반적으로 프로젝트에서 타입스크립트를 사용한다고 해도 복잡한 타입을 만들고 적용할 일은 잘 없었던 것같습니다. 저 또한 함수의 파라미터와 리턴값에서 number, string 등 기본적인 자료형만curt-poem.tistory.com type-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기 시리즈의 2번째 포스팅입니다. 이번 역시 easy난이도입니다. easy난이도는 아마 3번째 시리즈까지 포스팅하면 끝날 것 같습니다. 그럼 바로 시작하겠습니다.Length of Tuple요구배열(튜플)을 받아 길이를 반환하는 제네릭 Length를 구현하세요.예시 type tesla = ['tesla'..

시리즈의 다른 글 보기   타입스크립트 심층 분석의 첫 번 째 글에서는 타입스크립트와 타입에 대해 원론적인 내용을 담고 있습니다. 가볍게 시작한다는 마음으로 읽어주시면 좋겠습니다. 최근 타입스크립트의 깊이 있는 사용에 대해 관심이 생겼는데요. 사실 일반적인 웹 앱을 개발할 때 타입스크립에 대한 많은 학습이 필요하지 않은 것 같습니다. 하지만 이전에 개발 노트: React navigation에서 덜 귀찮기 위해 더 강력한 타입 사용하기글을 쓴 것처럼 타입을 더 상세하게 적용하여 명확한 코드를 작성하고 싶은 욕심과 라이브러리 개발자들이 타입을 설정하는 것에 대한 궁금증, 그리고 언젠간 직접 라이브러리 개발을 하고 싶다는 욕망까지 많은 이유가 합쳐져 타입 스크립트에 대해 깊이 있게 공부를 시작하였습니다.타입스..

일반적으로 프로젝트에서 타입스크립트를 사용한다고 해도 복잡한 타입을 만들고 적용할 일은 잘 없었던 것같습니다. 저 또한 함수의 파라미터와 리턴값에서 number, string 등 기본적인 자료형만이 사용했었습니다. 물론 그대로 타이핑하지는 않았지만 interface를 만들어 json 키-값을 타입으로 만든다거나, 컴포넌트의 props의 타입을 지정해주는 것정도에 그쳤습니다. 이 정도로만 사용하여도 타입스크립트의 장점을 가져올 수 있으며, 충분히 편리한 개발 경험을 가질 수 있습니다. 하지만, 라이브러리의 내용을 보거나 혹은 단순 성장의 욕구로 타입스크립트를 더 똑똑하게 사용하고 싶었습니다. 저의 경우 리액트 네이티브 프로젝트에서 네비게이션 기능의 타입을 쉽게 쓰기 위해 타입을 만들어 가면서 타입스크립트의..

타입 추론(Type Inference)타입스크립트는 여러 값들의 타입을 자동으로 추론하는 타입 추론기능이 있습니다. 타입스크립트가 코드를 해석하여 해당 값의 타입을 알아서 찾는 편리한 기능입니다.let a = 3let b = "타입"변수 a와 b는 타입을 명시적으로 설정해주지 않았음에도 불구하고 타입스크립트는 a가 number, b가 string이라는 것을 알 수 있습니다. 타입 추론은 변수를 선언하고 초기화할 때 자동으로 일어나는 과정입니다. 변수 뿐만아니라 함수의 반환값이나 객체의 속성에서도 자동으로 타입을 추론하여 해당 값이 어떤 타입인지 알고 있습니다.Best common typelet x = [0, 1, null];위와 같이 배열에 숫자와 null이 동시에 들어간 경우는 어떻게 될까요? 타입스크..

RN 프로젝트에서 화면 이동을 표현하기 위해 React Navigation 라이브러리를 선택하였습니다. 전체 기능의 몇 개의 카테고리로 나누어져있고 각각의 카테고리에서 화면을 전환하기 위해 서로 다른 종류의 중첩된 네비게이션이 필요했기 때문에 React Navigation이 적절하다고 생각했습니다. BottomTabNavigation으로 카테고리를 나누고 StackNavigation으로 카테고리 내에서 화면 이동을 표현하는 것이 생각했던 모습과 정확히 맞아 떨어졌기때문입니다. 그런데 사용을 하던 중 한 가지 불편한 점이 있었습니다. 몇몇 스크린에서는 해당 스크린으로 이동할 때 특정 데이터를 전달 받아야했습니다. React Navigation에서는 route와 param을 통해 그 기능을 쉽게 구현할 수 ..