typesciprt 에러 정리

TS1002

error TS1002: Unterminated string literal.
단순하게 문자열을 적고 마지막에 ' 또는 "을 사용해 닫지 않으면 발생
종종 백틱을 쓰는걸 까먹고 여러줄에 쓰다가 발생하는 경우가 있음

// 에러남
const text = '텍스트

// 좋은 예
const text1 = '잊지말고 닫기';

const text2 = '여러줄은' +
      '꼬박꼬박 닫고 넘기기';
const text3 = `편하게
	백틱 사용하기`;

TS1016

error TS1016: A required parameter cannot follow an optional parameter.
선택적 매개변수를 필수 매개변수 앞으로 두면 보게되는 에러
컴포넌트에 들어가는 매개변수를 너무 늘리다가 정신 놓으면 보게됨

// 나쁜 예
function fun1(v1: string, v2?: string, v3: number) {
  // ...
}
// 좋은 예
function fun2(v1: string, v2?: string, v3?: number) {
  // ...
}

function fun3(v1: string, v3: number, v2?: string) {
  // ...
}

TS1109

error TS1109: Expression expected.
표현식과 명령문을 혼동하거나 변수에 담아야 할 것을 헷갈리면 발생

// 나쁜 예
const data = throw new Error('Data Missing');

// 좋은 예
const data = undefined;
if (!data) {
  throw new Error('Data Missing');
}

TS2304

error TS2304: Cannot find name ‘world’.
알수 없는 런타임 환경이나 다른 라이브러리 접근시 발생 가능
TypeScript가 알 수 있도록 주변 환경을 선언해주는 방식 필요

// 에러 발생 가능
console.log(world.name);

// 해결
declare var world: {
  name: string;
};

console.log(world.name);

TS2322

error TS2322: Type ‘string’ is not assignable to type ‘number’.
반환값 지정하고 number 계산시켰는데 백틱을 사용해 조합하는 경우 종종 예외처리를 놓치는 에러

// 나쁜 예
export function add(a: number, b: number): number {
  return `${a + b}`;
}
// 좋은 예
export function add(a: number, b: number): number {
  return parseInt(`${a + b}`, 10);
}

TS2345

error TS2345: Argument of type ‘number‘ is not assignable to parameter of type ‘TimerHandler‘.
에러랑 연관 깊은 상황은 아니지만, setTimeout 사용시 첫번째 매개변수를 함수로 다이렉트로 꽃아서 발생함 함수 실행 결과인 계산된 number가 반환되고, setTimeout은 callback을 원하니 타입이 일치하지 않아 발생

function add(a: number, b: number): number {
  return a + b;
}

// 나쁜 예
setTimeout(add(1000, 337), 5000);
// 좋은 예
setTimeout(() => add(1000, 337), 5000);

TS2531

error TS2531: Object is possibly ‘null’.
가능성을 고려해 null일 수 있다는 의견 제시하는 에러
예외처리를 해줘야함

type Data = {
  value1: {
    value2: string;
  } | null
}

// 나쁜 예
function checkData(data: Data): void {
  console.log(data.value1.value2);
}

// 좋은 예
function checkData(data: Data): void {
  console.log(data.value1?.value2);
}

TS2532

error TS2532: Object is possibly ‘undefined’.
가능성을 고려해 undefined일 수 있다는 의견 제시하는 에러
예외처리를 해줘야함

type Data = {
  value: string;
}

// 나쁜 예
function checkData(data?: Data): void {
  console.log(data.value);
}
// 좋은 예

function checkData(data?: Data): void {
  if(data)
  	console.log(data.value);
}

function checkData(data?: Data): void {
  console.log(data?.value);
}