✅ TIL

---

요즘 프론트엔드 개발에서는 TypeScript를 널리 사용하고 있어,
JavaScript를 공부하는 동시에 TypeScript를 습득하는 것도 중요하다.

TypeScript를 사용하지 않는 경우, 채용 과정에서도 탈락하는 경우가 있을 정도로 중요한 기술이 되었다.

이번 유닛은 TypeScript의 기초적인 문법을 학습하고, 프로젝트에 TypeScript를
세팅하는 방법을 실습하여 처음 접해도 쉽게 학습할 수 있도록 구성되어 있다.

TypeScript란

---

TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어이다.

JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로,
JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었다.

TypeScript의 등장 배경

TypeScript를 이야기하기에 앞서, JavaScript에 대해 먼저 이야기해 보겠다.

JavaScript는 처음에는 브라우저에서만 동작하는 스크립팅 언어로 만들어졌었다.

시간이 점점 흐르고, JavaScript로 웹 애플리케이션의 상호작용이 증가하면서,
웹 애플리케이션이 필요로 하는 JavaScript 코드의 양이 폭발적으로 늘어나게 되었다.

이로 인해 JavaScript의 한계가 부각되기 시작했다. JavaScript는 동적 타입이 결정되어 유연하고,
다양한 라이브러리와 프레임워크를 사용할 수 있는 장점이 있지만, 타입의 명시성이 부족하다는 단점이 있다.

타입의 명시성이 부족하게 되면 예상치 못한 결과를 초래할 수 있다. 아래는 그 예시이다.

let add = (x, y) => {
	return x + y;
}

add(5, "7");

위의 코드는 add 함수에 숫자 5와 문자열 "7"을 전달인자로 전달하여 덧셈을 수행하고 있다.

이렇게 되면 결과는 "57"이 나온다. 이런 식으로 JavaScript는 문자열과 숫자를 더할 경우, 숫자 타입의 인수 쪽을 강제적으로 타입 변환해 문자열을 만든다. 이렇게 JavaScript는 함수나 변수의 타입을 명시적으로 지정하지 않아도 동작하는 경우가 많아 예상치 못한 결과를 초래하게 된다. 이런 문제점을 보완하기 위해 TypeScript라는 언어가 등장하게 되었다.

TypeScript를 사용했을 시 장점

TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다.

이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있다.

또한 TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며, 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와준다.

아래는 인터페이스(Interface)를 사용하여 코드의 가독성을 높인 예시이다.

interface User {
  id: number;
  name: string;
}

function greetingUser(user: User) {
	 console.log(`Hello, ${user.name}!`)
}

const parkUser = {
	id: 1,
  name: "박해커"
};

greetingUser(parkUser);

위의 코드는 User 인터페이스를 정의해 User의 정보를 좀 더 쉽게 파악할 수 있다.

그리고 greetingUser 함수에도 매개변수로 User 타입을 사용해
이 함수가 어떤 타입의 인자를 받고 있는지 명확히 표현하고 있다.

이렇게 TypeScript를 사용하면 코드의 가독성을 높일 수 있다.

또한 타입을 명시함으로써 코드의 의도 또한 명확해지기 때문에 다른 개발자가 코드를
이해하고 수정하기 쉬워지며, 런타임 에러를 미리 방지할 수 있기 때문에 유지보수성 또한 높아진다.

TypeScript의 타입

---

TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원한다.

Boolean(불리언) 타입

가장 기본적인 데이터 타입으로, JavaScript에서도 마찬가지로
boolean 값이라고 불리는 참(true), 거짓(false) 값이다.

let isShow: boolean = true;
let isDone: boolean = false;

Number(숫자) 타입

TypeScript에서 Number 타입을 선언하는 방식은 아래와 같다. JavaScript와 마찬가지로 TypeScript 또한 정수와 실수의 구분 없이 Number 타입 하나로 표기한다. TypeScript는 이 외에도 추가로 bigint를 지원한다.

let number1: number = 5;
let number2: number = 0.7;

String(문자열) 타입

