TypeScript

Typescript Generics와 Keyof, Mapped Types 사용해보기

타입스크립트에서 제네릭, Mapped Types을 사용해보고, keyof 키워드는 어느 상황에서 사용할 수 있을지 사용해보았다. interface dynamic { [key: number] : string, } const keys: dynamic = {1: 'one', 2: 'two'}; 타입스크립트에서는 위처럼 동일한 타입의 key-value값들을 갖는 객체를 정의할 수 있다. 다만, 이 경우 value의 타입은 맨 처음의 선언한 것에서 바뀔 수 없는 단점이 있다. 제네릭을 사용하여 더 확장성있게 코드를 작성할 수 있다. interface dynamic { [key: number] : T, } const str: dynamic = {1: 'one', 2: 'two'}; const num: dynamic..

타입스크립트에서 /// <reference ... /> 의 의미 (Triple-Slash Directives)

타입스크립트를 사용하는 사람이라면, 어느 라이브러리 내부에서 다음과 같은 코드들을 본 적이 있을 것이다. /// /// /// 이는 삼중 슬래시 지시문이라고 한다. 삼중 슬래시 지시문은 단일 XML 태그를 포함하는 단 한 줄짜리 주석으로, 주석의 내용은 타입스크립트 컴파일러 지시문으로 사용된다. 삼중 슬래시 지시문의 내용은 단일 파일에서만 유효하며, 이는 파일의 최상단에 위치해야 한다. 그렇지 않으면, 일반 주석으로 인식된다. /// 가장 일반적인 삼중 슬래시 지시문으로, 파일간의 의존성을 나타낸다. 컴파일러에 해당 파일을 포함하도록 지시한다. 입력 파일 전처리 (Preprocessing input files) 과정으로 추가한 파일이 컴파일에 포함된다. /// 이는 패키지 의존성을 설정하는데, impor..

TypeScript 시작하기 & React에서 Typescript 정리

C언어나 자바를 사용했었던 나에게 파이썬이나 자바스크립트는 어색한 부분이 있었다. 시간이 지나 이제는 익숙해졌지만, 여전히 자바스크립트를 사용하며 마주하는 문제가 있다. 바로, 자바나 C언어와는 다르게 변수에 type을 지정하지 않는 자바스크립트의 특성 때문에 가끔 예상치 못한 오류가 발생하는 것이다. 이러한 문제를 해결 해주는 TypeScript(타입스크립트)의 편리함을 알아가보고자 간단하게나마 타입스크립트를 사용해보기로 하였다. 설치 npm install typescript --save-dev 또는 글로벌 설치 npm i -g typescript 타입스크립트의 확장자 🥥 타입스크립트의 확장자는 .ts이다 🥥 리액트에서 컴포넌트를 표현할 땐, .jsx 대신 .tsx를 사용할 수 있다. 간단한 사용 예 ..