기본 문법

TypeScript의 문법은 JavaScript 문법 그대로입니다. 여기에 변수, 매개변수, 반환값 등에 타입을 적는 방법이 더해졌을 뿐입니다. 이 장에서는 변수 선언, 함수, 화살표 함수, 제어 흐름을 살펴보고, 타입을 직접 적어야 할 때와 컴파일러에게 맡겨도 될 때를 구분하는 방법을 알아봅니다.

let과 const

변수는 let과 const로 선언합니다. const는 다시 대입할 수 없는 변수이고, let은 값을 바꿀 수 있는 변수입니다. 둘 다 중괄호 블록 안에서만 유효한 블록 범위를 가집니다. 오래된 var는 함수 범위를 가지며 예상하지 못한 동작을 일으키기 쉬우므로 쓰지 않습니다.

const appName = "TASTEDEV";   // 다시 대입할 수 없습니다
let count = 0;                // 값을 바꿀 수 있습니다
count += 1;

const user = { name: "Kim", age: 30 };
user.age = 31;                // 가능: 객체의 속성은 바꿀 수 있습니다
// user = { name: "Lee", age: 20 }; // 오류: const 변수에 다시 대입

if (count > 0) {
  const inner = "블록 안에서만 보입니다";
  console.log(inner);
}

const는 변수가 가리키는 대상을 고정할 뿐, 객체 내부까지 바꿀 수 없게 만들지는 않습니다. 기본은 const로 쓰고, 값이 바뀌어야 할 때만 let을 쓰는 습관을 들이면 코드가 읽기 쉬워집니다.

타입 표기와 타입 추론

변수 이름 뒤에 : 타입을 붙이면 타입 표기입니다. 하지만 초깃값이 있으면 TypeScript가 타입을 알아서 추론하므로 대부분 적을 필요가 없습니다.

let title: string = "안내서"; // 표기했지만 굳이 필요 없습니다
let pages = 120;               // number로 추론됩니다
const lang = "ko";             // 리터럴 타입 "ko"로 추론됩니다

let total: number;             // 초깃값이 없으면 표기가 필요합니다
total = pages * 2;

// pages = "많음"; // 오류: string을 number에 대입할 수 없습니다

let으로 선언한 pages는 넓은 타입 number가 되지만, const로 선언한 lang은 바뀔 일이 없으므로 정확한 값인 "ko" 자체가 타입이 됩니다. 이것을 리터럴 타입이라고 하며, 3장과 6장에서 중요하게 다룹니다.

타입을 직접 적는 것이 좋은 곳은 다음과 같습니다.

• 함수의 매개변수: 추론할 단서가 없으므로 반드시 적습니다.
• 공개 함수의 반환 타입: 실수로 반환 타입이 바뀌는 것을 막아 줍니다.
• 초깃값 없이 선언하는 변수, 빈 배열처럼 나중에 채우는 값.

함수

함수는 매개변수마다 타입을 적고, 필요하면 괄호 뒤에 반환 타입을 적습니다. 선택적 매개변수는 이름 뒤에 ?를 붙이고, 기본값을 줄 수도 있습니다.

function add(a: number, b: number): number {
  return a + b;
}

function formatName(first: string, last?: string): string {
  return last ? `${last} ${first}` : first;
}

function repeat(text: string, times = 2): string {
  return text.repeat(times); // times는 number로 추론됩니다
}

function sum(...values: number[]): number {
  return values.reduce((acc, v) => acc + v, 0);
}

function log(message: string): void {
  console.log(message); // 반환값이 없으면 void
}

add(1, 2);          // 3
formatName("길동"); // "길동"
sum(1, 2, 3, 4);    // 10

JavaScript와 달리 TypeScript는 인수 개수도 검사합니다. add(1)처럼 인수가 모자라면 오류가 나며, 생략할 수 있게 하려면 ?나 기본값을 명시해야 합니다.

화살표 함수

화살표 함수는 짧은 함수를 쓰기에 알맞고, 자신만의 this를 갖지 않아 콜백에서 특히 편리합니다. 콜백으로 넘기는 화살표 함수는 매개변수 타입이 문맥에서 추론되므로 따로 적지 않아도 됩니다.

const square = (n: number): number => n * n;

const toUpper = (s: string) => s.toUpperCase(); // 반환 타입 string 추론

const scores = [72, 95, 88];
const passed = scores.filter((score) => score >= 80); // score는 number
const labels = scores.map((score, index) => `${index + 1}번: ${score}점`);

type Comparator = (a: number, b: number) => number;
const ascending: Comparator = (a, b) => a - b;
console.log([...scores].sort(ascending));

Comparator처럼 함수의 모양을 타입으로 정의해 두면 같은 형태의 함수를 여러 곳에서 쓸 수 있습니다.

제어 흐름

조건문과 반복문도 JavaScript와 같습니다. 비교는 형 변환이 일어나지 않는 ===와 !==를 씁니다.

function grade(score: number): string {
  if (score >= 90) {
    return "A";
  } else if (score >= 80) {
    return "B";
  }
  return "C";
}

function dayName(day: number): string {
  switch (day) {
    case 0: return "일요일";
    case 6: return "토요일";
    default: return "평일";
  }
}

const fruits = ["사과", "배", "감"];
for (const fruit of fruits) {
  console.log(fruit);            // 값을 차례로 꺼냅니다
}
for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

let n = 3;
while (n > 0) {
  n--;
}

const status = n === 0 ? "끝" : "진행 중";

배열을 돌 때는 for...of가 가장 읽기 쉽습니다. for...in은 객체의 키를 문자열로 돌려주므로 배열에는 쓰지 않는 것이 좋습니다.

정리

• 기본은 const, 값이 바뀔 때만 let을 쓰고 var는 쓰지 않습니다.
• 초깃값이 있는 변수는 추론에 맡기고, 함수 매개변수와 공개 함수의 반환 타입은 직접 적습니다.
• 선택적 매개변수는 ?, 기본값은 =, 나머지 매개변수는 ...로 표현합니다.
• 화살표 함수의 콜백 매개변수는 문맥에서 타입이 추론됩니다.
• 비교에는 ===를, 배열 반복에는 for...of를 씁니다.