타입스크립트 알아보기 - 이펙티브 타입스크립트

타입스크립트와 자바스크립트의 관계 이해하기

• 타입스크립트 > 자바스크립트
  but, 타입체커를 통과한 자바스크립트 극히 일부분

타입스크립트 설정 이해하기

• tsconfig.json 사용 권장 >> 커멘트 라인
• noImplicitAny
  변수들이 미리 정의된 타입을 써야하는지
• strictNullChecks
  number type 에 null 또는 undefined 사용 불가
  • | 사용하거나
  • null 이나 undefiend 체크해주는 분기처리 해주거나
    
    
• noEmitOnError
  오류가 있을 때 컴파일 하지 않음

ex. 

if(el) {
  el.textContent = 'Ready'; // null 제외
}
el!.textContent = 'Ready; // null 제외

코드 생성과 타입이 관계없음을 이해하기

• ts → js : 트랜스파일 : 소스코드를 동일한 동작을 하는 다른 형태의 소스코드로 변환하는 행위, 여전히 컴파일이 필요함.
  • 트랙젝션 단계에서, 타입은 모두 사라진다.
  • 사라지지 않게 하려면
    class 를 사용하거나,
• js → 컴퓨터가 이해하는 저수준 언어 : 컴파일
• typescript 는 빌드 시간에는 영향을 주지만, 컴파일시간에는 영향을 주지 않는다. 
  런타임 성능에 아무 영향이 없음.
• 타입오류가 있는 코드도 컴파일은 가능하다. (빌드 중단 x)
• instanceof (interface로 생성된 타입)하면, 에러 발생. 
  타입은 런타임 시점에 아무런 역할을 하지 못하고 제거되지 때문.
• 타입 정보를 유지하는 방법
  • 태그 기법 (tagged union)

ex. 

// 태그 기법
interface Square {
  kind: 'square';
  width: number;
}
interface Rectangle {
  kind: 'rectangle';
  height: number;
  width: number;
}
type Shape = Square | Rectangle;
function calculateArea(shape: Shape) {
  if (shape.kind === 'rectangle') {
    return shape.width * shape.height;
  } else {
    return shape.width * shape.width;
  }
}

 

• class 사용

ex.

class Square {
  constructor(public width: number) {}
}
class Rectangle extends Square {
  constructor(public width: number, public height: number) {
    super(width);
  }
}
type Shape = Square | Rectangle;

function calculateArea(shape: Shape) {
  if (shape instanceof Rectangle) {
    return shape.width * shape.height;
  } else {
    return shape.width * shape.width;
  }
}

 

구조적 타이핑에 익숙해지기

• 자바스크립트는 덕 타이핑(duck-typing) 기반
  명제 정의: "만약, 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다. "
• 자바스크립트 컴파일러를 모델링 했기 때문에, 타입은 더 큰 타입과 혼용해서 사용할 수 있다?

any 타입 지양하기

• Q. 써야하는 순간이 있다면 언제일까?