이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅뭉뚱그려 string 타입으로 할당하는 것을 피하고 구체적인 타입을 사용하는 것이 좋다 ✅변수의 범위를 보다 정확하게 표현하려면 string 타입보다는 string 리터럴 타입의 union을 사용하는 것이 좋다. - 엄격한 타입 체크가 가능하여 생산성을 향상시킬 수 있다 ✅객체의 프로퍼티 이름을 함수 매개변수로 받을 때는, string 보다 keyof T를 사용하는 것이 좋다 📍string 타입의 변수를 선언할 때는 더 좁은 타입을 고려해야 한다 - Date 타입을 사용할 수 있는 프로퍼티에도 string을 사용한다면 개선이 필요하다 // 리팩토링 전 // 모든 프로퍼티가 string이라서 에러를 유발할 수 있다 interface Album..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅유니온을 가진 인터페이스는 프로퍼티간의 관계가 불분명하기 때문에 에러를 유발할 수 있다 ✅유니온의 인터페이스보다 인터페이스의 유니온이 더 정확하고 타입스크립트가 이해하기도 좋다 ✅타입에 태그를 넣는 tagged union을 사용하는 편이 좋다 📍인터페이스들의 유니온 예시 1 인터페이스의 프로퍼티를 유니온 타입으로 사용하는 것보다, 인터페이스들의 유니온 타입 형태로 사용하는 것이 바람직하다 - 예시 type FillPaint = unknown; type LinePaint = unknown; type PointPaint = unknown; type FillLayout = unknown; type LineLayout = unknown; type ..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅JS로 작성한 코드의 확장자를 .ts로 바꿔도 실행 가능하다. (왜냐면) ✅반면, TS로 작성한 코드의 확장자를 .js로 바꾸면 에러가 발생한다. (타입스크립트 별도의 문법 존재) 📍타입 구문을 통해 타입스크립트에게 코드의 의도를 전달 ✅strictNullChecks: false // tsConfig: {"strictNullChecks":false} function extent(nums: number[]) { let min, max; for (const num of nums) { if (!min) { // min 이 undefined 이든 0 이든 이 부분이 실행되어버림 min = num; max = num; } else { min = Ma..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅주석과 변수명에 타입 정보를 적는 것은 피해야 한다 - 타입 선언이 중복되는 것을 넘어 모순이 발생하는 사태가 벌어질 수 있다 ✅타입이 명확하지 않은 경우 변수명에 단위 정보를 포함하는 것을 고려하는 것이 좋다 - timeMs 📍주석을 꼭 써야 할까? - 코드와 주석이 맞지 않으면 둘 다 잘못된 것으로 간주할 수 밖에 없다 - 함수의 입력과 출력의 타입을 코드로 표현하는 것이 주석보다 더 나은 방법이다 📍타입스크립트로 주석을 개선하기 - 특정 매개변수를 설명하고 싶다면 JSDoc의 @param 구문을 사용한다 - 불필요한 주석은 사용하지 않는다 (함수 부연 설명 등) - readonly를 사용하여 주석을 대체하는 예시 /** nums를 변경..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅명시적 타입 구문 작성의 수고로움을 덜기 위해 ES6+ 의 다양한 선언형(함수형) 내장 메서드를 사용하는 것이 좋다 (또는 lodash 같은 유틸리티 라이브러리를 사용하거나...) 📍CSV 파싱 예시 - csv 파일을 파싱하는 예제 const csvData = `번호,제목,내용 1,공지사항,끝 2,상장,대상`; const rawRows = csvData.split('\n'); const headers = rawRows[0].split(','); // 타입에러 해결을 위한 row 타입 선언 interface RowType { [key: string]: any } // 절차형 버전 // rows = header 제외한 row const rows..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅변수를 뽑아서 별도로 선언했을 때 에러가 발생한다면 타입 선언을 추가해야한다 ✅변수가 정말 상수라면 상수 단언(at const)을 사용해야 한다 - 단, 상수 단언을 사용하면 정의한 곳이 아닌, 사용한 곳에서 에러가 발생할 수 있으므로 주의 📍튜플 사용시 타입 추론 과정에서 유의점 타입스크립트의 튜플이 배열을 만드는 [] 를 같이 사용하기 때문에 배열로 혼동되는 에러가 발생할 수 있다 - 예시 // Parameter is a (latitude, longitude) pair. function panTo(where: [number, number]) { /* ... */ } panTo([10, 20]); // OK const loc = [10, ..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅콜백함수보다 프로미스를 사용하는게 좋다 (코드 간결성뿐만 아니라 타입 추론에도 도움을 준다) ✅프로미스를 생성하는 것보다 async/await을 사용하는게 좋다 - 간결하고 직관적인 코드를 작성할 수 있고, 의도치 않은 에러를 제거할 수 있다 ✅어떤 함수가 프로미스를 반환한다면 async로 선언해주는 것이 좋다 📍Promise.race를 사용하여 프로미스에 시간제한 추가하는 패턴 서버에 요청을 보내고 마냥 기다릴 수 없는 경우, Promise.race에 fetch와 타임아웃을 같이 넣는다 - 이를 통해 fetch에 시간 제한을 만들 수 있다 // 특정 시간 후에 reject되는 프로미스 반환 // 무조건 reject되므로 반환 타입이 nev..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅별칭(alias)은 type narrowing을 방해한다 ✅변수에 별칭을 사용할 때는 일관되게 사용해야 한다 (런타임에서는 문제가 없어도 타입 범위가 달라질 수 있음) 📍별칭 (alias) 을 수정하면 원본 객체도 수정된다 - 객체의 프로퍼티를 별칭으로 지정 후 수정해보기 const borough = {name: 'Brooklyn', location: [40.688, -73.979]}; // 별칭(alias) 생성 const loc = borough.location; // 별칭의 값을 변경하면 원본도 바뀜 loc[0] = 0; console.log(loc); // [0, -73.979] console.log(borough); /* { "na..