혼자 적어보는 노트

객체의 key를 type으로 분리하기 프로젝트에서 type을 지정하는 파일들을 분리하던 중 조금 불편한 부분이 생겼다. // Icon/types.ts export const ICON_URLS = { heart: '/assets/icons/heart.svg', bookmark: '/assets/icons/bookmark.svg', arrow: '/assets/icons/arrow.svg', calendar: '/assets/icons/calendar.svg', marker: '/assets/icons/marker.svg', route: '/assets/icons/route.svg' }; export type IconName = 'heart' | 'bookmark' | 'arrow' | 'calendar' ..

String타입의 키로 객체에 접근하려면 type에러가 생기는데 인덱스 시그니처를 선언해주면 해결할 수 있다. interface buttonStyleInterface { [key: string]: string; } 그런데 여기서 key값에 type을 주고 싶어서 아래와 같이 작성하면 type에러가 발생한다,. interface buttonStyleInterface { [key: ButtonTypes]: string; // An index signature parameter type cannot be a literal type or generic type. Consider using a mapped object type instead } 인덱스 시그니처의 타입으로는 union type을 사용할 수 없다. ..

4장 함수 4장에서는 함수를 살펴보고 아래와 같은 내용을 다룬다. - 함수를 선언하고 실행하는 방법 - 시그니처 오버로딩 - 다형적 함수 - 다형적 타입 별칭 # 특별한 상황을 제외하면 매개변수 타입은 추론하지 않는다. - 문맥을 보고 타입을 추론하는 상황(문맥적 타입화)등 특별한 상황을 제외하면 매개변수 타입을 추론하지 않는다. * 반환 타입은 자동으로 추론하기때문에 보통 실무에서는 반환타입을 명시하지 않고 추론하도록 한다. # 함수에서 this를 사용할 때 첫번째 매개변수로 선언할 수 있다. function fancyData(this: Date){ return ${this.getDate()}/${this.getMouth()} } fancyDate.call(new Date); fancyDate() //..

타입스크립트 Type Guard로 타입 좁히기 Type Guard 컴파일러가 타입을 예측할 수 있도록 타입을 좁혀주어서 타입의 안전함을 보장할 수 있다. typeof를 사용한 type guards Javascript의 typeof 연산자를 활용하여 타입가드를 할 수 있다. const test = (a: number | string) => { if (typeof a === "string") { return a.substring(1); } return a; }; 함수의 인자로 넘어온 a값은 number이거나 string일 수 있는데 바로 a.substring을 사용하면 number에는 substring을 사용할 수 없기 때문에 에러가 발생한다. typeof를 사용하여 if문 내에서 a값이 string임을 보..

React에서 Typescript를 사용하기 위한 기본 세팅을 진행해보려고 한다. 참고 : 웹 게임을 만들며 배우는 React에 TypeScript 적용하기 🔨기본 세팅 Typescript, React, Webpack 설치 npm i typescript npm i react react-dom npm i webpack webpack-cli -D typescript로 만들어진 패키지의 경우는 그냥 사용해도 되지만 react, react-dom은 javascript로 되어있어서 타입이 지정되어 있지 않다. 이렇게 타입이 없는 것들은 커뮤니티에서 만들어 놓은 타입인 패키지를 설치한다. npm i @types/react @types/react-dom 💡 본 패키지와 types로 받은 패키지와 버전이 크게 달라지면..

제네릭에 대해 알아보자. 제네릭(Generics) 제네릭은 재사용성이 높은 컴포넌트를 만들기 위해 활용된다. 아래와 같이 함수에 세부적인 타입을 미리 지정해버리면 해당 함수는 무조건 number값만 받아야 하고 재사용성이 떨어지게 된다. function returnText(text: number): number{ return text; } 다른 타입의 값도 받고 싶다면 any를 사용해야 하는데 any를 사용할 경우 함수의 인자로 어떤 타입이 전달되었는지 알 수 없고 어떤 값이 반환되는지 알 수 없다. 이 때 ✨제네릭을 사용해서 재사용성을 높일 수 있다. 제네릭 기본 문법 function returnText(text: T): T{ return text; } returnText('Hello'); return..

인터페이스(Interface) 상호간의 정의한 약속 또는 규칙을 의미한다. 미리 내부를 정의해 두는 것 interface User { name: string; age: number; } function printUser(user: User) { console.log(user.name, user.age); } const user = { name: 'jay', age: 22 }; printUser(user); 옵션 속성 (Optional) 일부 속성을 사용하지 않을 경우 ?을 사용하여 옵션 속성을 지정할 수 있다. interface User { name: string; age?: number; } function printUser(user: User) { console.log(user.name); } con..

enum 특정 값들의 집합을 의미하는 자료형 => 상수를 정의할 때 사용한다. enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } 초기 값을 넣어주지 않으면 0부터 차례대로 증가한다. enum Direction { Up, // 0 Down, // 1 Left, // 2 Right, // 3 } enum의 문제점 변수에 타입을 지정한 후 값을 변경해도 에러가 발생하지 않는다. let position:Direction = Direction.Left position = Direction.Up; position = 10 // 에러가 발생하지 않는다. console.log(position) // 10 💡 union으로 대체하여 ..