러닝 타입스크립트 4~6장

4장

p.82

자바스크립트는 덕타이핑인 반면 타입스크립트는 구조적으로 타입화된다.

덕 타이핑, 구조적 타이핑이 뭔가요 ? ⇒ 이펙티브 타입스크립트를 읽고 작성했던 내용 참고하면 될 듯 https://velog.io/@zzi99/이펙티브-타입스크립트-1장-타입스크립트-알아보기#아이템-4-구조적-타이핑에-익숙해지기

좀 더 자세한 내용 : https://vallista.kr/덕-타이핑과-구조적-타이핑/

5장

p.102

타입스크립트에서 선택적 매개변수는 항상 암묵적으로 undefined가 될 수 있다.

// title: string | undefined
const printTodo = (title?: string) => {
  console.log(title);
};

선택적 매개변수는 유니온 타입 매개변수와는 다르다.
?(선택적 매개변수)가 아닌 매개변수는 값이 명시적으로 undefined일지라도 항상 제공되어야한다.

const printTodo2 = (title: string | undefined) => {
  console.log(title);
};

printTodo2(); // Expected 1 arguments, but got 0. 

p.103

타입스크립트에서 배개변수에 기본 값이 있고 타입 에너테이션이 없는 경우, 타입스크립트는 해당 기본값을 기반으로 매개변수 타입을 유추한다.

rating 을 number 타입으로 유추하기 때문에 에러 발생

const rateSong = (song: string, rating = 0) => {
  console.log(`${song} gets ${rating}/5 stars`);
};

rateSong("Song", "5"); // Argument of type 'string' is not assignable to parameter of type 'number'.

p.105

변수와 마찬가지로 타입 에너테이션을 사용해 함수의 반환 타입을 명시적으로 선언하지 않는 것이 좋다. (동의하지 않음) 하지만 함수에서 반환타입을 명시적으로 선언할 유용한 경우들이 있다.

• 가능한 반환값이 많은 함수가 항상 동일한 타입의 값을 반환하도록 강제한다.
• 타입스크립트는 재귀 함수의 반환 타입을 통해 타입을 유추하는 것을 거부한다.
• 수백 개 이상의 타입스크립트 파일이 있는 매우 큰 프로젝트에서 타입 스크립트 타입 검사 속도를 높일 수 있다.

👉🏻 동의하지 않는 이유 : 이펙티브 타입스크립트를 읽었을 때는 타입 추론이 가능할지라도 구현상의 오류가 함수를 호출한 곳까지 영향을 미칠 수 있기 때문에 타입 구문을 명시하는 것이 좋다고 적혀있었다.(아이템 19 추론 가능한 타입을 사용해 장황한 코드 방지하기) 나의 생각도 이펙티브 타입스크립트와 동일하게 사이드 이펙트를 피하기 위해서는 함수의 반환 타입은 적어주는게 낫지 않나 싶다.

p.113

함수의 반환타입인 void , never는 다르다. void는 아무것도 반환하지 않는 함수를 위한 것이고, never는 절대 반환하지 않는 함수를 위한 것이다.

6장

p.122

타입스크립트 배열 사용시 주의사항 ⚠️
배열의 길이보다 더 큰 인덱스로 배열 요소에 접근하여도 오류를 표시하지 않는다.
참고) noUncheckedIndexAcess 플래그가 있지만 매우 엄격하여 프로젝트에서 잘 사용하지 않음

p.124

튜플은 각 인덱스에 알려진 특정 타입을 가지며 배열의 모든 가능한 멤버를 갖는 유니언 타입보다 구체적이다. 튜플 타입을 선언하는 구문은 배열 리터럴 처럼 보이지만 요소의 값 대신에 타입을 적는다.

p.125 ~ p.130

타입스크립트에서 일반적인 배열 대신 튜플타입임을 알려주는 방법이 2가지 있다.
명시적 튜플 타입과 const 어서션을 사용한 방법이다.

1. 명시적 튜플 타입

pairArray가 [boolean, number] 가 아닌 (string | number)[]로 추론되기 때문에 인수로 전달될 수 가 없음

// 타입 (string | number)[]
const pairArray = ["Amage", 1]; 

function logPair(name: string, value: number) {
 console.log(`${name} has ${value}`);
}

logPair(...pairArray);

[string, number] 을 명시해주면 해결됨

const pairArray: [string, number] = ["Amage", 1]; 

function logPair(name: string, value: number) {
console.log(`${name} has ${value}`);
}

logPair(...pairArray); // Ok

2. const 어서션

as const가 배치되면 배열이 튜플로 처리되어야 함을 나타냄

// 타입: (string | number)[]
const unionArray = [1157, "Tomoe"];

// 타입: readonly [1157, "Tomoe"]
const readonlyTuple = [1157, "Tomoe"] as const;

const 어셔선은 유연한 크기의 배열을 고정된 크기의 튜플로 전환하는 것을 넘어, 해당 튜플이 읽기 전용이고 값 수정이 예상되는 곳에서 사용할 수 없을 나타낸다.