[TypeScript] 이펙티브 타입스크립트 (item 01 ~ 02)

item 01. TypeScript와 JavaScript 관계 이해하기

타입스크립트는 자바스크립트의 상위 집합이다.
타입스크립트는 '정적'타입 시스템이다. (?)

이것은 정확히 무슨 의미일까?

• .js 확장자 대신 .ts를 사용한다.
• 문법적으로 문제가 없을지라도 자바스크립트에 어떤 이슈가 존재한다면 타입체커에 지적당할 가능성이 있다.
• 작성된 코드를 파싱하고 자바스크립트 코드로 변환할 수 있다.

자바스크립트는 그 자체로 이미 타입스크립트라고 할 수 있다.
그렇기 때문에 자바스크립트 코드를 타입스크립트로 마이그레이션(migration)하는데 엄청난 이점이 된다.

why? 기존 코드는 그대로 유지 일부분에만 타입스크립트 적용이 가능

city가 string 이라는 타입 구문이 없는데도 지적하는 예시

let city = 'Seoul"
console.log(city.toUppercase());
// TypeError: city.toUppercase is not a function

이것을 타입 추론 이라고 하며 타입 추론은 타입스크립트에서 매우 중요한 개념입니다.

타입스크립트의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것.

타입스크립트는 에러를 지적할 뿐만 아니라 해결책을 제시해주기도 합니다.
그러나 이것이 완벽한 해결책이라고는 할 수 없습니다.

개발자입장에서는 persons 배열의 element중 프로퍼티의 key값을 잘못 입력했다고 했을 때

잘못된 key값으로 모두 수정될 수 있기 때문입니다.

const persons = [
  { name: "Kim", age: 25, gender: "male" },
  { name: "Kim", age: 25, gender: "female" },
  { name: "Kim", age: 25, gender: "female" },
];

persons.forEach((person) => {
  console.log(person.gander); 
  // 선언시의 key값인 gender와 console.log 호출시 gander중 gender로 바꿔주는 해결책을 제시해준다.
});

이 경우에는 TypeScript의 interface를 사용하여 해결할 수 있습니다.

interface Persons {
  name: string;
  age: number;
  gender: string;
}

const persons: Persons[] = [
  { name: "Kim", age: 25, gander: "male" },
  { name: "Kim", age: 25, gander: "female" },
  { name: "Kim", age: 25, gander: "female" },
  // persons에 할당할 수 없다. 개체 리터럴은 알려진 속성만 지정할 수 있으나 'Persons'형식에 'gander'는 존재하지 않는다. 
];

persons.forEach((person) => {
  console.log(person.gender);
});

이로써 우리는 타입스크립트가 우리의 의도대로 잠재적인 문제점을 찾을 수 있도록 하였습니다. 😀

 

item 02. TypeScript 설정 이해하기

• 타입스크립트는 설정을 어떻게하느냐에 따라 타입체커를 통한 오류지적이 달라집니다.

TypeScript 설정 방법

1. 커맨드라인을 통한 설정
2. tsconfig.json 파일을 통한 설정 (추천 💥)

tsconfig.json 대표 설정

• "noImplicitAny": true
• "strictNullChecks": true

{
  "compilerOptions": {
    /*
    "noImplicitAny": true, // 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어
    "strictNullChecks": true // null, undefined를 잡아낼지에 대해
    */
    "strict": true
  }
}

즉 compilerpotions 등에 어떤 옵션들을 활성화 시켜줄지에 대한것을 입력해 줌으로써 에러지적 수준? 을 결정할 수 있습니다.

Tips ❗❗

strict 옵션을 주게 되면 대부분의 오류를 잡아낼 수 있다.(관련 옵션등이 활성화 된다.)

{
  "compilerOptions": {
    "strict": true // 대부분의 옵션들이 활성화
  }
}

null을 허용하기

• | 을 사용하여 특정한 type을 허용할수 있습니다.
• const foo: number | null = null;

 

TypeScript 문법

 

Non-null assertion operator (!.)

느낌표(!) 연산자인 단언 연산자는 해당 피연산자가 null, undefined가 아니라고 단언해준다.

  const el = document.getElementById("status");

  el.textContent = "Ready";
  // ~~ Object is possibly 'null' 객체가 널일 가능성도 있다.
  // strictNullChecks 를 사용하지 않으면 error를 표시해주지 않는다.

  if (el) {
    el.textContent = "Ready";
  }

  el!.textContent = "Ready"; // 즉 좌항은 null일수가 없다. eslint에서는는 권장하지 않는다.