이펙티브 타입스크립트 정리 - 1장

타입스크립트는 자바스크립트의 상위집합

 - 타입스크립트는 별도의 문법을 가지고 있다. 

 - 런타임 오류를 발생시키는 코드를 찾아내려한다.

 

타입스크립트의 설정

 - tsconfig.json파일에서 설정한다.(약 100가지 이상의 설정 가능)

 - 다음 2가지가 중요한 설정이다.

 - noImplicitAny :  변수들이 미리 정의된 타입을 가지는지 체크

fcuntion add(a,b) {  // a와 b에서 ts 오류 발생, 암시적으로 any형식이 포함됩니다. 
	return a+b;
}

noImlicitAny설정시(true).

fcuntion add(a:number , b:number) {  // a와 b를 명시적으로 선언해주기 
	return a+b;
}

 - strictNullChecks : null과 undefined가 모든 타입에서 허용되는지 체크

const x: number = null;   // strictNullChecks 해제 시 정상 
const x: number = null;   // strictNullChecks 설정 시 null형식은 number에 할당할 수 없다.



const x: number | null = null;   // strictNullChecks 설징 시 명시적으로 타입을 표시하기


/**
strictNullChecks 설정시 
**/
const el = document.getElementById('status');

el.textContent = 'Ready';  // 개체가 null인것 같다. 에러

if(el) {
	el.textContent = 'Ready';  // 조건문을 통해 null체크를 해주어서 정상
}

el!.textContent = 'Ready';  // null아님을 ! 를 통해서 단언

 - 자바스크립트 프로젝트를 타입스크립트로 전환할때가 아니면 noImplicitAny설정 하기

 - "undefined"객체가 아닙니다 같은 런타임 오류 방지 하기 위해서 strictNUllChecks 설정 하기

 

 

타입스크립트 컴파일러의 역할

1. 최신 Ts/Js 를 브라우저에 동작 할 수 있도록 구버전의 Js로 트랜스파일한다.

2. 코드의 타입 오류 체크

 

 - 타입스크립트는 타입오류가 있어도 컴파일은 가능하다. (noEmitOnError를 설정하면 컴파일 안하게 할 수도 있음.)

 - 자바스크립트가 덕 타이핑 기반이고 타입스크립트가 이를 모델링 하기 위해 구조적 타이핑을 사용한다

 - 클래스 역시 구조적 타이핑을 따르고, 이를 사용하면 유닛 테스팅을 손쉽게 사용 가능하다

 

*구조적 타이핑 : 구조적 타이핑이란 X 와 Y 라는 타입이 '구조적' 으로 동일하다면 X 와 Y 는 호환 가능한 타입이 될 수 있다

interface A {
  id : number
}

interface B {
  id : number 
}

let a : A;

let b : B = {
  id: 5,
}

a = b //  구조적으로 같다.

interface A {
  id : number
}

interface B {
  id : number 
  name : string 
}

let a : A;

let b : B = {
  id: 5,
  name: 'june'
}

a = b //구조적으로 같다. 

a.name // 하지만 이것은 에러를 발생시킨다. 타입체커가 a에 name이있다고 확신할수없기떄문

 

any를 지양하자

 - any타입을 사용하면 타입체커와 타입스크립트 언어 서비스를 무력화시킨다.

 - 진짜 문제점을 감추고, 개발경험을 나쁘게하고, 타입 시스템의 신뢰도를 떨어뜨린다.