프로그래밍 공부내용/타입스크립트(TS) (4) 썸네일형 리스트형 타입스크립트는 만능이 아니다(feat 리액트 컴포넌트 타이핑하기) 안전한 개발은 매우 중요하다. 에러가 터졌을 때 뜨는 빨간 라인은 마치 들불이 번지는 것 처럼 개발자의 마음을 아프게 한다. 하.지.만. 더 마음 아픈것은 서비스중에 예기치 못한 에러로 불이 나는 것일 것이다. 오류는 일종의 불이다. 한 곳에서 장애가 나더라도 번지지 않도록 막는 것이 아주 중요하다. 이를 막기위해서 사람들이 여러가지 도구를 고안해냈고 핫 한 도구중 한 가지는 타입스크립트다!! 타입스크립트(TS)는 일종의 맞불처럼 미리 빨간불을 띄워줘서 (이것도 마음 아프긴 하다) 여러 오류들을 막아줄 수 있다. 과연 타입스크립트가 나를 오류로부터 자유롭게 해줄 수 있을까? PropTypes?? 리액트에는 TS가 등장하기 전 컴포넌트의 타입을 명시하기 위해서 PropTypes라는 것이 존재했다. 아 물론.. 타입스크립트 조건부 타입 (Conditional type) 본 글은 이웅재님의 영상(https://www.youtube.com/watch?v=ViS8DLd6o-E) ~1:10:09 을 보고 제 나름대로 기억하기 위해서 정리한 글 입니다. 1. type과 interface의 차이? - 우선은 문법의 차이입니다. interface a { name: string; } type b = { name: string; }; 보면 interface 는 = 연산자 없이 사용하고 있습니다. - 두번째로는 vscode 내에서 사용할 때의 차이입니다. interface는 찍어봣을 때 a의 구조가 어떤지 알려주지 않지만, type alias인 b는 어떤 구조를 가지는지 알려줍니다. - 세번째는 기능차이입니다. interface는 선언병합을 제공하고 type alias는 제공하지 않습니.. 타입스크립트 문제풀이 #2 문제 - Type "Person" is missing, please define it and use it in persons array and logPerson function in order to fix all the TS errors. 내 문제 풀이 interface User { name: string; age: number; occupation: string; } interface Admin { name: string; age: number; role: string; } export type Person = User | Admin; export const persons: Person[] = [ { name: 'Max Mustermann', age: 25, occupation: 'Chimney swe.. 타입스크립트 문제풀이 #1 포코에게 추천을 받은 타입스크립트 문제로 배우기..! 첫 예제이다 문제 Given the data, define the interface "User" and use it accordingly. 일단은 찬찬히 문제를 읽어보자. object type unknown이라는 에러 메세지가 뜬다. user라는 object의 type이 정해져 있지 않아서 생기는 문제같다. 내 문제 풀이 type을 정해주면 간단하게 해결 될 것 같았다. 다행히 어디를 손봐야 할지 문제에서 알려주었다. User를 정의하라고 한다. export type User = { name:string, age:number, occupation:string, }; export const users: User[] = [ { name: 'Max Must.. 이전 1 다음
