j2kb 스터디

→ 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다.

→ 문법의 유효성과 동작의 이슈는 독립적인 문제

확장자

• 자바스크립트 : .js(.jsx)
• 타입스크립트 : .ts(tsx)

확장자는 다르지만 타입스크립트는 자바스크립트의 상위호환이기 때문에 자바스크립트 코드가 타입스크립트 코드라고 할 수 있다. 이러한 특성으로 자바스크립트 코드를 타입스크립트 코드로 마이그레이션하는 데 비용적, 시간적 효율이 높다.

❗그러나 타입스크립트는 타입을 명시하는 추가적인 문법을 가지고 있기 때문에 그 반대로는 성립이 되지 않는다.

아래 코드는 유효한 타입스크립트 프로그램이다.

function greet(who: string) {
  console.log("Hello", who);
}

아래는 Node와 같은 프로그램으로 위의 코드를 실행하면 발생하는 오류이다.

function greet (who: string) {
                    ^

SyntaxError: Unexpected token :

‘: string’은 타입스크립트에서 쓰이는 타입 구문으로, 타입 구문을 사용하는 순간 자바스크립트는 타입스크립트 영역으로 들어가게 된다.

let city = "new york city";
console.log(city.toUppercase());

// 'toUppercase' 속성이 'string' 형식에 없습니다.
// 'toUpperCase'을(를) 사용하시겠습니까?

위의 코드에는 타입 구문이 없지만, 타입스크립트의 타입 체커는 문제점을 찾아낸다.

타입 추론을 통해서 city 변수의 타입이 문자열이라는 것을 알아냈고, toUppercase 메서드는 문자열에서 제공하지 않는 함수이기 때문에 오류를 발생시켰다.

타입 체커는 오류 외에도 오류는 발생하지 않는데 의도와는 다르게 동작하는 경우도 찾아내 오류를 발생시킨다.

const states = [
  { name: "Alabama", capital: "Montgomery" },
  { name: "Alaska", capital: "Juneau" },
  { name: "Arizona", capital: "Phoenix" },
];

for (const state of states) {
  console.log(state.capitol);
}

// 'capitol' 속성이 ... 형식에 없습니다.
// 'capital'을(를) 사용하시겠습니까?

위의 코드는 유효한 자바스크립트이며 어떠한 오류도 없이 실행된다. 그러나 루프 내 state.capitaol은 의도한 코드가 아닌 게 분명하다. 누가 보더라도 오타 느낌이 들지 않는가? 아무튼 이런 경우에도 타입 체커는 오류를 찾아낸다.

//타입구문 추가
interface State {
  name: string;
  capital: string;
}

const states: State[] = [
  { name: "Alabama", capitol: "Montgomery" },
  { name: "Alaska", capitol: "Juneau" },
  { name: "Arizona", capitol: "Phoenix" },
];
// 개체 리터럴은 알려진 속성만 지정할 수 있지만 'State' 형식에 'capitol'이(가) 없습니다.
// 'capital'을(를) 쓰려고 했습니까?

for (const state of states) {
  console.log(state.capital);
}

위의 예체처럼 타입 구문이 추가된다면 컴파일 타임에서 훨씬 더 많은 오류를 발견할 수 있다.

→ 타입스크립트는 오류의 원인을 추측할 수 있지만 그것이 항상 정확한 것은 아니다. (ex. 오타) 그렇기 때문에 타입 구문을 추가하여 오류의 원인을 명확히 하는 것이 좋다.

따라서 “타입스크립트는 자바스크립트의 상위집합이다” 라는 문장이 잘못된 것처럼 느껴진다면, 아마 ‘타입 체커를 통과한 타입 스크립트 프로그램’ 영역 때문이다.

정리하면, 위의 이미지와 같이 모든 자바스크립트는 타입스크립트이지만, 일부 자바스크립트 + 타입스크립트만 타입 체크를 통과한다.

const x = 2 + '3'; // 정상
const y = '2' + 3; // 정상

const a = null + 7; // '+' 연산자를 ... 형식에 적용할 수 없습니다.
const b = [] + 12; // '+' 연산자를 ... 형식에 적용할 수 없습니다.
alert('Hello', 'Typescript'); // 0-1개의 인수가 필요한데 2개를 가져왔습니다.

• 아래는 작성된 프로그램이 타입 체크를 통과하더라도 여전히 런타임에 오류가 발생하는 예제

const names = ["alice", "bob"];
console.log(names[2].toUpperCase());
// TypeError: Cannot read property 'toUpperCase' of undefined

자바스크립트의 런타임 동작으로 모델링하는 것은 타입스크립트 타입 시스템의 기본 원칙이다.

그러나 위의 코드를 통해 런타임 동작 모델링 외에도 의도치 않은 이상한 코드가 오류로 이어질 수도 있다는 점까지 고려해야 한다.

→ 근본 원인은 타입스크립트가 이해하는 값의 타입과 실제 값에 차이가 있기 때문이다.

• 타입스크립트는 자바스크립트의 상위집합이다.
• 타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입 시스템을 가지고 있다.
  • 타입 시스템을 통해 런타임 오류를 발생시키는 코드를 찾는다.
  • 타입 체커를 통과하더라도 런타임 오류를 발생시킬 코드는 존재할 수 있음을 인지해야 한다.
• 타입스크립트 타입 시스템은 전반적으로 자바스크립트 동작을 모델링한다.

아이템2. 타입스크립트 설정 이해하기

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

아이템4. 구조적 타이핑에 익숙해지기

아이템5. any 타입 지정하기