타입 스크립트에서 외부 라이브러리 사용하기 JS를 사용할 때는 npmjs.com에서 바로 Installation 명령어에 따라 설치하기만 하면 됐지만 TS에서는 그렇게 할 수 없다. 코드 실행 전 타입 검사 기능을 시행하는데, 라이브러리 코드의 타입 검사도 수행한다. 따라서 라이브러리 코드의 타입 정보가 제공되지 않은 상황에서 타입 검사가 이뤄지지 않기에 오류가 발생한다. 단, 몇몇 라이브러리에서는 TS 아이콘(TS로 만들어짐)이 있는 것들은 원래 쓰던대로 바로 사용할 수 있다. DT 아이콘이 있는 경우 해당 아이콘을 누르면... 라이브러리 코드의 타입 정보를 갖고 있는 패키지를 추가로 설치해주면 된다. 이런 패키지를 Definitely Types라고 한다. **출처: 한 입 크기로 잘라먹는 타입스크립트..
타입스크립트 리액트 시작하기 npx create-react-app . npm i @types/node @types/react @types/react-dom @types/jest (타입스크립트 적용을 위해 타입 선언 패키지 추가) tsconfig.json 작성 target: TS 파일을 어떤 버전의 JS로 바꿔줄지 정하는 부분 module: JS 파일간 import 문법 구현 시 어떤 문법을 쓸지 정하는 부분 CommonJS는 require, ESM은 import 문법을 사용함 광범위한 호환성을 원할 때에는 ES5 & CommonJS로 설정 { "compilerOptions": { "target": "ES5", "module": "CommonJS", // react가 어디서든 잘 작동되게 ES5 & Com..
유틸리티 타입 제네릭, 맵드 타입, 조건부 타입 등 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것 여러 가지 유틸리티 타입이 있다. (참고 링크) 맵드 타입 기반의 유틸리티 타입 1 : Partial, Required, Readonly Partial 특정 객체 타입의 모든 프로퍼티를 '선택적 프로퍼티'로 바꿔주는 타입 맵드 타입과 인덱스드 엑세스(참고 링크)를 활용해 구현할 수 있다. interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string; } // const draft: Post = { // title: '제목1', // content: '초안', // }; const dr..
조건부 타입 삼항연산자를 이용해 조건에 따라 타입을 결정한다. type A = number extends string ? string : number; // type A = number type ObjA = { a: number; }; type ObjB = { a: number; b: number; }; type B = ObjB extends ObjA ? number : string; // true (ObjA = 슈퍼) 제네릭과 조건부 타입 function removeSpaces(text: string | undefined | null) { if (typeof text === 'string') { return text.replaceAll(' ', ''); } else { return undefined; ..
타입 조작 기본 타입이나 별칭, 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환시키는 기능 제네릭을 비롯해 4가지 타입 조작 기능(인덱스드 엑세스 타입, keyof 연산자, Mapped 타입, 템플릿 리터럴 타입)에 대해 알아보자. 인덱스드 엑세스 타입 객체, 배열, 튜플 타입으로부터 특정 프로퍼티나 특정 요소의 타입만 추출한다. type Post = { title: string; content: string; author: { id: number; name: string; age: number; }; }; const post: Post = { title: '제목', content: '본문', author: { id: 1, name: 'summermong', age: ..
제네릭 클래스 class NumberList { constructor(private list: number[]) {} push(data: number) { this.list.push(data); } pop() { return this.list.pop(); } print() { console.log(this.list); } } const numberList = new NumberList([1, 2, 3]); numberList.pop(); numberList.push(4); numberList.print(); NumberList라는 클래스를 만들었다. private를 붙이면 필드를 따로 지정하지 않아도 되고, 생성자 함수 내에서도 별도로 this.~ 를 적을 필요가 없다. 따라서 private로 접근 제어..
제네릭 인터페이스 제네릭은 인터페이스에도 적용할 수 있다. 인터페이스에 타입 변수를 선언해 사용하면 된다. interface KeyPair { key: K; value: V; } let keyPair: KeyPair = { key: 'key', value: 1, }; let keyPair2: KeyPair = { key: true, value: ['1'], }; 키페어를 저장하는 객체 타입을 제네릭 인터페이스로 정의했다. 변수 keyPair에서는 타입으로 KeyPair를, keyPair2에서는 KeyPari을 정의했다. 그러면 key에는 K = string | boolean, V = number | string[]으로 정의되게 된다. 제네릭 인터페이스는 제네릭 함수와 달리 변수의 타입으로 정의할 때, 반..
제네릭을 이용한 JS의 배열 메서드 map, forEach 구현 map 구현 const arr = [1, 2, 3]; const newArr = arr.map((it) => it * 2); function map(arr: unknown[], callback: (item: unknown) => unknown): unknown[] {} 배열 arr에 map과 콜백 함수를 적용해 새로운 배열 newArr을 만들었는데, 이를 TS와 제네릭으로 구현해보려 한다. 먼저 메서드를 적용할 배열 arr과 콜백 함수 callback을 매개변수로 받아준다. 이 때 두 매개변수의 타입은 우선 모두 unknown으로 해주고, 함수의 반환값 타입도 unknown[]로 지정해준다. function map(arr: T[], call..
