[TypeScript]이펙티브 타입스크립트 Item 16~20

item16

자바스크립트에선 객체란 키/값 쌍의 모음, 키는 보통 문자열

복잡한 객체를 키로 쓰려고 하면 문자열로 변환함, 숫자는 사용 불가

{ 1: 2, 3: 4 }
{ '1': 2, '3': 4 } // 변환됨

배열에선, 인덱스들을 문자열로 변환해서 사용 뭔소리냐

arr = [1, 2, 3]
arr[0] // 1, 당연하게 숫자 인덱스 사용 가능
arr['1'] // 2, 문자열 키 사용 가능한 모습

Object.keys(x) // ['0','1','2']
// 키 찍어보면 문자열로 출력됨

 

타입 스크립트에선 이러한 어지러운 상황을 개선하고자,

숫자(number) 키 허용, 문자열 키와 다른 것으로 인식함

(이는 버그를 잡기 위한 타입 스크립트 코드)

 

인덱스 시그니처 에 number를 사용하기 보다는 Array나 튜플 또는 ArrayLike 타입을 쓰는 게 좋음

 

 

item17

변경 관련된 오류 방지를 위해 readonly 사용한다

 

매개변수가 readonly로 선언되면,

타입스크립트는 매개변수가 함수 내에서 변경이 일어나는지 체크

호출하는 쪽에서는 함수가 매개변수를 변경하지 않는다는 보장받음

 

readonly 사용하면 변경하면서 발생하는 오류 방지 가능, 변경이 발생하는 코드도 쉽게 찾을 수 있음

 

const와  readonly의 차이

const는 재할당이 불가능, But 속성은 변경 가능

readonly 는 속성의 변경 막아준다

//변수의 경우
const test = 'jobum'; // 출력하면 jobum 나옴
const test = 'jobum!!'; // 에러

//객체의 경우
const test = {
	name: 'temp',
}
test.name = 'change'; //변경 가능

 

readonly는 얕게(shallow) 동작

type ReadOnly = {
	readonly rData: Changeable;
}

type Changeable = {
	cData: string;
}

const test: ReadOnly = {
	rData: {
    	cData: 'before'
    }
}

test.rData.cData = 'after';  // 변경 가능
test.rData = { cData: 'after' } //Cannot assign to 'rData' because it is a read-only property.

 

item18

매핑된 타입은 한 객체가 또다른 객체와 정확히 같은 속성을 가지게 할 때 이상적

매핑된 타입을 사용해서 값을 동기화하도록 한다

즉, 인터페이스에 속성이 추가될 때 이에 대해 대응을 해야 한다

 

// 값을 Update 여부 정해줌 
const REQUIRES_UPDATE: { [k in keyof ScatterProps]: boolean } = {
  xs: true,
  ys: true,
  xRange: true,
  yRange: true,
  color: true,
  onClick: false, // newProps에만 새로 추가된 속성
};

function shouldUpdate(oldProps: ScatterProps, newProps: ScatterProps) {
  let k: keyof ScatterProps;
  for (k in oldProps) {
    if (oldProps[k] !== newProps[k] && REQUIRES_UPDATE[k]) {
	// REQUIRES_UPDATE를 통해 두 객체가 공통된 속성을 가지고 있을 때만 Update하게 강제함
	// 고로 OnClick 은 Update 안됨  
      return true;
    }
  }
  return false;
}

 

 

item19

추론 가능한 타입 사용해 장황한 코드 방지하기

// 장황...
const person: {
	name: string;
	age: number;
} = {
	name: 'jobum',
	age: 20,
};

// 타입 추론 
const person = {
	name: 'jobum',
	age: 20,
};

 

타입 명시하면 좋은 경우들 

 

객체 리터럴을 정의할 때 이미 타입이 추론되지만 타입을 명시하면,

=>잉여 속성 체크가 작동하고 이는 오타 같은 오류를 잡는데 좋음

또한 변수가 사용하는 시점이 아니라 할당하는 시점에 표시되기에 좋음

 

이외에도 함수의 반환에도 타입 명시하여 오류 방지 가능 

=> 함수에 대해 더욱 명확하게 알 수 있음

또한 명명된 타입을 사용함으로서 직관적인 표현이 된다

 

 

item20

 

다른 타입에는 다른 변수 사용하기 

 

변수의 값은 변할 수 있지만 타입은 보통 변하지 않는다

변한다면 보통 축소, 범위를 좁히는 경우

let test = '100-200'; //string
test = 100200; // 오류 

let test: string|number = '100-200';
test = 100200 // 가능하지만,,, 사용할 때마다 타입 확인해야하니 좋은 선택 아님 

const test1 = '100-200'
const test2 = 100200 // 별도의 변수 쓰자