타입스크립트 썸네일형 리스트형 ts-check vs ts-nocheck vs ts-expect-error vs ts-ignore // @ts-ignore 를 쓰려다 자동완성 되는 것 보고 각 옵션이 궁금해졌다. 종류가 4가지 밖에 안되니 하나씩 알아보자. ts-check 자바스크립트 파일 전체에서 타입체크를 수행한다. 파일 최상단에 써야 효력이 발생한다. ts-nocheck 타입스크립트 파일 전체에서 타입체크를 수행하지 않는다. 파일 최상단에 써야 효력이 발생한다. ts-expect-error 바로 다음 라인에 에러가 있을 경우, 에러를 막는다. 바로 다음 라인에 에러가 하나도 없으면 ts-expect-error 자체가 에러가 난다. ts-ignore 바로 다음 라인의 타입체크를 수행하지 않는다. 더보기 [이펙티브 타입스크립트] 8장 타입스크립트로 마이그레이션하기 이펙티브 타입스크립트 정주행 스터디 8주차 58 모던 자바스크립트로 작성하기 자바스크립트로 작성된 코드에서 발생한 버그 중 일정 부분 이상은 타입스크립트로 작성했다면 예방할 수 있었던 버그라고 한다. 그만큼 타입스크립트는 자바스크립트와 비교했을 때 한층 개선된 언어라고 할 수 있다. 타입스크립트는 특정 버전의 자바스크립트 코드로 컴파일해주는 기능이 있어, 최신 자바스크립트 문법을 사용하는 것으로 타입스크립트 입문을 해볼 수 있다. 특히, ES2015에 추가된 ES 모듈을 도입하면 점진적 마이그레이션이 더욱 원활해진다. 한편, 타입스크립트에서는 자바스크립트의 엄격모드(strict mode) 보다 더 엄격한 검사를 하기 때문에 굳이 use strict를 쓰지 않아도 된다. 트랜스파일된 자바스크립트에 use .. 더보기 [이펙티브 타입스크립트] 7장 코드를 작성하고 실행하기 이펙티브 타입스크립트 정주행 스터디 7주차 53 TS보다는 ECMAScript 기능 쓰기 2010년으로 거슬러 올라가 자바스크립트가 그리 발전하지 않았을 때, 타입스크립트는 자바스크립트에 없는 기능을 지원했었다. 자바스크립트가 충분히 발전한 지금은, 타입스크립트와 자바스크립트의 경계를 모호하게 만들지 않기 위해서 타입스크립트만의 독자적인 기능은 사용하지 않는 것이 좋다. 열거형(enum), 클래스의 매개변수 프로퍼티, 네임스페이스와 트리플 슬래시 임포트(///), 데코레이터(decorator) 등이 그 예에 해당한다. 정리하자면, 타입스크립트는 타입 체크를 위해 사용하고, 여타 기능은 모두 자바스크립트를 통해 사용함으로써 각 언어의 경계와 목적을 명확하게 하는 것이 좋다. 54 객체 순회 노하우 타입스크.. 더보기 [이펙티브 타입스크립트] 6장 타입선언과 @types 이펙티브 타입스크립트 정주행 스터디 6주차 45 typescript와 @types 추가하기 typescript와 개발 단계에서는 필요하지만 런타임에는 필요하지 않다. 따라서 dependencies가 아닌 devDependencies에 추가해야한다. typescript를 의존성으로 관리하면, 팀원들 간에 같은 버전을 쓰는 것을 보장할 수 있다. @types도 마찬가지로 devDependencies에 추가한다. 예를 들어 리액트와 웹팩을 사용하는 경우 아래의 패키지를 devDependencies에 추가한다. @types/react @types/react-dom @types/webpack @types/webpack-dev-server @types/node 46 타입 선언과 관련된 3가지 버전 이해하기 타입스크.. 더보기 [이펙티브 타입스크립트] 5장 any 다루기 이펙티브 타입스크립트 정주행 스터디 5주차 다른 프로그래밍 언어들과는 달리, 타입스크립트의 타입시스템은 점진적으로(gradually) 프로그램의 일부분에만 적용할 수 있다. 부분적이고 점진적인 마이그레이션을 위해 any 타입은 꼭 필요하다. any는 그만큼 강력하기 때문에 남용하게 될 여지가 있다. 이번 장에서는 any 타입을 어떻게 사용해야 현명하게 사용하는 것인지 알아보자. 38 좁은 범위에서만 쓰기 any를 사용하더라도 가능한 한 좁은 범위 내에서만 사용하면, 의도치 않게 타입 안정성을 잃는 일을 최소화할 수 있다. const config1: Config { a: 1, b: 2, c: { key: value // 에러, Foo 타입에 foo 프로퍼티가 필요하지만 Bar 타입에는 없습니다. } } c.. 더보기 [이펙티브 타입스크립트] 4장 타입 설계 이펙티브 타입스크립트 정주행 스터디 4주차 데이터 타입을 명확하게 알 수 있다면, 코드를 이해하기가 더욱 쉬워진다. 타입스크립트 타입의 실질적인 사항을 다루는 다른 챕터와 다르게 4장에서는 타입 자체의 설계에 대해서 살펴본다. 28 유효한 상태만 표현하는 타입 지향하기 다음 두 예제를 비교해보자. 첫 번째 예제 코드에서는 가능하지 않은 시나리오까지 표현이 가능하다. 예를 들어 요청이 실패했으면서 로딩 중일 수는 없는데 일단 타입에서는 그렇게 표현이 가능하다. 이러한 타입 설계는 코드를 뒤죽박죽으로 만드는 원인이 된다. interface State { pageText: string; isLoading: boolean; error?: string; } 두 번째 예제 코드에서는 유효한 상태만을 표현하고 있다... 더보기 [이펙티브 타입스크립트] 3장 타입 추론 이펙티브 타입스크립트 정주행 스터디 3주차 19 추론으로 장황한 코드 방지하기 타입스크립트 초심자라면 코드를 작성하면서 가능한 한 모든 곳에 타입 구문을 넣으려고 할 수 있다. 그러나 숙련된 타입스크립트 사용자라면 최대한 타입 추론을 이용하고, 필요할 때만 타입을 명시한다. 만약 타입을 중복해서 선언하면, 변경사항이 생겼을 때 한쪽만 갱신하고 반대 쪽을 갱신하지 않아 문제가 생길 수 있다. 이러한 이유로 모든 변수에 타입 구문을 추가하는 것은 필요하지 않을 뿐더러 더욱 큰 비효율을 가져오게 된다. eslint의 no-inferrable-types 룰을 이용하면 충분히 추론 가능한 상황인데 굳이 타입을 명시한 경우를 잡아낼 수 있다. 다만 함수의 입력과 출력은, 즉 함수의 시그니처는 명확하게 명시해주는 것.. 더보기 [이펙티브 타입스크립트] 2장 타입 시스템(2) 이펙티브 타입스크립트 정주행 스터디 2주차 후반부 (분량이 많아 전반/후반으로 나누어 작성함) 13 인터페이스와 타입별칭의 차이점 알기 타입스크립트에서 타입의 이름을 주는 방법은 인터페이스(interface) 정의와 타입 별칭(type alias) 2가지가 있다. 대부분의 경우 둘 중 어느 것을 사용해도 되지만, 둘의 차이를 분명하게 알고 같은 상황에서는 일관적인 방법으로 name type을 작성해야 한다. 우선 공통적으로 가능한 것은 일반적인 속성 정의, 인덱스 시그니처 사용, 함수 타입 정의, 제너릭 사용 등이 있다. 타입을 확장하는 경우 인터페이스와 타입의 차이가 있다. 인터페이스는 extends 키워드로 확장하는 반면, 타입별칭은 인터섹션 연산자(&)로 확장한다. 단, 인터페이스는 유니온 같은 복.. 더보기 이전 1 2 다음
