Cherry & Cherish

이 글은 이펙티브 타입스크립트 '아이템 31 타입 주변에 null값 배치하기'를 정리한 글입니다. strictNullChecks 설정을 처음 켜면 null이나 undefined 값 관련된 오류들이 갑자기 나타난다. 이 오류를 해결하기 위해 코드 전체에 if 구문을 추가해야 한다고 생각할 수 있다. 어떤 변수가 null 이 될 수 있는지 없는지를 타입만으로는 명확하게 표현하기 어렵기 때문 예를 들어, B가 A로부터 비롯되는 값이라고 하자. A가 null이 될 수 없을 때, B역시 null이 될 수 없고, 그 반대가 A가 null이 될 수 있다면, B역시도 null이 될 수도 있다. 이 관계들이 겉으로 드러나지 않기 때무에 혼란스럽다. 값이 전부 null이거나, 전부 null이 아닌 경우로 분명히 구분된다면..

이 글은 이펙티브 타입스크립트 '아이템 30 문서에 타입 정보를 쓰지 않기'를 정리한 내용입니다. “코드와 주석이 맞지 않는다면, 둘 다 잘못된 것이다” 타입스크립트의 타입 구문 시스템은 간결하고, 구체적이며, 쉽게 읽을 수 있도록 설계되었다. 즉, 함수의 입력과 출력의 타입을 코드로 표현하는 것이 주석보다 더 나은 방법이다. 타입 구문은 타입스크립트 컴파일러가 체크해주기 때문에, 절대로 구현체와의 정합성이 어긋나지 않는다. 누군가 강제하지 않는 이상 주석은 코드와 동기화되지 않는다. 예를 들어, 함수를 변경했을 때 주석을 갱신하는 것을 강제하지 않는다면 주석을 변경하지 않는 일이 발생할 수 있다. 하지만, 타입구문은 타입스크립트 타입 체커가 타입 정보를 동기화하도록 강제한다. 결과적으로 주석 대신 타입..

이 글은 이펙티브 타입스크립트 '아이템 14 타입 연산과 제너릭 사용으로 반복 줄이기'를 정리한 글입니다. 코드를 짤 때는 같음 코드를 반복하지 말라는 DRY (don’t repeat yourself) 원칙이 있다. 타입에서도 같은 원칙을 적용해야 한다. 타입 중복은 많은 문제를 발생시킨다. 방법 1 : 타입에 이름 붙이기 function distance(a: { x: number; y: number }, b: { x: number; y: number }) { return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)) } //상수를 사용해서 반복을 줄이는 기법 적용 interface Point2D { x: number y: number } fun..

이 글은 이펙티브 타입스크립트 '아이템 13 타입과 인터페이스의 차이점 알기'를 정리한 글입니다. 타입스크립트에서 명명된 타입을 정의하는 방법은 두 가지가 있다. 클래스를 사용할 수도 있지만, 클래스는 값으로도 쓰일 수 있는 자바스크립트 런타임 개념이다. (아이템 8에서 설명했음) 대부분의 경우 타입을 사용해도 되고, 인터페이스를 사용해도 된다. 타입과 인터페이스 사이에 존재하는 차이를 명확히 알고 같은 상황에서 동일한 방법으로 명명된 타입을 정의해 일관성을 유지해야 한다. 1. type 키워드 사용 type TState = { name : string; capital : string; } 2. 인터페이스 사용 interface IState { name: string; capital: string; } ..

이 글은 이펙티브 타입스크립트 '아이템 12 함수표현식에 타입 적용하기'를 정리한 글입니다. 자바스크립트에서는 함수 ‘문장’과 함수 ‘표현식’을 다르게 인식한다. function rollDice1(sides: number) : number {/* ... */} //문장 const rollDice2 = function(sides: number) : number {/* ... */} //표현식 const rollDice3 = (sides: number) : number => {/* ... */} //표현식 타입스크립트에서는 함수 표현식을 사용하는 것이 좋다. 함수의 매개변수부터 반환값까지 전체를 함수 타입으로 선언해 함수 표현식에 재사용할 수 있다는 장점이 있기 때문이다. 장점1 : 함수 타입의 선언은 불필..

이 글은 이펙티브 타입스크립트 '아이템 11 잉여 속성 체크의 한계 인지하기'를 정리한 글입니다. 타입이 명시된 변수에 객체 리터럴을 할당할 때 TS는 해당 타입의 속성이 있는지, 그리고 ‘그 외의 속성은 없는지’ 확인한다. Room의 구조적 타이핑 interface Room { numDoors: number; ceilingHeightFt: number; } const r: Room = { numDoors: 1, ceilingHeightFt: 10, elephant: "present", //오류메세지 : 개체리터럴은 알려진 속성만 지정할 수 있으며 'Room' 형식에 elephant 가 없습니다. } 구조적 타이핑관점으로 생각해보면 오류가 발생하지 않아야 한다. 구조적 타입 시스템에서 발생할 수 있는 오..

이 글은 이펙티브 타입스크립트 1장 ‘타입스크립트 알아보기’ 중 아이템5 ‘any 타입 지양하기’를 바탕으로 작성되었습니다. Any 타입 지양하기 타입스크립트로 코드를 짜다보면, 모르는 타입이 발생할 것이고, 이때 우리는 큰 고민에 빠진다. any 타입을 그냥 사용한다면, 10초면 해결될 문제인데, 타입 선언을 추가하면 한 참 동안 문제 해결 과정을 겪어야 하기 때문이다. 이런 고민의 상황에서 손쉽게 any 타입을 선택하면 안되는 이유에 대해 설명하고자 한다. TypeScript를 사용한다면 반드시 Any 타입을 지양하자! 타입스크립트의 타입 시스템은 gradual하고, optional하다. 점진적이다 - 코드에 타입을 조금씩 추가할 수 있다. 선택적이다 - 언제든지 타입체커를 해제할 수 있다. any ..

자바스크립트에서 사용하는 자료는 크게 기본 자료형과 객체 자료형으로 구분할 수 있다. 자바스크립트는 기본 자료형이 객체 자료형이 될 수도 있다. protype 객체를 알아보자. 1. 객체 자료형 속성과 메소드를 가질 수 있는 모든 것은 객체다. a라는 이름의 배열을 선언하고 배열에 속성을 지정한 후 확인해보면 배열이 속성을 가질 수 있다. 함수도 객체다. 일급 객체에 속한다고 할 수 있다. Array.isArray() 메소드를 사용한다. (Array도 메소드를 갖고 있으므로 객체다) 2. 기본 자료형 자바스크립트에서는 실체가 있는 것 (undefined와 null 등이 아닌 것) 중에 객체가 아닌 것을 기본 자료형이라고 부른다. 숫자, 문자열, 불이 기본 자료형이다. 기본 자료형은 객체가 아니므로 속성을..