[TIL] 22.05.09 프리온보딩 Day 5 - TypeScript

기업과제를 앞두고 타입스크립트를 공부해봤다. (정말 간단하게 맛보기..)

TypeScript for JavaScript Programmers

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

타입 정의하기(Defining Types)

형태를 명시적으로 나타내기 위해서 interface로 선언.

interface User {
	name: string;
	id: number;
}

이제 변수 선언 뒤에 : TypeName의 구문을 통해 자바스크립트 객체가 새로운 interface의 형태를 따르고 있음을 선언할 수 있다.

interface User{ ... }
// --- cut ---
const user: User = {
	name: "Hayes", // 해당 인터페이스에 맞지 않는 객체 생성 시 경고. ex) username: "Hayes"
	id: 0,
}

타입스크립트는 자바스크립트에서 기본 제공하는 데이터 타입을 포함해 추가적으로 any, void, never, enum, tuple 타입을 가진다.

타입 구성(Composing Types)

유니언(Unions)

타입이 여러 타입 중 하나일 수 있음을 선언하는 방법. 유니언 타입이 가장 많이 사용되는 사례 중 하나는 값이 다음과 같이 허용되는 string 또는 number의 리터럴 집합을 설명하는 것이다.

type WindowStates = "open" | "closed" | "minimized";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

유니언은 다양한 타입을 처리하는 방법을 제공한다. 예를 들어 array 또는 string을 받는 함수가 있을 수 있다.

function getLength(obj: string | string[]) {
	return obj.length;
}

제네릭(Generics)

제네릭은 변수에 타입을 제공하는 방법이다.

type StringArray = Array<string>;
type ObjectWithNameArray = Array<{ name: string }>;

구조적 타입 시스템(Structural Type System)

구조적 타이핑 또는 덕 타이핑(duck typing)이라고 한다.

interface Point {
	x: number;
	y: number;
}

function printPoint(p: Point) {
	console.log(`${p.x}, ${p.y}`);
}

const point = { x: 12, y: 26 };
printPoint(point);

 

---

 

간단하게 공식 문서의 Get Started를 읽어보다가 아무래도 시간이 부족하다보니 일단 강사님께서 제공해주신 foundation 코드를 보면서 이해가 안가는 부분이 있을 때 더 찾아봐야겠다고 생각했다.

그런데 클론을 한 후 yarn install을 한 후 yarn start를 했는데 아래와 같은 오류가 발생했다.

 

Plugin "react" was conflicted between .eslintrc.json and base ..

node_modules를 삭제했다가 다시 깔아도 보고, node_modules와 yarn-lock을 삭제한 후 다시 설치도 해봤다. 그런데도 계속 찾아보다가 yarn-lock 파일을 삭제하고나니 해결되었다는 글을 발견했다.

https://github.com/jsx-eslint/eslint-plugin-react/issues/3128

 

계속 node_modules과 같이 삭제했었는데 이번에는 node_modules는 냅두고 lock파일만 삭제해서 yarn start해봤다. 그랬더니 정상적으로 실행이 되었다.

 

그런데 lock파일이 없어도 되나 싶어서 마지막으로 한번 더 node_modules를 삭제하고 다시 yarn install 해보기로 했다. 분명 아까와 똑같이 했는데 이번에는 잘 실행이 되었다. 쓸데없이 시간낭비해서 몇시간을 날렸다. 아까운 내 시간.. 🥲

결국 왜그러는지 원인도 잘 모르고 그냥 해결되었다. (찝찝한 기분...)

 

---

리코일도 공식 문서를 보면서 대충 어떤 것인지 이해는 해서 정리를 했는데, 공식문서에서 selector 부분이 잘 이해가 안되서 좀 더 공부해봐야할 것 같다.

오늘은 다른 스터디도 있었고 밤샘의 여파가 아직도 남아있기 때문에 여기서 마쳐야 할 것 같다.

내일은 리코일 개념 조금만 더 보고 바로 프로젝트를 시작해야겠다.