개발 일지

유니언(Union): 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 내로잉(Narrowing): 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁혀가는 것 1. 유니언 타입으로 두 개 이상의 타입 중 하나일 수 있는 값을 나타내는 방법 let math = Math.random() > 0.5 ? undefined : "math" //math type: string | undefined 이거 혹은 저거인 타입을 유니언 타입이라고 함 ` | (수직선 연산자)`를 이용해서 표시한다. 2. 타입 어노테이션으로 유니언 타입을 명시적으로 표시하는 방법 변수에 대한 명시적 타입 어노테이션을 제공하는 것이 유용할 때 사용하며, 사용자가 잠재적으로 다른 타입이 될 수 있음을 알고 있을 때 타입..

1. '타입' 정의 - 타입(Type) : 자바스크립트에서 다루는 값의 형태 (값의 속성/메서드/내장되어 있는 type of 연산자) - 타입스크립트가 인식하는 원시 타입 (7가지) string number bigint boolean symbol null undefined - 타입스크립트는 구문에서 변수나 함수의 타입을 유추할 만큼 충분히 똑똑하다. 2. 타입 시스템 - 타입스크립트의 타입 시스템이 코드를 이해하는 방법 코드를 읽고 존재하는 모든 타입과 값을 이해한다. 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다. 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다. 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시한다. 타입 추론 과정을 살펴보자. 다음은 속성을 잘..

자바스크립트에서 객체의 키는 보통 '문자열'이다. 배열은 객체이기 때문에, Object.keys를 이용해서 배열의 키를 나열할 수도 있다. 배열의 인덱스를 나열해보면 문자열로 변환되는 것을 쉽게 알 수 있다. 타입스크립트에서는 이러한 혼란을 방지하기 위해 숫자 'Key(키)'를 허용하고, 문자열 키와 다른 것으로 인식한다. interface Array { ... [n: number]: T; } 런타임 시점에서는 키를 모두 문자열로 인식할 것이므로, 이 코드는 타입 체크 시점에 오류를 잡는 용도로 사용할 수 있겠다. ** 여기서 사용된 number 타입은 버그를 잡기 위한 순수 타입스크립트 코드임을 명심하자! ** const x = [1, 2, 3]; const keys = Object.keys(x); c..

타입스크립트에서는 타입에 '인덱스 시그니처'를 사용해서 유연하게 매핑을 표현할 수 있다. 예를 들어보자. 아래 객체는 키(key)값 만 다를 뿐 키와 쌍을 이루고 있는 값(value) 의 타입은 모두 'string'으로 동일하다. const rocket = { name: 'Falcon 9' variant: 'Block 5' thrust: '7,607 kN', }; 따라서 객체의 타입을 다음과 같이 정의할 수 있다. type RocketType = {[property: string]:string}; const rocket:RocketType = {..} //정상 [property: string]: string 이 형태가 인덱스 시그니처이며, 다음과 같은 특징을 가진다. 1. key의 이름 : 키의 위치만 ..

타입 중복은 간과하기 쉽지만 코드 중복만큼 많은 문제를 일으키며, 불필요하게 코드 라인을 늘리게 되는 원인 중 하나이기도 하다. interface Person { firstName: string; lastName: string; } interface PersonWithBirthDate { firstName: string; lastName: string; birth: Date; } 위 예시를 살펴보자. Person 타입과 PersonWithBirthDate 타입은 언뜻 보기에도 굉장히 유사하다. PersonWithBirthDate를 Person의 확장개념으로 보면 아래와 같이 중복을 제거할 수 있게 된다. interface PersonWithBirthDate extends Person { birth: Da..

일반적으로 React에서 ref는 HTML 엘리먼트를 할당하는데 사용된다. DOM에 직접 접근하기 위해 ref를 사용하기도 한다. (Javascript에서 고유 id 부여하는 것처럼) 그런데, 함수형 컴포넌트에서 타입스크립트 사용시 무심코 useRef 훅을 사용하게 되면 typeError를 만나게 된다. 가장 좋은 방법은 ref를 null로 초기화하는 것이다. 또한 유형 인수를 사용하여 ref 속성으로 사용되는 요소에 대해 각각 HTMLInputElement 유형으로 ref를 캐스팅해야 합니다. import * as React from 'react'; const App = () => { const ref = React.useRef(null); React.useEffect(() => { if (ref.cu..

체크박스를 커스텀하는 과정에서, 체크박스의 상태에 따라 보여지는 스타일이 달라져야 하기 때문에, props로 체크박스의 상태를 넘겨줘야 했다. 필자는 CRA with Typescript Template에 Emotion을 적용해서 개발 중에 있었음. React + style-component 사용할 때 처럼 그냥 props로 넘겨주면 오류가 남 (변경 전) index.tsx const [checked] = useState(false) style.ts export const checkBoxStyle = css` background: ${(props) => props.checked ? `url(${active}) no-repeat 100%/contain` : "#ffff"}; `; (변경 후) 👉 방법 : s..

CRA로 타입스크립트와 emotion을 사용하고 있는데, public 디렉토리에서 이미지들을 import 하지 않고, src/assets 디렉토리에서 이미지를 import 하려고 했다. 🤔 public vs assets - public : 정적 디렉토리, 컴파일 시 경량화 되지 않음. 웹팩이 아니라 build 폴더에 복사 되므로 경로 오입력 등의 이유로 에러가 났을 경우, 위치를 찾기 힘들다. 경로에 '%PUBLIC_URL%' 사용 - assets : 웹팩으로 처리됨. 컴파일 에러시 경로 추적가능. 대부분의 이미지들은 여기에서 관리한다. 기존에 public/images 폴더에서 이미지 경로를 호출할 때는 아무 문제 없이 잘 되었다. (너무나도 당연함) 그런데... src/assets 으로 이미지 경로를 ..

1. 함수의 타입 설정 파라미터도 일종의 변수, 타입 설정이 가능하다 return 되는 값 의 타입 지정도 가능하다, function multipleTwice(x:number) :number { return x*2; } 2. 함수의 특징 - void 타입 return이 없을 경우 void 타입 선언 가능 return 문이 없어야 하는데 return될 때, 이를 방지해준다. function multipleTwice(x:number) :void { } 3. 파라미터 옵션 파라미터를 지정해두고 함수 호출시 파라미터를 사용하지 않을 경우에는, 타입스크립트의 경우 에러를 뱉는다. (자바스크립트에서는 상관없다.) function multipleTwice(x?:number) :void { } multipleTwice..