아카이브/TypeScript 10

[이펙티브 타입스크립트] 6장 타입 선언과 @types ①

아이템 45. devDependencies에 typescript와 @types 추가하기요약타입스크립트를 시스템 레벨로 설치하면 안된다. 타입스크립트를 프로젝트의 devDependencies에 포함시키고 팀원 모두가 동일한 버전을 사용하도록 해야한다.@types 의존성은 dependencies가 아니라 devDependencies에 포함시켜야 한다. 런타임에 @types 가 필요한 경우라면 별도의 작업이 필요할 수 있다. 아이템 46. 타입 선언과 관련된 세 가지 버전 이해하기요약@types 의존성과 관련된 세 가지 버전이 있다. 라이브러리 버전, @types 버전, 타입스크립트 버전라이브러리를 업데이트 하는 경우, 해당 @types 역시 업데이트 해야한다.타입 선언을 라이브러리에 포함하는 것과 Defin..

[이펙티브 타입스크립트] 5장 any 다루기 ②

42. 모르는 타입의 값에는 any 대신 unknown을 사용하기 unknown에는 다음과 관련된 형태가 있다. 1. 함수의 반환값과 관련된 형태 호출한 곳에서 반환값을 unknown 타입으로 반환하게 만드는 것이 안전하다. any 가 강력하면서도 위험한 이유는 아래와 같다. 어떠한 타입이든 any 타입에 할당 가능하다. any 타입은 어떠한 타입으로도 할당 가능하다. 타입 체커는 집합 기반이기 때문에 any를 사용하면 타입 체커가 무용지물이 된다. unknown 을 사용하면 unknown 상태로 사용하려고 하면 오류가 발생하기 때문에, 적절한 타입으로 변환하도록 강제할 수 있다. 2. 변수 선언과 관련된 형태 어떤 값이 있지만 그 타입을 모르는 경우에 unknown을 사용한다. 3. 단언문과 관련된 형..

[이펙티브 타입스크립트] 5장 any 다루기 ①

타입스크립트의 타입 시스템은 선택적(optional)이고, 점진적(gradual)이기 때문에 정적이면서도 동적인 특성을 동시에 가진다. 따라서 타입스크립트는 프로그램의 일부분에만 타입 시스템을 적용할 수 있다. 마이그레이션을 할 때 코드의 일부분에 타입 체크를 비활성화시켜주는 any 타입이 중요한 역할을 한다. any를 현명하게 사용하는 방법을 익혀야만 효과적으로 타입스크립트 코드를 작성할 수 있다. 38. any 타입은 가능한 한 좁은 범위에서만 사용하기 요약 의도치 않은 타입 안전성의 손실을 피하기 위해서 any의 사용 범위를 최소한으로 좁혀야 한다. 함수의 반환 타입이 any인 경우 타입 안정성이 나빠진다. 따라서 any 타입을 반환하면 절대 안된다. 강제로 타입 오류를 제거하려면 any 대신 @t..

[이펙티브 타입스크립트] 4장 타입설계 ②

34. 부정확한 타입보다는 미완성 타입을 사용하기 일반적으로 타입이 구체적일수록 버그를 더 많이 잡고 타입스크립트가 제공하는 도구를 활용할 수 있게 된다. 그러나 타입 선언의 정밀도를 높이면 실수가 발생하기 쉽고 잘못된 타입은 차라리 타입이 없는 것보다 못할 수 있다. 요약 타입 안정성에서 불쾌한 골짜기는 피해야 한다. 타입이 없는 것보다 잘못된게 더 나쁘다. 정확하게 타입을 모델링할 수 없다면, 부정확하게 모델링하지 말아야 한다. 또한 any와 unknown을 구별해서 사용해야 한다. 타입 정보를 구체적으로 만들수록 오류 메세지와 자동 완성 기능에 주의를 기울여야 한다. 35. 데이터가 아닌, API와 명세를 보고 타입 만들기 요약 코드의 구석 구석까지 타입 안전성을 얻기 위해 api 또는 데이터 형식..

[이펙티브 타입스크립트] 3장 타입 추론 ③

26. 타입 추론에 문맥이 어떻게 사용되는지 이해하기 27. 함수형 기법과 라이브러리로 타입 흐름 유지하기 26. 타입 추론에 문맥이 어떻게 사용되는지 이해하기 type Language = 'JavaScript' | 'TypeScript' | 'Python'; function setLanguage(language: Language) {...} setLanguage('JavaScript'); // 정상 let language = 'JavaScript'; setLanguage(language); // 오류 타입스크립트는 변수를 할당하는 시점에 타입을 추론한다. string으로 추론하여 Language 타입으로 할당이 불가능 하므로 오류가 발생한 것. // 타입 선언에서 language의 가능한 값 제한 le..