TypeScript는 JavaScript처럼 큰따옴표(")나 작은따옴표(')를 사용하여 문자열 데이터를 표현한다.
또한 백틱(`)을 사용한 문자열인 템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있다.

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`

Array(배열) 타입

TypeScript는 JavaScript처럼 값들을 배열로 다룰 수 있게 할 수 있으며,
두 가지 방법으로 배열 타입을 선언해 사용할 수 있다.

// 첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

// 두 번째 방법
let numberList: Array<number> = [4, 7, 100];

첫 번째 방법은 배열의 요소들을 나타내는 타입 뒤에 배열을 나타내는 []을 쓰는 것이다.
이어 두 번째 방법은 제네릭 배열 타입을 사용하는 것이다.

Array를 먼저 작성한 뒤, <> 안에 배열의 요소들을 나타내는 타입을 작성한다.

배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능하다.

Tuple(튜플) 타입

TypeScript에서 튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

let user: [string, number, boolean] = ["kimcoding", 20, true];

모든 요소가 전부 같을 필요는 없지만, 배열의 index마다
타입이 정해져 있기 때문에 정확한 index에 접근할 필요가 있다.

console.log(user[2].toString());

이렇게 user[2]에 접근하게 되면, user[2]에 있는 요소는 boolean 타입이기 때문에 타입 에러가 발생한다.

JavaScript에서도 튜플 타입을 지원하며, JavaScript에서의 튜플 또한
여러 개의 값을 가진 배열을 나타내는 데에 사용한다.

그러나 JavaScript에서는 튜플 타입을 명시적으로 선언할 수 없기 때문에
개발자가 직접 튜플의 각 요소의 타입을 확인하고 유추해야 하므로 타입 에러가 더 쉽게 발생한다.

TypeScript의 등장 배경 중 하나인 타입 에러를 방지하고자 한 이유 중 하나이기도 하다.

Object(객체) 타입

TypeScript에서 객체는 JavaScript와 마찬가지로 원시 타입이 아닌 타입을 나타낸다.

JavaScript에서 Object(객체) 타입은 프로퍼티를 가지는 JavaScript의 값을 말하며
typeof 연산자를 사용했을 때 “object”을 반환하는 모든 타입을 의미합니다.

💬 JavaScript의 원시 타입에는 number, string, boolean, undefined, null, symbol이 있다.

let obj: object = {};

TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로,
객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다.

그러나 이는 타입 안정성을 보장하지 않기 때문에 추천하는 방법은 아니다.
따라서 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 훨씬 좋다.

객체는 이런 방식으로 key-value에 구체적인 타입까지도 지정할 수 있다.

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

Any 타입

간혹 애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 때도 있다.

클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우
개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있다.

let maybe: any = 4;

any 타입을 사용하게 되면, 변수에 값을 재할당하는 경우 타입을 명시한
변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 된다.

let obj: object = {};

// 에러가 난다.
obj = "hello";

let maybe: any = 4;

// 정상적으로 동작한다.
maybe = true;

또한 엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된
값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않는다.

대신, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티이기 때문에 반환되는 값은 undefined이다.

let maybe: any = 4;

// undefined로 출력된다.
console.log(maybe.length);

또한 any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용하다.
예를 들어서 여러 타입이 섞인 배열을 받고자 할 때 유용하다.

let list: any[] = [1, true, "free"];

// any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있다.
list[1] = 100;

TypeScript의 함수

---

JavaScript에서 함수는 모든 애플리케이션의 기본적인 구성 요소이다.

JavaScript에서의 함수와 마찬가지로 TypeScript에도 함수는 JavaScript와 마찬가지로
기명 함수(named function)와 화살표 함수(arrow function) 등으로 만들 수 있다.

JavaScript에서 함수를 이렇게 작성했다.

// named function
function add(x, y){
	return x + y;
}

// arrow function
let add = (x, y) => {
	return x + y;
}

이를 TypeScript로 다시 표현해 보겠다.

// named function
function add(x: number, y: number):number {
	return x + y;
}

// arrow function
let add = (x: number, y: number): number => {
	return x + y;
}

TypeScript에서 함수를 표현할 때는 매개변수의 타입과 리턴값의 타입을 명시해야 한다.

각 매개변수에 해당하는 타입을 작성하고, 리턴값의 타입을 괄호 뒤에 작성을 하면 된다.
반환되는 타입은 타입추론을 이용하여 생략할 수도 있다.

// named function
function add(x: number, y: number) {
	return x + y;
}

// arrow function
let add = (x: number, y: number) => {
	return x + y;
}

이렇게 리턴값을 작성하지 않아도 TypeScript 컴파일이 스스로 판단해서 타입을 넣어주며, 이것이 타입 추론이다.

그리고 만약 함수에 리턴값이 없다면, void를 사용하여 작성할 수 있다.

let printAnswer = (): void => {
	console.log("YES");
}

또한 TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 한다.

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

// 에러가 난다.
greeting('coding');

// 정상적으로 작동한다.
greeting('coding', 'kim');

// 너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

만약 개발자가 전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의
값을 정해놓을 수도 있다. 이는 JavaScript에서의 default parameter와 같은 동작을 한다.

let greeting = (firstName: string, lastName: string ="kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

// 정상적으로 작동한다. 
greeting('coding');

// 정상적으로 작동한다.
greeting('coding', undefined);

// 너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

이때는 뒤의 인자로 undefined를 보내도 값은 “hello, coding kim”으로 반환된다.

혹은 선택적 매개변수를 원한다면 매개변수의 이름 끝에 물음표(?)를 붙임으로써 해결할 수도 있다.

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

// 정상적으로 작동한다.
greeting('coding');

// 정상적으로 작동한다.
greeting('coding', 'kim');

// 너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

그러나 이때는 greating('coding')과 같이 전달인자를
하나만 전달했기 때문에, 뒤의 매개변수는 undefined로 반환이 된다.

TypeScript의 연산자 활용 타입

---

TypeScript는 연산자를 이용해 타입을 정할 수 있다.

JavaScript에서도 보았던 ||(OR) 연산자나 && (AND)와 같은 연산자를 이용하여 만들 수 있다.

| 연산자를 이용한 타입을 유니온(Union) 타입이라고 하며,
& 연산자를 이용한 타입은 인터섹션(Intersection) 타입이라고 부른다.

유니온(Union) 타입

---

유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입이다.

| 연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미의 타입이다.

예를 들어, number | string은 숫자 또는 문자열 타입을 의미한다. 아래의 코드를 하나 보겠다.

function printValue(value: any): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

위의 코드는 value 매개변수의 타입을 any로 정의하고,
타입이 number인지 string인지에 따라 if-else 문으로 나누어 출력하고 있다.

그러나 any를 사용하는 것은 JavaScript로 작성하는 것과 큰 차이가 없기 때문에,
유니온 타입을 사용해 TypeScript의 이점을 살리면서 코딩하는 것이 좋다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

위의 printValue 함수는 숫자 또는 문자열 값을 입력받고 있다.

이때, 유니온 타입을 사용해 number | string 타입으로 지정하고 있다.

이후 입력된 값의 타입을 typeof 연산자를 사용하여 검사한 후,
해당 값이 숫자인 경우와 문자열인 경우 각각 다른 로그를 출력한다.

이처럼 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용하다.

유니온(Union) 타입의 장점

유니온 타입을 사용하면 타입을 추론할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다.

그러나 any 타입을 사용하면 타입을 추론할 수 없어, 자동완성 기능을 사용하기가 어렵다.

또한 코드의 가독성을 높일 수 있다.

let value: string | number | boolean;

이렇게 string | number | boolean 타입으로 선언된 변수는 문자열, 숫자, 불리언 타입 중
하나의 값을 가질 수 있다는 것이 명시적으로 표시되어 코드를 이해하기 쉽게 만들어 준다.

유니온(Union) 타입 사용 시 유의할 점

유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 한다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

이렇게 인터페이스를 사용하여 Developer와 Person을 정의했다.

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

그러나 실질적으로 askSomenone 함수 내부에서는 Developer와 Person이
갖고 있는 공통 프로퍼티인 name에만 접근할 수 있다.

왜냐하면 공통되고 보장된 프로퍼티만 제공해야 하기 때문이다.

만약 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야 한다.

---

💡 타입 가드(Type Guard)란?

TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나이다.

타입 가드는 특정 코드 블록에서 타입의 범위를 제한해
해당 코드 블록 안에서 타입 안정성을 보장해 준다.

---

아래 코드는 타입 가드를 사용해 작성된 코드이다.

function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

TypeScript에서는 in 연산자를 제공하고 있다.

in 연산자는 객체의 프로퍼티 이름과 함께 사용되며,
해당 프로퍼티가 객체 내에 존재하는지 여부를 검사한다.

인터섹션(Intersection) 타입

---

인터섹션(Intersection)은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법이다.

& 연산자를 사용하여 표현한다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

type User = Developer & Person;

이런 식으로 타입을 결합해 사용할 수 있다.

여기서 User 변수는 Developer, Person 각각에 정의된 속성 모두를 받게 된다.

여기서 type 은 추후 나올 타입 별칭에서 배우게 되므로,
지금은 인터섹션 타입을 어떻게 사용하는 지에 대해서만 집중하겠다.

이런 식으로 인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

위의 코드는 인터섹션 타입을 사용하여 Developer와 Person을 하나의 타입으로 묶었다.
따라서 askSomeone 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있다.

그러나 인터섹션 타입은 타입 가드는 필요 없는 반면 Developer와 Person이라는 새로운
교집합을 만들어 내는 것이기 때문에, 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야만 한다.

반대로 유니온 타입은 타입 가드를 해줘야 하지만 전달인자를 전달할 때 선택지가 생기게 된다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
	// 이런 식으로 프로퍼티에 접근할 수 있다.
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

// 유니온 타입은 전달인자를 전달할 때 선택지가 생긴다.
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});

function askSomeone2(someone: Developer & Person) {
	// 타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있다.
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

// 그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없다.
askSomeone2({name: '김코딩', skill: '웹 개발', age:20});

TypeScript의 열거형(Enum)

---

TypeScript의 열거형(Enum)은 특정 값의 집합을 정의할 때 사용된다.

JavaScript에서는 기본적으로 열거형을 지원하지 않지만,
TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다.

enum Color {
  Red,
  Green,
  Blue,
}

위 예제에서는 Color라는 열거형을 정의하고 있다. 열거형의 값은 Red, Green, Blue 세 개이다.

숫자형 열거형(Enum)

열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다.
디폴트 값으로 숫자형을 사용하며, 각 값은 자동으로 0부터 시작하여 1씩 증가한다.

그러나 다음과 같이 수동으로 값을 지정할 수도 있다.

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

위 예제에서는 Red가 1, Green이 2, Blue가 4로 정의되었다.

열거형의 값에 대해 산술 연산을 수행할 수도 있다.

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

let c: Color = Color.Green;
let greenValue: number = Color.Green;
let blueValue: number = Color.Blue;

console.log(c);          // 출력: 2
console.log(greenValue);  // 출력: 2
console.log(blueValue);   // 출력: 4

열거형은 일반적으로 상수값을 대신하여 사용되므로, 타입스크립트에서는 열거형이 많이 사용된다.
열거형은 코드를 더욱 가독성 높게 만들어주고, 오타와 같은 실수를 방지해준다.

문자형 열거형(Enum)

문자형 열거형은 앞에서 살펴본 숫자형 열거형과 개념적으로는 거의 비슷하다.
문자형 열거형은 열거형의 값을 전부 다 특정 문자 또는 다른 열거형 값으로 초기화해야 한다.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

위 코드는 Direction이라는 문자열 기반의 열거형(Enum)을 정의하고 있습니다.
Up, Down, Left, Right 각각에는 문자열 값이 할당되어 있다.

그리고 myDirection 변수를 Direction.Up으로 초기화하고 있다.
출력 결과로는 "UP"이 나오게 된다.

또한 문자형 열거형에는 숫자형 열거형과는 다르게 auto-incrementing이 없다.

대신 디버깅을 할 때 숫자형 열거형의 값은 가끔 불명확하게 나올 때가 있지만
문자형 열거형은 항상 명확한 값이 나와 읽기 편하다.

문자열 기반의 열거형은 주로 외부에서 가져온 값을 TypeScript에서 다루기 위해서 사용된다.

예를 들어, HTTP 요청 방식을 나타내는 열거형을 정의할 수 있다.

enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

function makeRequest(url: string, method: HttpMethod) {
  // ...
}

makeRequest("/api/data", HttpMethod.Post);

위 코드에서는 HTTP 요청 방식을 나타내는 HttpMethod 열거형을 정의하고 있다.
makeRequest 함수는 URL과 HTTP 요청 방식을 인자로 받습니다.
HTTP 요청 방식을 지정할 때는 HttpMethod.Post와 같이 열거형 값을 사용합니다.

이렇게 열거형을 사용하면 오타와 같은 실수를 방지할 수 있으며, 코드의 가독성과 안정성을 높일 수 있다.

역 매핑 (Reverse mappings)

역 매핑은 숫자형 열거형에만 존재하는 특징입니다.
열거형의 키(key)로 값(value)을 얻을 수 있고, 값(value)으로 키(key)를 얻을 수도 있다.

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

위와 같이 열거형의 키로 값을 얻을 수 있지만, 값으로도 열거형의 키를 얻을 수 있다.
이는 숫자형 열거형에만 존재하며, 문자형 열거형에서는 존재하지 않는 특징이다.

TypeScript의 인터페이스(Interface)

---

TypeScript에서 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용이 된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다. JavaScript는 인터페이스를 따로 지원하지 않지만, TypeScript는 인터페이스를 지원한다. TypeScript의 예약어인 interface를 사용하여 TypeScript 인터페이스를 생성할 수 있다.

💡 예약어(reserved word) : 컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어를 의미한다. 예를 들어 return, import, const, let 등이 있으며, 이런 단어들은 함수의 이름이나 변수의 이름으로 사용할 수 없다.

변수와 인터페이스

---

TypeScript에서 변수를 선언할 때 인터페이스를 아래와 같이 사용할 수 있다.
TypeScript에서 인터페이스는 객체(Object)의 구조를 정의하기 위해 주로 사용되는 예약어이다.

interface User {
	name: string;
	age: number;
}

// 정상적으로 선언된다.
const user: User = {
	name: "anna",
	age: 20
}

// 프로퍼티의 순서를 지키지 않아도 정상적으로 선언된다.
const user: User = {
	age: 20,
	name: "anna"
}

// 정의된 프로퍼티보다 적게 작성했기 때문에 에러가 난다.
const user: User = {
	name: "anna"
}

// 정의된 프로퍼티보다 많이 작성했기 때문에 에러가 난다.
const user: User = {
	name: "anna",
	age: 20,
	job: "developer"
}

위의 코드는 사용자 정보를 정의하기 위해 interface 예약어를 사용하여 User 인터페이스를 만들었다.
인터페이스를 만들 때 예약어를 작성하고, 인터페이스의 이름을 대문자로 작성한다.

이렇게 인터페이스의 이름을 대문자로 시작하는 것은 *네이밍 컨벤션이다.

💡 네이밍 컨벤션(Naming Convention) : 이름을 짓는 일종의 관례이다. TypeScript로 개발할 때 대부분의 개발자는 인터페이스의 이름을 대문자로 시작하도록 작성한다. 인터페이스는 객체의 타입을 정의하고, 객체가 대문자로 시작하는 것과 유사하기 때문에 일관성 있는 코드 작성을 위해 이러한 관례를 따르는 것이다.

인터페이스 내에는 name과 age가 정의되어 있기 때문에, User 인터페이스를 사용하여 변수를 선언할 때는 반드시 정의된 프로퍼티를 전부 작성해야 한다. 또한 interface로 정의된 속성만 지정할 수 있으며, 그 외 프로퍼티를 추가로 작성하고자 해도 인터페이스 내에 정의되어 있지 않기 때문에 추가로 프로퍼티를 더 작성하여 선언할 수 없다.

그러나 인터페이스 안의 모든 프로퍼티가 필요한 것은 아니며, 어떤 조건에서만 존재하거나
아예 없을 수도 있기 때문에 ? 연산자를 사용하여 선택적 프로퍼티를 작성할 수도 있다.

interface User {
	name: string;
	age?: number;
}

// 정상적으로 선언된다.
const user: User = {
	name: "anna"
}

함수와 인터페이스

---

인터페이스를 사용하여 객체의 프로퍼티 이름과 타입을 정의하고,
함수의 매개변수 타입과 반환 타입도 정의할 수 있다.

interface User {
	name: string;
	age: number;
	job: string;
}

interface Greeting {
	(user: User, greeting: string): string;
}

const greet: Greeting = (user, greeting) => {
	return `${greeting}, ${user.name}! Your job : ${user.job}.`;
}

const user: User = {
	name: "anna",
	age: 30,
	job: "developer"
};

const message = greet(user, "Hi");

console.log(message);

위의 코드는 User 인터페이스 외에도 Greeting 인터페이스를 추가로 작성하여 함수 타입을 정의했다.

Greeting 인터페이스는 User 타입과 문자열 타입을 매개변수로 받아 문자열 타입을 반환한다.

greet 함수는 Greeting을 사용하여 구현되었으며,
user 객체와 문자열 "hi"를 전달인자로 전달받아 문자열을 반환한다.

Greeting 인터페이스에서 이미 greet의 매개 변수인 user와 greeting의 타입과 반환 타입이 작성되어 있기 때문에, greet 함수는 string 타입을 반환한다고 명시하지 않아도 되며, 매개 변수의 타입 또한 작성하지 않아도 된다.

클래스와 인터페이스

---

클래스에서도 인터페이스를 사용할 수 있다. 클래스에서는 인터페이스를 아래와 같이 사용한다.

interface Calculator {
	add(x: number, y: number): number;
	substract(x: number, y: number): number;
}

class SimpleCalculator implements Calculator {
	add(x: number, y:number) {
		return x + y;
	}

	substract(x: number, y: number) {
		return x - y;
	}
}

const caculator = new SimpleCalculator();

console.log(caculator.add(4, 9)); //13
console.log(caculator.substract(10, 5)); //5

위의 코드에서 Calculator 인터페이스는 add와 substract 메서드를 정의하고 있고,
SimpleCaculator 클래스는 Calculator 인터페이스를 사용하여 작성되었다.

Caculator 인터페이스를 사용하고 있기 때문에 SimpleCaculator 클래스 내에는
Calculator 인터페이스 내에 정의된 두 메서드를 반드시 작성해야 한다.

인터페이스와 상속

---

JavaScript에서 클래스를 확장할 때 extends라는 키워드를 사용해
기존에 존재하던 클래스를 상속해 새로운 클래스를 정의할 수 있다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// Person 클래스를 extends 키워드를 사용해 상속하여 새로운 클래스인 Student를 정의했다.
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying hard for the grade ${this.grade}.`);
  }
}

이같이 인터페이스도 extends라는 키워드를 사용하여 기존에 존재하던 인터페이스를 상속해 확장이 가능하다.

이렇게 하면 기존에 존재하던 인터페이스의 프로퍼티를 다른 인터페이스에
복사하는 것을 가능하게 해 주며, 인터페이스의 재사용성을 높여준다.

interface Person {
    name: string;
    age: number;
}

interface Developer extends Person {
    language: string;
}

const person: Developer = {
    language: "TypeScript",
    age: 20,
    name: "Anna",
}

이렇게 기존에 존재하던 Person 인터페이스를 extends 키워드로 상속해 새로운 인터페이스인
Developer를 만들고, Developer 인터페이스를 사용하여 person이라는 객체를 구현했다.

Developer 인터페이스는 Person 인터페이스를 상속하고 있으므로,
Person 내부의 프로퍼티를 그대로 받아올 수 있다.

마찬가지로 여러 인터페이스를 상속받아 확장할 수도 있다.

해당 코드에서는 타입 단언(type assertion)을 사용하고 있으므로,
코드를 본 후 타입 단언에 대해서도 보도록 하겠다.

interface FoodStuff {
    name: string;
}

interface FoodAmount {
    amount: number;
}

interface FoodFreshness extends FoodStuff, FoodAmount {
	   isFreshed: boolean;
}

const food = {} as FoodFreshness;

food.name = "egg";
food.amount = 2;
food.isFreshed = true;

위의 코드에서 food 변수의 값으로 빈 객체를 할당하는 부분을 보겠다.

여기서 as라는 키워드를 이용하여 해당 값에 FoodFeshness라는 타입으로 정의하고 있는데,
이러한 문법을 타입 단언(type assertion) 이라고 한다.

타입 단언은 컴파일러에게 특정 타입 정보의 사용을 강제하게 함으로써,
컴파일러가 가진 정보를 무시하고 프로그래머가 원하는 임의의 타입을 값에 할당할 수 있다.

TypeScript의 타입 별칭(Type Aliases)

---

타입 별칭(Type Aliases)은 타입의 새로운 이름을 만드는 것이다.
이는 새로운 이름으로 기존의 타입을 참조하는 것을 의미한다.

타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 사용하여 작성한다.

간단한 예시를 보겠다.

type MyString = string;

let str1: string = 'hello!';

// string 타입처럼 사용할 수 있다.
let str2: MyString = 'hello world!';

원래 string이라는 타입이 존재하고 있었다. 이에 myString이라는 새로운 이름을 부여했다.

여기서 myString과 string은 동일한 의미를 갖게 된다.

즉, 타입을 정의할 수 있는 모든 곳에는 타입 별칭을 쓸 수 있다.

이런 방식으로 타입 별칭을 사용하면 코드를 더 간결하고 가독성 좋게 만들 수 있다.
또한 복잡한 타입을 간략하게 표현하고, 타입 정의를 재사용하는 등 가독성을 높일 수 있다.

아래의 예시를 보겠다.

type Person = {
  id: number;
  name: string;
  email: string;
}

// Commentary 인터페이스에서 Person 타입을 참조하고 있다.
interface Commentary {
  id: number;
  content: string;
  user: Person;
}

// 객체에서 Commentary 인터페이스를 참조하고 있다.
let comment1: Commentary = {
    id: 1,
    content: "뭐예요?",
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@codestates.com",
    },
}

// Commentary 인터페이스 내부에 content 프로퍼티가 존재하기 때문에 
// content 프로퍼티를 작성하지 않으면 컴파일 에러가 난다.
let kimcoding: Commentary = {
    id: 1,
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@codestates.com",
    },
};

// Person 타입 내부에 isDeveloper 프로퍼티가 존재하지 않기 때문에 
// isDeveloper 프로퍼티를 작성할 시 컴파일 에러가 난다.
let kimcoding: Commentary = {
    id: 1,
    content: "뭐예요?",
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@codestates.com",
        isDeveloper: true,
    },
};

이처럼 인터페이스나 다른 변수를 정의할 때 타입 별칭으로
정의한 타입을 참조하게 됨으로써 코드를 더 간결하고 가독성 좋게 만들 수 있다.

타입 별칭으로 만들어진 타입을 참조할 시에는
인터페이스와 마찬가지로 내부에 정의된 프로퍼티를 전부 참조해야만 한다.

또한 타입 별칭으로 만들어진 타입 내부에 정의된 프로퍼티 외에
다른 프로퍼티를 더 작성하게 되면 그 또한 컴파일 에러가 난다.

인터페이스 vs 타입 별칭

타입 별칭 또한 인터페이스와 같은 특징이 있기 때문에, 인터페이스의 역할을 타입 별칭이 수행할 수도 있다.

그러나 인터페이스와 타입 별칭에는 미묘한 차이점이 있다.

type Person = {
    name: string;
    age: number;
}

interface User {
    name: string;
    age: number;
}

let kimcoding: Person = {
    name: '김코딩',
    age: 30,
}

let coding: User = {
    name: '김코딩',
    age: 30,
}

위와 같이 코드들이 작성되어 있다.

작성하는 동안 정의한 타입이나 인터페이스 내부에 어떤 프로퍼티가 들어가 있는지 기억이 나지 않을 경우가 있다.

그래서 kimcoding이 참조하고 있는 Person 타입과, coding이
참조하고 있는 User 인터페이스에 각기 마우스를 올려놓아 보았다.

VSCode로 작성 시, kimcoding 객체가 참조하고 있는 Person에 마우스를 올리면 Person 내부에 어떤 프로퍼티들이 정의되어 있는지 보인다. 그러나 coding 객체가 참조하고 있는 User에 마우스를 올리면 User 내부에 어떤 프로퍼티들이 정의되어 있는지 보이지 않는다.

따라서 타입 별칭으로 정의한 타입으로 작성할 시에는 조금 더 편하게 코드를 작성할 수 있게된다.

또 이러한 차이점이 있다.

type Person = {
    name: string;
    age: number;
}

interface User {
    name: string;
    age: number;
}

// 에러가 발생한다.
type Students extends Person {
    className: string;  
}

// 정상적으로 동작한다.
interface Students extends User {
	 className: string;   
}

// 정상적으로 동작한다.
interface Students extends Person {
    className: string;  
}

타입 별칭은 말 그대로 타입에 새로운 이름을 부여하는 것에서 그치기 때문에 확장이 되지 않는다.

그러나 인터페이스는 확장이 가능하다.

인터페이스는 기존의 인터페이스 및 타입 별칭으로 만들어진 타입 둘 다 상속할 수 있기 때문에,
유연한 코드 작성을 위해서는 인터페이스로 만들어서 필요할 때마다 확장할 수 있다.

TypeScript의 타입 추론(Type Inference)

---

TypeScript는 정적타입을 지원하는 프로그래밍 언어이다.
정적타입 시스템을 사용하면 코드의 안정성을 높이고 디버깅을 용이하게 할 수 있다.

TypeScript는 타입 추론(Type Inference)이라는 기능을 통해 코드 작성을 도와준다.

타입 추론(Type Inference)의 기본

타입 추론(Type Inference)은 변수나 함수의 타입을 선언하지 않아도
TypeScript가 자동으로 유추하는 기능이다. 예를 들어, 다음과 같은 코드를 살펴보겠다.

let isNumber = 123;

이 코드에서는 변수 isNumber를 선언하고, 숫자 123을 할당했다.
이 경우, 타입스크립트는 isNumber의 타입을 자동으로 숫자(Number)로 추론한다.

최적 공통 타입 (Best common type)

TypeScript는 여러 표현식에서 타입 추론이 발생할 때, 해당 표현식의 타입을 사용하여 "최적 공통 타입"을 계산한다.
아래와 같은 코드가 있다고 가정해 보겠다.

let x = [0, 1, null];

위 예제의 x 타입을 추론하려면 각 배열 요소의 타입을 고려해야 한다.

여기서 배열의 타입으로 고를 수 있는 두 가지 후보가 있다: number와 null이다.
최적 공통 타입 알고리즘은 각 후보의 타입을 고려하여, 모든 후보의 타입을 포함할 수 있는 타입을 선택한다.

문맥상의 타이핑(Contextual Typing)

타입스크립트에서 타입을 추론하는 또 하나의 방식은 바로 문맥상으로 타입을 결정하는 것이다.
이 문맥상의 타이핑(타입 결정)은 코드의 위치(문맥)를 기준으로 일어난다. 다음과 같은 함수를 살펴보겠다.

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

add 함수는 두 개의 매개변수를 받아 더한 값을 반환한다.
하지만 매개변수의 타입이 명시되어 있지 않다.

이 경우, 타입스크립트는 매개변수 a와 b의 타입을 자동으로 추론한다.

만약 매개변수 a와 b가 모두 숫자(Number) 타입이라면,
add 함수의 반환 값도 숫자(Number) 타입으로 추론된다.

타입 추론의 장점

이런 타입 추론에는 몇 가지 장점이 있다.

1. 코드의 가독성 향상: 타입 추론을 사용하면 코드의 가독성이 향상된다. 명시적으로 타입을 지정하지 않아도 코드에서 변수의 타입을 알 수 있기 때문이다.
2. 개발 생산성 향상: 타입 추론을 사용하면 코드 작성 시간을 단축할 수 있다. 명시적으로 타입을 지정하지 않아도 TypeScript가 자동으로 타입을 추론하기 때문이다.
3. 오류 발견 용이성: 타입 추론을 사용하면 코드의 오류를 발견하는 것이 쉬워진다. TypeScript는 변수나 함수의 타입을 추론하여 타입 검사를 수행하기 때문이다.

타입 추론의 단점

그러나 타입 추론이 늘 좋은 것만은 아니다. 몇 가지 단점도 있다.

1. 타입 추론이 잘못될 경우 코드 오류 발생: 타입 추론은 TypeScript가 자동으로 수행하는 것이기 때문에, 추론이 잘못될 경우 코드 오류가 발생할 수 있다.
2. 명시적인 타입 지정이 필요한 경우가 있음: 타입 추론만으로는 부족한 경우가 있다. 특히, 복잡한 함수나 객체의 경우에는 명시적인 타입 지정이 필요할 수 있다.

따라서, 타입 추론은 TypeScript의 장점 중 하나이지만,
때에 따라 명시적인 타입 지정이 필요한 경우도 있다.

TypeScript의 클래스(Class)

---

JavaScript와 TypeScript 모두 객체 지향 프로그래밍을 지원하며, 클래스(class)를 사용하여 객체를 생성할 수 있다.

그러나 두 언어의 클래스는 몇 가지 차이점이 있다.

JavaScript에서의 클래스(Class)

---

JavaScript에서 클래스는 ES6(ECMAScript 2015)에서 처음 도입되었다.
클래스를 사용하면 객체를 생성하고 객체의 속성과 메서드를 정의할 수 있다.

예를 들어, 다음과 같은 JavaScript 클래스를 만들 수 있다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

위 코드에서 Person 클래스는 name과 age 속성을 가지고 greet() 메서드를 정의한다.

이 클래스를 사용하여 객체를 생성하려면 다음과 같이 할 수 있다.

const person = new Person('Alice', 30);
person.greet(); // "안녕하세요, 제 이름은 Alice이고, 30살 입니다."

TypeScript에서의 클래스(Class)

---

TypeScript의 클래스는 JavaScript의 클래스와 비슷하지만 몇 가지 추가된 기능이 있다.
예를 들어, TypeScript에서는 클래스의 속성과 메서드에 대한 타입을 명시할 수 있다.

다음은 TypeScript의 클래스 예시이다.

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

위 코드에서 name 속성과 age 속성은 문자열과 숫자 타입으로 정의되어 있다.

약간의 차이점은 TypeScript에서 클래스를 정의할 때, constructor를 이용하여
초기화하는 멤버들은 전부 상단에서 정의를 해줘야 한다는 것이다.

또한 contructor 내 인자로 받을 때도 정확히 타입을 명시해 줘야 한다.

const person = new Person('Alice', 30);
person.greet(); // "안녕하세요, 제 이름은 Alice이고, 30살 입니다."

TypeScript를 사용하여 객체를 생성할 때도 위와 같이 JavaScript와 비슷한 방식으로 할 수 있다.

클래스와 상속(Inheritance)

TypeScript의 클래스(class)는 인터페이스(interface)와 마찬가지로
기존에 존재하던 클래스를 상속받아 확장하여 새로운 클래스를 만들 수 있다.

이때도 extends 키워드를 사용하여 상속할 수 있다.

class Animal {
    move(distanceInMeters: number): void {
        console.log(`${distanceInMeters}m 이동했습니다.`);
    }
}

class Dog extends Animal {
    speak(): void {
        console.log("멍멍!");
    }
}

const dog = new Dog();
dog.move(10);
dog.speak();

위의 코드에서 Animal이라는 클래스를 Dog라는 클래스가 상속받고 있다.

Dog 클래스는 Animal 클래스로부터 프로퍼티와 메서드를 상속받으며,
Dog 클래스는 파생 클래스라고도 불리며, 하위클래스(subclasses)라고도 불린다.

여기서 Animal 클래스는 기초 클래스, 상위클래스(superclasses)라고 불린다.

public, private 키워드

기본적으로 클래스 내에 선언된 멤버는 외부로 공개되는 것이 디폴트 값이다.
그러나 공개된다고 명시적으로도 표시해 줄 수 있다. 이때 public 키워드를 사용하면 된다.

class Person {
  public name: string;
  public age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

혹은 외부에 드러내지 않을 멤버가 있다면 private 키워드로 명시해 주면 된다.

class Person {
  public name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

readonly 키워드

readonly 키워드를 사용하여 프로퍼티를 읽기 전용으로 만들 수 있다.
읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야 한다.

class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러

위의 코드는 name이 readonly로 명시되어 있기 때문에, 값을 변경할 수 없다.
이런 식으로 변경되면 안 될 값을 readonly로 명시하여 보호할 수 있다.

TypeScript의 제네릭(Generic)

---

타입스크립트의 제네릭(Generic)은 코드 재사용성을 높이고 타입 안정성을 보장하는 기능이다.

제네릭을 사용하면 함수나 클래스를 작성할 때, 사용될 데이터의 타입을 미리 지정하지 않고,
이후에 함수나 클래스를 호출할 때 인자로 전달된 데이터의 타입에 따라 자동으로 타입을 추론하게 된다.

아래와 같은 코드가 있다.

제네릭의 필요성

---

function printLog(text) {
	return text;
}

위의 printLog 함수는 파라미터로 text를 받고 있으며, 반환 값으로 text를 리턴하고 있다.
이를 제네릭 없이 구현한다면 아래와 같이 구현할 수 있을 것이다.

function printLog(text: string): string {
	return text;
}

printLog('hello'); // 정상
printLog(123); //에러

첫 번째 함수는 printLog 함수에 특정 타입을 주어 작성한 코드이다.
타입은 명시되었지만, string 타입 외에 다른 타입이 들어온다면 컴파일 에러가 날 것이다.

이를 해결하기 위해서 중복으로 함수를 선언하는 방법이 있을 것이다.

function printLog(text: string): string {
	return text;
}

function printLogNumber(text: number): number {
	return text;
}

printLog('hello'); // 정상
printLogNumber(123); //정상

그러나 이 방법은 타입의 가독성 및 유지보수성이 나빠진다.
타입을 다르게 받기 위해 같은 코드를 타입만 바꿔서 명시하는 것이기 때문이다.

또는 | 연산자를 이용해 유니온 타입으로 선언하는 방법이 있을 것이다.

function printLog(text: string | number) {
	return text;
}

printLog('hello'); // 정상
printLogNumber(123); //정상

이 방법은 들어가는 인수는 해결이 되지만, 함수 내에서 string과 number가 둘 다 접근할 수 있는 API만 제공한다.
이 외에는 타입이 정확히 추론되지 않기 때문에 사용할 수 없다.

이어 any 타입을 사용해 작성한 코드이다.

function printLog(text: any): any {
	return text;
}

이 방법은 어떤 타입이든 받을 수 있지만 실제로 함수가 반환할 때 어떤 타입인지 추론할 수 없게 된다.

따라서 제네릭을 사용하게 될 필요성이 생긴다.

제네릭

---

제네릭을 사용하면 이와 같이 작성할 수 있다.

function printLog<T>(text: T): T {
	return text;
}

printLog 함수에 T라는 타입 변수를 추가했다.

T는 유저가 준 파라미터의 타입을 캡처하고, 이 정보를 나중에 사용할 수 있게 한다.
여기에서는 T를 반환 타입으로 다시 사용한다.

따라서 파라미터와 반환 타입이 같은 타입을 사용하고 있는 것을 확인할 수 있다.

printLog 함수는 타입을 불문하고 동작하므로 제네릭이라 할 수 있다.

any를 쓰는 것과는 다르게 인수와 반환 타입에 string을 사용한
첫 번째 printLog 함수만큼 정확하다. 즉 타입을 추론할 수 있게 된다.

이렇게 제네릭을 작성하고 나면 아래와 같이 작성할 수 있다.

const str = printLog<string>('hello');

여기서 함수를 호출할 때의 인수 중 하나로써 T를 string 타입으로
명시해 주고 타입 주변을 <>로 감싸주었다.

혹은 타입 추론 기능을 활용해서 작성할 수 있다.

const str = printLog('hello');

이는 타입 추론 기능을 활용해 작성한 코드이다.
전달하는 인수에 따라 컴파일러가 자동으로 T의 값을 정하는 방법이다.

이는 타입이 복잡해져 컴파일러가 타입을 유추할 수 없게 되는 경우에는 사용할 수 없는 방법이다.

인터페이스와 제네릭

---

인터페이스에도 제네릭을 사용할 수 있다.

interface Item<T> {
	name: T;
	stock: number;
	selected: boolean;
}

이와 같이 작성하면 Item 인터페이스를 사용하여 만든 객체는 name의 값으로 어떤 타입이
들어갈지만 작성을 해주면 인터페이스를 여러 개 만들지 않고도 재사용을 할 수 있게 된다.

const obj: Item<string> = { 
	name: "T-shirts",
	stock: 2, 
	selected: false
};

const obj: Item<number> = { 
	name: 2044512,
	stock: 2, 
	selected: false
};

이런 식으로 여러 개의 객체를 만들어 낼 수 있게 된다.

클래스와 제네릭

---

제네릭을 사용하는 TypeScript에서 팩토리를 생성할 때 생성자 함수로 클래스 타입을 참조해야 한다.

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

이것은 GenericNumber 클래스의 문자 그대로 사용하지만 number 타입만 쓰도록 제한하는 것은 없다.
대신 string이나 훨씬 복잡한 객체를 사용할 수 있다.

제네릭 타입 변수

---

제네릭을 사용하기 시작하면, printLog와 같은 제네릭 함수를 만들 때,
컴파일러가 함수 본문에 제네릭 타입화된 매개변수를 쓰도록 강요한다.

앞서 본 printLog 함수를 예시로 보겠다.

function printLog<T>(text: T): T {
	console.log(text.length);
	return text;
}

위와 같이 console.log(text.length);를 작성하게 되면 컴파일 에러가 난다.

왜냐하면 개발자가 string 타입이 아닌 number 타입을 보낼 수도 있기 때문에,
T에는 .length가 있다는 것을 추론할 수 없기 때문이다.

이때는 제네릭에 타입을 줘서 유연하게 함수의 타입을 정의해 줄 수 있다.

function printLog<T>(text: T[]): T[] {
	console.log(text.length);
	return text;
}

이 제네릭 함수 코드는 일단 T라는 변수 타입을 받고, 인자 값으로는 배열 형태의 T를 받는다.
따라서 제네릭 타입이 배열이기 때문에, .length를 허용하게 된다.

혹은 다음과 같이 조금 더 명시적으로 작성이 가능하다.

function printLog<T>(text: Array<T>): Array<T> {
	console.log(text.length);
	return text;
}

제네릭 제약 조건

---

앞서 제네릭 타입 변수 외에도 제네릭 함수에 어느 정도 어떤 타입이 들어올 것인지 힌트를 줄 수 있다.

다시 앞서 본 printLog 함수를 예시로 보겠다.

function printLog<T>(text: T): T {
	console.log(text.length);
	return text;
}

인자의 타입에 선언한 T는 아직 어떤 타입인지 구체적으로 정의하지 않았기 때문에 length 코드에서 오류가 난다.

이럴 때 만약 해당 타입을 정의하지 않고도 length 속성 정도는 허용하려면 아래와 같이 작성한다.

interface TextLength {
	length: number;
}

function printLog<T extends TextLength>(text: T): T {
	console.log(text.length);
	return text;
}

이와 같이 extends 지시자를 이용해 작성하게 되면 타입에 대한
강제는 아니지만 length에 대해 동작하는 인자만 넘겨받을 수 있게 된다.

혹은 keyof를 이용해서 제약을 줄 수도 있다.

interface Item<T> {
	name: T;
	stock: number;
	selected: boolean;
}

function printLog<T extends keyof Item>(text: T): T {
	return text;
}

printLog('name'); //정상
pirntLog('key'); //에러

제네릭을 선언할 때 <T extends keyof Item> 부분에서 첫 번째 인자로
받는 객체에 없는 속성들은 접근할 수 없게끔 제한할 수 있다.

💬 Sprint Review

---

이번 과제는 이번 유닛에서 튜토리얼로 실습했던 대로 JavaScript 언어로 만들어진 React App의 환경을 TypeScript 언어를 사용할 수 있도록 환경을 구성해 보고, JavaScript 언어로 작성된 컴포넌트들을 TypeScript 언어로 변환하는 과정을 페어와 함께 해결하게 됩니다.

실제 실무에서는 존재하는 프로젝트의 환경을 변경해 보고,
기존에 작성되어 있던 언어를 다른 언어로 바꾸는 과정은 종종 있습니다.

🔥 Bare Minimum Requirements

---

지금까지 배운 내용을 모두 종합하여 JavaScript 환경에서 작성된, React App을 TypeScript 환경에서 리팩토링한다.

TypeScript 언어를 사용할 수 있도록 환경 구성하기

• npm을 통해 TypeScript 환경을 구성하기 위해 필요한 라이브러리를 받습니다.
• 프로젝트의 루트에 tsconfig.json 파일을 생성한 뒤, compilerOptions, include, exclude 등의 옵션을 이용하여 TypeScript 언어를 사용할 수 있도록 환경을 구성합니다.
  
  

상세 컴포넌트 구현하기

• 현재 컴포넌트는

  • index.js
  • App.js
  • Todo.js
  • TodoForm.js 가 있습니다.

  이들의 이름을

  • index.tsx
  • App.tsx
  • Todo.tsx
  • TodoForm.tsx 로 변경하고 TypeScript 언어로 변환해 봅니다.
  
  
  

💬 Review

---