TIL/TypeScript13

• [TypeScript] 이펙티브 타입스크립트 item 58 ~ 62 타입스크립트로 마이그레이션하기 대규모 프로젝트에선 점진적으로 진행 item 58 모던 자바스크립트로 작성하기 타입스크립트로 마이그레이션이 막막하면 예전 버전 자바스크립트에서 최신버전의 자바스크립트로 바꾸는 작업부터 진행 ECMAScript 모듈 사용하기 프로토타입 대신 클래스 사용하기 var 대신 let/const 사용하기 for 대신 for-of 또는 배열 메서드 사용하기 함수 표현식 보다 화살표 함수 사용하기 단축 객체 표현 보다 구조 분해 할당 사용하기 함수 매개변수 기본값 사용하기 저수준 프로미스나 콜백 대신 async/await 사용하기 연관 배열에 객체 대신 Map과 Set 사용하기 타입스크립트에 user strict 넣지 않기 (컴파일러 수준에서 사용됨) item 59 타입스크립트 도입 전에.. TIL/TypeScript 2022. 8. 18.

• [TypeScript] 이펙티브 타입스크립트 item 53 ~ 57 item 53 타입스크립트 기능보다 ECMAScript 기능을 사용하기 일반적으로 타입스크립트 코드에서 타입정보를 빼면 자바스크립트가 되지만 열거형, 매개변수 속성, 트리플 슬래시 임포트, 데코레이터는 타입정보를 제거한다고 자바스크립트가 되지는 않음 => 타입스크립트의 역활을 명확하기 위해 위에 말한 것들은 사용하지 않는 것이 좋음 item 54 객체를 순회하는 노하우 객체를 순회하며 키와 값을 얻을 때 keyof : 정확한 타입을 원할 때 interface Obj { one: string; two: string; three: number; } const A: Obj ={ one: '1', two: '2', three: 3 } let k: keyof Obj for (k in A){ const v = A[.. TIL/TypeScript 2022. 8. 16.

• [TypeScript] 이펙티브 타입스크립트 item 50 ~ 52 item 50 오버로딩 타입보다는 조건부 타입 사용하기 조건부 타입은 추가적인 오버로딩 없이 유니온 타입을 지원할 수 있음 // 오버로딩 타입 function double(x: number | string): number | string; // 조건부 조건 function dobule( x: T ): T extends string ? string : number; //=> string 의 부분 집합이면 string, 그외는 number function double(x: any) { return x + x; } item 51 의존성 분리를 위해 미러 타입 사용하기 필수가 아닌 의존성을 분리할 때는 구조적 타이핑을 사용 작성 중인 라이브러리가 의존하는 라이브러리의 구현과 무관하게 타입에만 의존한다면, 필요한.. TIL/TypeScript 2022. 8. 9.

• [TypeScript] 이펙티브 타입스크립트 item 45 ~ 49 item 45 devDependencies에 typescript 와 @types 추가하기 dependencies: 현재 프로젝트를 실행하는데 필수적인 라이브러리들 devDependencies: 현재 프로젝트를 개발하고 테스트하는데 사용되지만 런타임에는 필요없는 라이브러리들 peerDependencies: 런타임에 필요하지만, 의존성 직접 관리하지 않는 라이브러리들 ex) 플러그인 공통적으로 고려해야할 의존성 2가지 1. 타입스크립트 자체 의존성을 고려해야 함 시스템 레벨로 설치한다면 팀원들간의 버전 차이로 인한 비용이 발생할 것이기에, 시스템 레벨 보다는 devDependencies에 넣는 것이 좋음 2. 타입 의존성(@type)을 고려해야 함 사용하려는 라이브러리에 타입 선언이 포함되어 있지 않더라도 .. TIL/TypeScript 2022. 8. 8.

• [TypeScript] 이펙티브 타입스크립트 item 38~44 item38 any 타입은 가능한 좁은 법위에서만 사용하기 any는 매우 강력한 힘 가짐 (큰 힘에는 큰 책임이...) // 1 function f1(){ const x: any = f3(); f4(x); } // 2 function f1(){ const x = f3(); f4(x as any); } 1번 보다 2번 케이스가 더 나음, 왜냐하면 any 타입이 f4() 의 매개변수로만 들어가고 다른 곳엔 영향을 끼치지 않았기에 함수에서 any를 반환하면 영향력이 더 퍼져나감 => 반환 타입 any로 하는 것 지양할 것 + 반환 타입을 명시하는 것이 좋음 item39 any를 구체적으로 변형해서 사용하기 // 1: any 타입의 값 그대로 넣기 function getLength(array: any){ ret.. TIL/TypeScript 2022. 8. 5.

• [TypeScript] 이펙티브 타입스크립트 item 32~37 item 32 유니온의 인터페이스보다는 인터페이스의 유니온 사용하기 // 유니온의 인터페이스 interface Layer{ layout: LineLayout | PointLayout paint : LinePaint | PointPaint } //인터페이스의 유니온 interface LineLayer{ layout: LineLayout paint : LinePaint } interface PointLayer{ layout: PointLayout paint : PointPaint } type Layer = LineLayer | PointLayer item 33 string 타입 보다 더 구체적인 타입 쓰기 // string 남발된 모습 interface Album { artist: string; releas.. TIL/TypeScript 2022. 8. 4.

• [TypeScript] 이펙티브 타입스크립트 item 28~31 item 28 유효한 상태만 표현하는 타입 지향 유효한 상태와 무효한 상태를 둘다 표현하는 타입은 혼란을 초래하기 쉬움 // 유효한 상태와 무효한 상태를 둘다 표현하는 타입 interface State{ a: string; b?: string; c?: string; } // 유효한 상태만 표현하게 바꾼 모습 interface StateCase1{ a: string; } interface StateCase2{ a: string; b: string; } interface StateCase3{ a: string; c: string; } interface StateCase4{ a: string; b: string; c: string; } type State = StateCase1 | StateCase2 | St.. TIL/TypeScript 2022. 8. 3.

• [TypeScript] 이펙티브 타입스크립트 item 24~27 item 24 일관성 있는 네이밍 const test = [10,20] const test2 =test test2[0] = 1 // test = [1,10] 이 된다 별칭의 남발은 제어 흐름 분석을 어렵게 만듬 별칭은 타입스크립트가 타입을 좁히는 것을 방해함 function isPointInPolygon(polygon: Polygon, pt: Coordinate) { const box = polygon.bbox; // 타입이 BoundingBox | undefined if(polygon.bbox){ polygon.bbox // 타입이 BoundingBOx box // 타입이 BoundingBox | undefined } } 비구조화 문법(동일한 키 값 사용하여 자동으로 할당)을 사용하여 일관된 이름 사용.. TIL/TypeScript 2022. 8. 1.

• [TypeScript] 이펙티브 타입스크립트 item 21~23 item21 상수를 사용해서 변수를 초기화할 때 타입을 명시하지 않으면 타입체커는 타입을 유추하여 결정 즉 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추함, 이를 타입 넓히기라고 함 const mixed = ['x', 1]; //후보: ('x' | 1)[] // ['x', 1] // [string, number] // readonly [string, number] // (string|number)[] // readonly (string|number)[] // [any, any] // any 정보가 충분하지 않으면 어떤 타입으로 추론되어야 하는지 모름 이러한 넓히기를 제어할 수 있는 것이 const : 재할당을 막기에 타입스크립트가 더 좁은 타입으로 추론할 수 있다 interface Vector.. TIL/TypeScript 2022. 7. 28.

• [TypeScript]이펙티브 타입스크립트 Item 16~20 item16 자바스크립트에선 객체란 키/값 쌍의 모음, 키는 보통 문자열 복잡한 객체를 키로 쓰려고 하면 문자열로 변환함, 숫자는 사용 불가 { 1: 2, 3: 4 } { '1': 2, '3': 4 } // 변환됨 배열에선, 인덱스들을 문자열로 변환해서 사용 뭔소리냐 arr = [1, 2, 3] arr[0] // 1, 당연하게 숫자 인덱스 사용 가능 arr['1'] // 2, 문자열 키 사용 가능한 모습 Object.keys(x) // ['0','1','2'] // 키 찍어보면 문자열로 출력됨 타입 스크립트에선 이러한 어지러운 상황을 개선하고자, 숫자(number) 키 허용, 문자열 키와 다른 것으로 인식함 (이는 버그를 잡기 위한 타입 스크립트 코드) 인덱스 시그니처 에 number를 사용하기 보다는 .. TIL/TypeScript 2022. 7. 26.

• [TypeScript]이펙티브 타입스크립트 Item 11~15 item11 타입이 명시된 변수에 객체 리터럴 할당할 때 타입 속성 체크함 => interface Menu { price: number; } const a: Menu = { price: 100, name: 'a 세트' }; // 에러 발생 const obj = { price: 100, name: 'a 세트' }; const a: Menu = obj; // 정상 const a: Menu = { price: 100, name: 'a 세트' } as Menu; // 정상 1번째는 속성체크를 통해 오류를 잡아낸 모습 2번째는 앞서 나온 구조적 타이핑, 즉 obj가 Menu 타입의 부분 집합을 포함하므로 a에 할당 가능하고 타입 체커도 통과 즉 오류 없다 판정 3번째는 단언문을 사용해서 속성 체크를 피해간 모습 .. TIL/TypeScript 2022. 7. 24.

• [TypeScript]이펙티브 타입스크립트 Item 6~10 Item 6 타입스크립트에서 제공하는 언어 서비스 사용하는 것이 좋다 언어서비스가 제공하는 기능으로는 코드 자동 완성, 명세 검사, 검색, 리팩터링 등등 편집기의 타입추론을 보고 타입스크립트가 값의 타입을 어떻게 이해하는지 알 수 있음 Item 7 한가지 값만 포함하는 타입 = literal 타입 2개 혹은 3개 포함하는 타입 = union 타입 type A = 'A'; // 리터럴 타입 type One = 1; // 리터럴 타입 == 유닛 타입이라고 불리기도함 type A1 = 'A' | 1; // 유니온 타입 const a: A1 = 'A' // 정상 const b: A1= 'B' // 에러 & 은 두 타입의 인터섹션(교집합)을 계산 타입간의 교집합은 인터페이스의 속성이 아니라 값의 집합(= 타입의 .. TIL/TypeScript 2022. 7. 19.