팀 프로젝트때 사용할 메인 스택중의 하나인 타입스크립트를 오늘 주말을 이용해 강의를 보면서 공부를 해보았다! 👍👍👍
오늘은 공부한 코드만 기록해 둘 예정이다.
나도 타입스크립트를 공부하기전에는 그저 최근에 핫한 자바스크립트 상위호환 버전으로만 생각하고 있었다. 그런데 막상 공부해보니 정말 좋은 오픈소스였다.
let age:number = 28;
age = '28' // error
자바스크립트는 타입을 명시적으로 적지 않기 때문에 가독성이 떨어지며 한눈에 바라봤을 때 어떤 데이터를 담고 있는지 유추하기가 힘들었다. 사용자가 사용할 때 비로소 겨우 에러를 발견할 수 있는(?) 정도였다.
그에 반해 타입스크립트는 내가 개발을 하면서 에러를 즉각적으로 찾아낼 수 있겠다는 생각이 들었다. 객체 지향 프로그래밍이기 때문에 모듈성, 재사용성, 확장성이 강조되며 이 세 가지를 근본으로 유지 보수성이 굉장히 높을 것 같다.
그렇기 때문에 조금이라도 더 안정적인 프로그래밍을 할 수 있겠다는 생각이 든다.
중요하면서도 내가 까먹을 것 같은 것만 적어두려고 한다.
aliase
새로운 타입을 정의할 수 있다.
type Text = string;
const name: Text = 'useong';
const address: Text = 'korea';
type Student = {
name: string;
age: number;
}
const student: Student = {
name: 'useong',
age: 12,
}
// String Literal Types
type Name = 'name';
let useongName: Name;
useongName: 'name'
type JSON = 'json';
const json: JSON = 'json';
나는 String Literal Types 부분이 굉장히 충격적이였다. Type을 내 마음대로 지정할 수 있다는게 정말 신기했다.
union
union은 공통적인 프로퍼티를 사용하여 더 구분하기 쉽게 만들어 준다.
type LoadingState = {
state: 'loading';
};
type SuccessState = {
state: 'success';
response: {
body: string;
};
};
type FailState = {
state: 'fail';
reason: string;
};
type ResourceLoadState = LoadingState | SuccessState | FailState;
function printLoginState(state: ResourceLoadState) {
switch (state.state) {
case 'loading':
return '👀 loading...';
case 'success':
return '😃 loaded';
case 'fail':
return '😱 no network';
default:
throw new Error(state)
}
}
printLoginState({ state: 'loading' }); // 👀 loading...
printLoginState({ state: 'success', response: { body: 'loaded' } }); // 😃 loaded
printLoginState({ state: 'fail', reason: 'no network' }); // 😱 no network
union은 정말 많이 쓰일 것 같은 기분이 들었다.
generic
자바스크립트만 사용해오던 나에게 generic은 처음에 이걸 왜쓰지? 라는 생각이 들었지만 계속 강의를 들으면서 “아~~” 하면서 들었던 기억이 난다.
generic은 클래스 혹은 함수에서 사용할 타입을 그 클래스나 함수를 사용할 때 타입을 결정하는 기법이라고 할 수 있다.
function checkNotNull<T>(arg: T | null): T {
if (arg == null) {
throw new Error('not valid number!');
}
return arg;
}
// Type이 number라는 것을 이 때 결정한다.
const number = checkNotNull(123);
// Type이 boolean라는 것을 이 때 결정한다.
const boal: boolean = checkNotNull(true);
// 객체에서 제너릭
const obj = {
name: 'useong',
age: 20,
}
const obj2 = {
animal: '강아지'
}
// T라는 객체에서 key값을 K로 둔다는 뜻
function getValue<T, K extends keyof T> (obj: T, key: K): T[K] {
return obj[key];
}
// console.log(getValue(obj, 'name')); // useong
// console.log(getValue(obj, 'age')); // 20
// console.log(getValue(obj2, 'animal')); // "강아지"
오늘 많이 공부했다고 생각했지만 막상 돌이켜보니, 많이 못한 것 같다.. 아무래도 오늘 스프린트 과제 복습, 리액트 복습, 알고리즘 다시 풀어보기도 같이해서 그런지.. 타입스크립트를 생각보다 못한 기분이 든다. 내일과 다음주 평일에도 계속 틈틈이 공부해야겠다.
👊 내일의 TIW(today I Will)
타입스크립트, 알고리즘 풀기, 리액트 첼린지, mySQL 복습