1. TypeScript란?

TypeScript는 JavaScript의 기능들을 제공하면서 그 위에 TypeScript 타입 시스템을 추가한다. JavaScript는 string, number, object 등의 여러 원시 타입이 있지만, 제대로 할당이 되었는지는 확인해주지 않는다. 따라서 TypeScript의 타입 시스템을 활용하면 잘못된 변수, 함수 상요에 대한 피드백을 받을 수 있어 에러를 줄일 수 있다는 장점이 있다.

2. Type 선언

JavaScript와 마찬가지로 TypeScript에도 string, number, boolean과 같은 원시 타입이 존재한다.

2.1. Variables

const, var, let으로 변수를 선언할 때, 다음과 같이 변수의 타입을 명시해준다.

let myName: string = "Alice";

TypeScript는 자동적으로 변수의 타입을 추론하기 때문에 꼭 작성하지 않아도 된다.

2.2. Functions

함수를 선언할 때, 함수의 파라미터의 타입을 명시할 수 있다. 다음은 string 타입의 name 파라미터를 입력받는 함수이다.

function greet(name: string) {
	console.log("Hello, " + name.toUpperCase() + "!!")
}

해당 함수의 파라미터에 42를 넣는다면 number 타입이므로 에러가 발생할 것이다.
또한 함수의 return 값에 타입을 명시할 수 있다. 다음은 number 타입을 return하는 함수이다.

function getFavoriteNumber(): number {
	return 26;
}

이 또한 TypeScript가 return 타입을 추론하므로 꼭 작성하지 않아도 된다.

2.3. Object

Object 타입을 정의하기 위해 object의 property들과 그 타입들을 명시해야 한다. 다음은 object를 파라미터로 받는 함수이다.

function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

property들을 분리할 때 ,와 ; 모두 사용이 가능하다.
만약 optional한 property가 있다면 ?를 이용할 수도 있다.

function printName(obj: { first: string; last?: string }) {
  // ...
}
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

위 코드를 실행했을 때 둘다 에러가 발생하지 않는다.

2.4. Interfaces

Interface를 사용하면 원하는 대로 타입에 이름을 붙일 수 있다. 다음은 Point라는 타입을 명시한 뒤 해당 타입을 파라미터로 받는 함수이다.

interface Point {
  x: number;
  y: number;
}
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

Interface는 extending 또한 가능하다.
다음과 같이 Animal 타입을 확장하여 Bear 타입을 정의한 것을 확인할 수 있다.

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear() 
bear.name
bear.honey

참고

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html