타입스트립트 컴파일러는 두 가지 역할을 수행한다.최신 TS/JS 코드를 브라우저에서 동작할 수 있도록 구버전의 JS로 트랜스파일 한다.코드의 타입 오류를 체크한다.이 두 가지는 서로 완벽히 독립적으로 동작한다. 즉, TS가 JS로 변환될 때 코드 내의 타입에는 영향을 주지 않으며 JS의 실행 시점(런타임)에도 타입은 영향을 미치지 않는다. 타입 오류가 있는 코드도 컴파일이 가능하다컴파일은 타입 체크와 독립적으로 동작하기에 타입 오류가 있는 코드도 컴파일이 가능하다.let x = 'hello';x = 1234;// '1234' 형식은 'string' 형식에 할당할 수 없다 타입 체크와 컴파일이 동시에 이뤄지는 C나 자바 같은 언어와는 달리 Typescript는 문제가 될 만한 부분을 알려주지만, 빌드는 멈..
typeScript
타입스크립트 컴파일러는 설정에 따라 코드의 에러를 확인할 수 있는 설정을 많이 갖고있습니다. 되도록 설정 파일을 이용한 설정을 해주는 것이 좋다. 동료 개발자들이나 다른 도구들이 타입스크립트의 사용 의도를 파악할 수 있다. 타입스크립트의 설정들은 어디서 소스 파일을 찾을지, 어떤 종류의 출력을 생성할지 제어하는 내용이 대부분이다. 하지만, 언어 자체의 핵심 요소들을 제어하는 설정하는 고수준 설계의 설정이 있다. 설정을 제대로 사용하려면 noImplicitAny와 strictNullChecks를 이해해야 한다. noImplicitAny타입 스크립트에서 "암시적 any의 사용"을 방지해주며 값의 타입을 더 분명하게 사용할 수 있게 해주는 설정이다.암시적 any는 값에 아무런 타입을 선언하지 않은 경우 타입스..
본 시리즈에서는 책 "이펙티브 타입스크립트"를 읽고 내용을 정리할 예정입니다. 이 책에서는 타입스크립트란 무엇이고, 어떻게 여겨야 하는지, JS와 어떤 관계인지, TS의 타입들은 null이 가능한지, any 타입에서는 어떻게 동작하는지, 덕 타이핑이 가능한지 등을 알아 볼 예정이다. Typescript는 독특한 언어이다. 파이썬이나 루비와 같이 인터프리터로 실행되는 것도 아니고, C나 Java 처럼 저수준 언어로 컴파일되는 것도 아니다. Typescript는 고수준 언어인 Javascript로 컴파일되며, Javascript로 실행된다. 이처럼 TS와 JS의 관계는 매우 필연적이다. 타입스크립트와 자바스크립트의 관계 이해하기"타입스크립트는 자바스크립트의 상위 집합이다" 또는 "타입스크립트는 타입이 정의된..
type과 interface는 타입스트립트에서 값의 타입을 지정하는 방법들이다. interface 형객체 구조를 정의할 때 사용되며 객체와 클래스의 타입을 정의할 때 사용된다.interface는 상속(extends)을 이용한 확장이 가능하며 다중 상속을 지원한다.interface Point { x: number; y: number;}interface Named { name: string;}interface Person extends Named { age: number;} 또한 이전 글에서 정리했듯이 interface에서 인덱스 시그니처를 이용하려면 명시적으로 선언해줘야 사용이 가능하다.export interface selectedStateInterface { position: { dueli..
타입스크립트를 이용해 새로운 프로젝트를 진행하던 어느날 처음 보는 에러를 마주쳤습니다. element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ duelist: boolean; recon: boolean; sentinels: boolean; controllers: boolean; nodicision: boolean; }'. no index signature with a parameter of type 'string' was found on type '{ duelist: boolean; recon: boolean; sentinels: boolean; controllers: boo..
저번 시간에 Portal을 이용해 모달을 구현하려 했지만 상단 header바에 사용하기 적합하지 않다는 팀원의 의견을 반영해서 독립된 컴포넌트를 만들어 적용하기로 했다. 우선 헤더에 사용할 모달 컴포넌트의 코드를 보자 import { ReactComponent as HomeSVG } from 'assets/svg/home.svg'; import { ReactComponent as SettingSVG } from 'assets/svg/setting.svg'; import { ReactComponent as LogoutSVG } from 'assets/svg/logout.svg'; import { Link } from 'react-router-dom'; interface UserInfo { accountMo..
