typescript

React에서 드래그로 요소 크기 조절하기 KaTeX Playground에서 저장된 수식이 길면 사이드바를 넘어 안 보이는 경우가 있습니다. 드래그를 통해 사이드 바의 크기를 조절할 수 있는 기능을 추가했습니다. 드래그 기능 추가 작동 원리 먼저 드래그할 부분에 실제로 드래그할 요소를 생성합니다. 이 요소를 엣지라고 부르겠습니다. 엣지를 클릭하면 드래그가 시작되고 드래그에 따라 사이드바의 너비를 변경해 줄 겁니다. 엣지의 `mouseDown` 이벤트는 드래그의 시작을 알립니다. 드래그가 시작되면 페이지 어디서나 마우스가 움직이면 사이드바를 resize 하도록 document의 `mouseMove`이벤트에 resize 이벤트 리스너를 추가합니다. 마우스가 움직이면 `mouseMove`이벤트가 발생하고 사이..

Object로 구성된 Array에서 특정 property 값을 타입으로 추출하기. feat. type guard Object array에서 타입 추출하기 typescript에서 같은 형태의 object를 담은 array에서 object의 특정 키값을 추출할 상황이 생각보다 많이 나온다. 이참에 한번 정리해보자. The Problem 웹 사이트를 만들다가 객체 배열을 관리하다 생긴 문제였고 typescript를 사용할 때 많이 마주치는 경우인 것 같아 예시를 통해 정리해보려 한다. 예시를 위해 작성된 코드이기에 내용은 이상하더라도 구조는 같으니 어떻게 처리하는지만 봐주셨으면 한다. 사람들의 데이터를 관리하고 처리하는 상황을 예시로 들어보자. 모든 사람들에 대한 정보를 담은 people 배열이 있고 사람은 ..

let userError:object; userError = { name: "cloer", age: 10 }; // console.log(user.name) // Error: Property 'name' does not exist on type 'object'. type Score = 'A'|'B'|'C'|'D'; interface User { name: string; age: number; gender?: string; //optional readonly birthYear: number; [grade:number]: Score }; let user:User = { name:'cloer', age:10, birthYear: 2012 }; user.gender = 'male'; // user.birthYe..

// primary type const myName:string = 'cloer' const age:number = 13 const married:boolean = false // Array const weekdays:string[] = ['mon', 'tue', 'wed'] const weekend:Array = ['sat', 'sun'] // tuple const user:[string, number] = [myName, age] // void const voidFunc = ():void => { // No return } // never const naverFunc1 = ():never=>{ while(true){ // Infinite loop } } const naverFunc2 = ():neve..