1. [TypeScript] 기본 문법 소개와 type

TypeScript

• TypeScript는 정적 타입을 지원하는 프로그래밍 언어로서, 자바스크립트의 상위 집합(superset)입니다. 마이크로소프트에서 개발한 오픈소스 언어로, JavaScript 코드를 TypeScript로 변환하여 사용할 수 있습니다. TypeScript는 JavaScript의 기능을 모두 포함하면서 타입 시스템과 몇 가지 새로운 기능을 추가하여 개발자들이 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있도록 돕습니다.
• 사용이유
  개발자의 의도와 다르게 실행되거나, JavaScript 특성상 컴파일을 하기전에 오류를 잡지 못하기 때문에(JS는 컴파일 후에 오류가 발생 했음을 알려주는 Runtime 오류만 나옴) TypeScript를 사용하여 Type을 정해주고 오류를 컴파일 전에 미리 방지하고, 의도대로 실행될 수 있도록 소스를 작성함
• TypeScript 작성 사이트: https://www.typescriptlang.org/ko/

JavaScript With Syntax For Types.

---

Javascript 와의 차이점

1. 정적 타입 시스템
   
   • JavaScript: JavaScript는 동적 타입 언어입니다. 변수의 타입을 선언하지 않아도 됩니다. 이는 자유롭고 유연한 코딩을 가능하게 하지만, 런타임 시 타입 관련 오류가 발생할 수 있습니다.
   • TypeScript: TypeScript는 정적 타입 언어로서 변수의 타입을 명시적으로 지정해야 합니다. 이로 인해 컴파일 시점에서 타입 오류를 확인하고 더 안정적인 코드를 작성할 수 있습니다.
2. 컴파일 단계
   • JavaScript: 자바스크립트 코드는 특정 브라우저나 런타임 환경에서 직접 실행됩니다.
   • TypeScript: TypeScript 코드는 먼저 JavaScript 코드로 변환되어야 합니다. TypeScript 컴파일러(tsc)를 사용하여 JavaScript 코드로 변환됩니다.
3. 타입 어노테이션
   • JavaScript: 타입 어노테이션을 사용하지 않습니다.
   • TypeScript: 변수, 함수 매개변수, 반환값 등에 타입 어노테이션을 추가하여 명시적으로 타입을 지정할 수 있습니다.
4. 인터페이스와 타입 
   • JavaScript: 인터페이스와 타입을 직접 지원하지 않습니다.
   • TypeScript: 인터페이스와 타입을 사용하여 객체의 구조를 정의하고 타입을 명시할 수 있습니다.
5. 제네릭(Generics) 
   • JavaScript: 제네릭을 지원하지 않습니다.
   • TypeScript: 제네릭을 사용하여 코드의 재사용성을 높이고 일반화된 타입을 처리할 수 있습니다.
     
     
6. 코드 도구 지원 
   • JavaScript: 자바스크립트는 타입 정보가 부족하기 때문에 개발 도구에서 타입 관련 기능을 제한적으로 지원합니다.
   • TypeScript: 정적 타입 정보를 가지고 있기 때문에 개발 도구에서 타입 체크, 자동 완성 등 더 많은 기능을 제공합니다.
7. ECMAScript 버전 지원
   • JavaScript: 다양한 ECMAScript 버전(ES5, ES6+ 등)을 지원합니다.
   • TypeScript: 기본적으로 최신 ECMAScript 버전을 따르며, 타겟 버전 설정을 통해 하위 버전 호환도 가능합니다.

---

type

TypeScript에서 type은 타입을 정의하는 데 사용되는 키워드로서, 기존의 타입을 조합하거나 새로운 타입을 만들 수 있게 해주는 기능을 제공합니다. type을 사용하여 타입을 정의하면 코드를 더 가독성 있게 만들고 유지보수하기 쉽게 할 수 있습니다

 

//타입 별칭 (Type Alias): type 키워드를 사용하여 타입 별칭을 만들 수 있습니다. 
//타입 별칭은 기존 타입에 다른 이름을 붙여서 사용하는 것을 말합니다.
type Age = number;
type Name = string;

//객체 타입 정의: type을 사용하여 객체의 구조를 정의할 수 있습니다.
type Person = {
  name: string;
  age: number;
};

//유니온 타입 (Union Type): type을 사용하여 여러 타입을 하나로 결합하는 유니온 타입을 정의할 수 있습니다.
type Status = "online" | "offline";

//제네릭 (Generics): type을 사용하여 제네릭 타입을 정의할 수 있습니다. 
//이를 통해 타입의 재사용성을 높이고, 더 유연한 타입을 정의할 수 있습니다.
type Pair<T> = {
  first: T;
  second: T;
};

//계산된 프로퍼티 (Computed Property): type을 사용하여 타입의 프로퍼티를 동적으로 계산할 수 있습니다.
type Prefix = "Mr." | "Mrs.";

type FullName = {
  [K in Prefix]: string;
};

//타입 인터섹션 (Intersection): type을 사용하여 여러 타입을 조합하여 새로운 타입을 만들 수 있습니다.
type Human = {
  name: string;
  age: number;
};

type Employee = {
  jobTitle: string;
  salary: number;
};

type EmployeeInfo = Human & Employee;

---

예시.

// Player 인터페이스
type Name = string;
type Age =number;
type Player = {
  name: Name;
  age?: Age;
  score?: number;
  isOnline: boolean;
}

// 플레이어 정보를 출력하는 함수
function displayPlayerInfo(player: Player) {
  console.log(`이름: ${player.name}`);
  console.log(`나이: ${player.age}`);
  console.log(`점수: ${player.score}`);
  console.log(`온라인 상태: ${player.isOnline ? "온라인" : "오프라인"}`);
}

// 플레이어 정보를 수정하는 함수
function updatePlayerScore(player: Player, newScore: number) {
  player.score = newScore;
}

// 플레이어 정보를 수정하고, 수정된 플레이어 객체를 리턴하는 함수
function updatePlayerScore2(player: Player, newScore: number): Player {
  const updatedPlayer: Player = { ...player, score: newScore };
  return updatedPlayer;
}

// 예시 플레이어 객체
const player1: Player = {
  name: "이강인",
  age: 25,
  score: 1000,
  isOnline: true,
};

const player2: Player = {
  name: "손흥민",
  age: 28,
  score: 850,
  isOnline: false,
};

// 초기 플레이어 정보 출력
console.log("플레이어 1 정보:");
displayPlayerInfo(player1);

console.log("\n플레이어 2 정보:");
displayPlayerInfo(player2);

// 플레이어 정보 수정 후 출력
updatePlayerScore(player1, 1200);
updatePlayerScore(player2, 950);

console.log("\n플레이어 1 정보 (수정 후):");
displayPlayerInfo(player1);

console.log("\n플레이어 2 정보 (수정 후):");
displayPlayerInfo(player2);

const updatedPlayer = updatePlayerScore2(player1, 1200);
console.log("\n플레이어 1 정보 (수정 후):");
displayPlayerInfo(updatedPlayer);

console 출력값

플레이어 1 정보:
이름: 이강인
나이: 25
점수: 1000
온라인 상태: 온라인

플레이어 2 정보:
이름: 손흥민
나이: 28
점수: 850
온라인 상태: 오프라인

플레이어 1 정보 (수정 후):
이름: 이강인
나이: 25
점수: 1200
온라인 상태: 온라인

플레이어 2 정보 (수정 후):
이름: 손흥민
나이: 28
점수: 950
온라인 상태: 오프라인

플레이어 1 정보 (수정 후):
이름: 홍길동
나이: 25
점수: 1200
온라인 상태: 온라인