0. 타입

타입이란 데이터 형을 의미합니다. 자바스크립트는 동적언어이기 때문에 자료형이 자유롭게 바뀌도록 데이터를 변수에 할당할 수 있지만, 그로 인한 혼란과 코드의 예측 불가능을 얻게 되었습니다. 이에 타입스크립트는 기본 자바스크립트 위에 타입만 지정할 수 있도록 고안된 언어입니다.

우리가 만드는 코드는 타입을 지정해가며 쓸 수 있지만 실제 개발은 수많은 자바스크립트 라이브러리들과 함께하죠.
그래서 그들의 타입을 우리가 다 지정해줄 수는 없고, 제공된 타입 파일을 따로 설치해주거나 그 라이브러리가 자체적으로 제공(보통 index.d.ts)해주어야 합니다.
그런 타입 파일을 검색하는 방법은 npm 홈페이지에서 @types/<패키지명>으로 찾을 수 있습니다.

타입스크립트와 타입은 아래 두 가지의 관계로 얽힙니다.
타입선언 - 우리가 이 데이터의 타입이 무엇인지 타입스크립트에게 말해주는 것.
타입추론 - 타입스크립트가 이 데이터의 타입이 무엇인지 스스로 추론하는 것.

보통은 타입 추론에 의지하고 아래의 경우와 같이 타입선언은 꼭 필요할 때 합시다.
1) 함수가 any타입을 리턴할 때 명시적으로 우리가 타입 선언을 해줍니다.

const json = '{"x": 10, "y": 20}';
const coordinates: { x: number; y: number } = JSON.parse(json);
console.log(coordinates);

2) 변수의 선언과 초기화가 분리될 때

let words = ['red', 'green', 'blue'];
let foundWord: boolean;

for (let i = 0; i < words.length; i++) {
  if (words[i] === 'green') {
    foundWord = true;
  }
}

3) 변수가 있더라도 타입스크립트가 합리적으로 추론할 수 없을 때

let numbers = [-10, -1, 12];
let numberAboveZero: boolean | number = false;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 0) {
    numberAboveZero = numbers[i];
  }
}

1. Variables

타입선언
변수명 옆에 : <type>으로 선언합니다.

let apples: number = 5;
let speed: string = 'fast';
let hasName: boolean = true;
const logNumber: (i: number) => void = (i) => {
  console.log(i);
};

함수 + 객체

const todaysWeather = {
  date: new Date(),
  weather: 'sunny',
};

const logWeather = ({
  date,
  weather,
}: {
  date: Date;
  weather: String;
}): void => {
  console.log(date);
  console.log(weather);
};

logWeather(todaysWeather);

타입추론
동일한 곳에서 변수의 선언과 초기화를 하면 타입추론을 합니다.

let apples = 5; // O
let appples;
apples = 5; // X

2. Functions

타입선언
파라미터와 리턴값의 타입을 선언해 줍니다.

const subtract = (a: number, b: number): number => {
  return a - b;
}

function divide(a: number, b: number): number {
  return a / b;
}

const multiply = function(a: number, b: number): number {
  return a * b;
}

타입추론
함수는 return값이 있으면 타입추론을 자동으로 합니다. 그러나 우리가 리턴문 작성을 깜박하거나 빼먹는 경우를 방지하기 위해서 명시적으로 항상 쓰는 것을 권합니다.

타입
void : 리턴값 없음 return null과 return undefined를 사용할 수 있습니다.
never: 절대 리턴될 게 없을 때 사용합니다. 명시적이고, 약간 금지를 명령하는 것 같기도 하네요. throw error를 던진 것과 같은 경우입니다.

3. Objects

타입선언
배열의 경우 배열 안의 값을 표시하고 대괄호로 배열임을 나타냅니다.

let colors: string[] = ['red', 'green', 'blue'];

객체의 경우 객체 키값의 타입을 다 지정해줍니다.

let point: { x: number; y: number } = {
  x: 10,
  y: 20,
};

클래스의 경우, 해당 클래스가 곧 타입입니다.

class Car {}
let car: Car = new Car();

타입추론
객체의 디스터럭쳐링의 경우 자동으로 추론하지만 명시적으로 써놓습니다.

const profile = {
  name: 'alex',
  age: 20,
  coords: {
    lat: 0,
    lng: 15,
  },
  setAge(age: number): void {
    this.age = age;
  },
};

const { age }: { age: number } = profile;
const {
  coords: { lat, lng },
}: { coords: { lat: number; lng: number } } = profile;