[이펙티브 타입스크립트] 3장 타입 추론 ②

22. 타입 좁히기 23. 한꺼번에 객체 생성하기 24. 일관성 있는 별칭 사용하기 25. 비동기 코드에는 콜백 대신 async 함수 사용하기 22. 타입 좁히기 TypeScript에서는 불필요한 타입 검사를 줄이기 위해, 특정한 상황에서 더 많은 경우의 수를 가진 타입을 더 적은 경우의 수를 가진 타입으로 재정의 하는데, 이 동작을 타입 좁히기(Type Narrowing)라고 한다. 참고: https://medium.com/humanscape-tech/typescript%EA%B0%80-%ED%83%80%EC%9E%85%EC%9D%84-%EC%A2%81%ED%98%80%EA%B0%80%EB%8A%94-%EB%B2%95-c5c318982967 TypeScript가 타입을 좁혀가는 법 TypeScript의..

[이펙티브 타입스크립트] 3장 타입 추론 ①

19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 20. 다른 타입에는 다른 변수 사용하기 21. 타입 넓히기 타입스크립트는 타입 추론을 적극적으로 수행한다. 타입 추론은 수동으로 명시해야 하는 타입 구문의 수를 엄청나게 줄여주기 때문에, 코드의 전체적인 안정성이 향상된다. 타입스크립트 초보자는 불필요한 타입 구문까지 많이 사용하는 반면, 숙련자는 비교적 적은 수의 구문을 사용한다. 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입 추론이 된다면 명시적 타입 구문은 불필요하다. interface Product { id: string; name: string; price: number; } function logProduct(product: Product) { const { id, name..

[이펙티브 타입스크립트] 2장 타입스크립트의 타입 시스템

6. 편집기를 사요하여 타입 시스템 탐색하기 7. 타입이 값들의 집합이라고 생각하기 8. 타입 공간과 값 공간의 심벌 구분하기 9. 타입 단언보다는 타입 선언을 사용하기 10. 객체 래퍼 타입 피하기 11. 잉여 속성 체크의 한계 인지하기 12. 함수 표현식에 타입 적용하기 13. 타입과 인터페이스의 차이점 알기 14. 타입 연산과 제너릭 사용으로 반복 줄이기 15. 동적 데이터에 인덱스 시그니처 사용하기 16. number 인덱스 시그니쳐보다는 Array, 튜플, ArrayLike를 사용하기 17. 변경 관련된 오류 방지를 위해 readonly 사용하기 18. 매핑된 타입을 사용하여 값을 동기화하기 타입스크립트의 가장 중요한 역할은 타입 시스템에 있다. 타입 시스템이란 무엇인지, 어떻게 사용해야 하는지..

[이펙티브 타입스크립트] 1장 타입스크립트 알아보기

1. 타입스크립트와 자바스크립트의 관계 이해하기 2. 타입스크립트 설정 이해하기 3. 코드 생성과 타입이 관계 없음을 이해하기 4. 구조적 타이핑에 익숙해지기 5. any 타입 지양하기 1. 타입스크립트와 자바스크립트의 관계 이해하기 타입스크립트는 자바스크립트의 상위집합(superset)이다. 모든 자바스크립트 프로그램이 타입스크립트라는 명제는 참이지만, 그 반대는 성립하지 않는다. 타입스크립트가 타입을 명시하는 추가적인 문법을 가지기 때문이다. 타입스크립트는 자바스크립트의 런타임 동작을 모델링 하는 타입시스템을 가지고 있으며, 런타임 오류를 발생시킬 코드를 미리 찾아내려 한다. 하지만, 타입 체커를 통과하면서도 런타임 오류를 발생시키는 코드가 충분히 존재할 수 있다. 타입스크립트는 타입 구문이 없어도 ..

TypeScript 실행하기

어제부터 TypeScript를 공부하기 시작했다. TypeScript 설치 > 실습 디렉토리 및 tsconfig.json 파일 생성 > 아래와 같이 hello.ts 파일을 생성했다. [hello.ts] let hello: string = 'hello typescript!'; console.log(hello); 아래 명령어를 입력하니, tsc hello.js 파일이 하나 더 생겼다. 컴파일은 됐는데 console에 hello가 찍히지 않는다!😭 Typescript를 3가지 방법으로 실행해보았다. 1. node로 javascript 파일 실행 node hello.js 이미 hello.js 파일이 생성되었으므로 node로 실행하는 방법이 있다. 2. ts-node로 typescript 실행 npm instal..