Typescript

Typescript

Effective Typescript - 아이템23

Item 23 - 한꺼번에 객체 생성하기 객체를 생성할 때는 속성을 하나씩 추가하기보다는 여러 속성을 포함해서 한꺼번에 생성해야 타입 추론에 유리합니다. interface Point { x: number y: number } const pt: Point = {} // ~~ {} 형식에 x,y 속성이 없습니다. pt.x = 3 pt.y = 4 interface Point { x: number; y: number; } const pt: Point = { x: 3, y: 4, }; pt.x = 4; //정상 console.log(pt.x); // 4 작은 객체들을 조합해서 큰 객체를 만들어야 하는경우 '객체 전개 연산자' ... 를 사용하여 만들자. interface Point { x: number y: nu..

Typescript

Effective Typescript - 아이템20~아이템22

아이템20 - 다른 타입에는 다른 변수 사용하기 let id = "12-34-56" fetchProduct(id) // string 으로 사용 id = 123456; fetchProductBySerialNumber(id) //number 으로 사용 // '123456'형식은 'string' 형식에 할당할 수 없습니다. 타입스크립트는 '12-34-56' 값을 보고 string 으로 추론했기 때문에 number 형식은 할당할 수 없습니다. 여기서 '변수의 값은 바뀔 수 있지만 타입은 보통 바뀌지 않는다'는 중요한 관점을 알 수 있습니다. const id = '12-34-56' fetchProduct(id) const serial = 123456 // OK fetchProductBySerialNumber(se..

Typescript

Effective Typescript - 아이템19

Item19 - 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입스크립트에 익숙하지 않은 개발자는 모든 변수에 타입을 명시해야 한다고 생각합니다. 그러나 타입스크립트는 많은 타입 구문을 필요로 하지 않습니다. let x:number =12; let x =12; // 이렇게만 해도 충분 타입스크립트가 굳이 number를 명시하지 않았음에도 불구하고 자연스럽게 추론되어 있음을 확인할 수 있습니다. 이렇게 타입 추론이 된다면 명시적 타입 구문을 필요하지 않습니다. 오히려 코드 가독성을 해칠뿐입니다. 타입스크립트는 더욱 복잡한 객체도 추론 가능합니다. const person: { name: string born: { where: string when: string } died: { where: string ..

Typescript

Effective Typescript - 아이템18

Item18 - 매핑된 타입을 사용하여 값을 동기화하기 산점도(Scatter plot)을 그리는 컴포넌터의 타입을 모델링 해보겠습니다. interface ScatterProps{ // Data xs:number[]; ys:number[]; // Display xRange:[number,number]; yRange:[number,number]; color:string; //Events onClick:(x:number,y:number,index:number) => void; } 데이터나 디스플레이가 변경되면 차트를 다시 그려야하지만 이벤트 핸들러가 변경된경우 그럴 필요가 없습니다. 따라서 최적화를 해야하는데 두가지 방법으로 해보겠습니다. function shouldUpdate( oldProps:Scatter..