타입스크립트란?

TypeScript는 선택적 정적 타이핑, 클래스, 인터페이스 및 기타 기능을 언어에 추가하는 JavaScript의 상위 집합입니다. 대규모 JavaScript 응용 프로그램을 보다 쉽게 개발하고 유지 관리할 수 있도록 설계되었습니다

타입스크립트 사용방법

1. TypeScript 설치
   TypeScript를 사용하려면 TypeScript 컴파일러를 설치해야 합니다. Node.js 패키지 관리자인 npm을 사용하여 이 작업을 수행할 수 있습니다. 명령 프롬프트 또는 터미널 창을 열고 다음 명령을 입력합니다.

npm install -g typescript

그러면 시스템에 최신 버전의 TypeScript가 전체적으로 설치됩니다.

2. 개발 환경 설정
   TypeScript 코드를 작성하려면 TypeScript를 지원하는 코드 편집기가 필요합니다. 인기 있는 옵션으로는 Visual Studio Code, Sublime Text 및 WebStorm이 있습니다. 코드 편집기를 설치하고 나면 확장자가 .ts인 새 TypeScript 파일을 만들 수 있습니다.

3. TypeScript 코드 작성
   TypeScript 코드는 JavaScript 코드와 비슷해 보이지만 유형 및 인터페이스를 정의하기 위한 추가 구문이 있습니다. 예를 들어 다음은 두 개의 숫자를 더하는 간단한 TypeScript 함수입니다.

Copy code
function addNumbers(x: number, y: number): number {
  return x + y;
}

이 예에서는 x 및 y가 숫자임을 지정하기 위해 number 데이터 유형을 사용하고 : number 구문을 사용하여 함수가 숫자를 반환하도록 지정합니다.

4. TypeScript 코드 컴파일
   TypeScript 코드를 JavaScript로 변환하려면 TypeScript 컴파일러를 사용하여 컴파일해야 합니다. 다음 명령을 실행하여 이를 수행할 수 있습니다.

tsc myfile.ts

이렇게 하면 TypeScript 파일과 이름이 같지만 확장자가 .js인 새 JavaScript 파일이 생성됩니다. 그런 다음 Node.js를 사용하여 이 JavaScript 파일을 실행하거나 다른 JavaScript 파일처럼 HTML 페이지에 포함할 수 있습니다.

전반적으로 TypeScript 사용에는 TypeScript 컴파일러 설치, 개발 환경 설정, TypeScript 코드 작성 및 JavaScript로 컴파일이 포함됩니다. 선택적 정적 타이핑 및 기타 기능을 JavaScript에 추가함으로써 TypeScript는 더 확장 가능하고 유지 관리 가능한 코드를 작성하는 데 도움을 줄 수 있습니다.

타입스크립트 기본 자료형

TypeScript에는 다음을 포함하여 JavaScript와 유사한 몇 가지 기본 데이터 유형이 있습니다.

1. Number - 정수 및 부동 소수점 숫자를 포함한 숫자 값에 사용됩니다.
   예: let age: number = 25;

2. String - 텍스트 값에 사용됩니다.
   예: let name: string = "John";

3. Boolean - 참/거짓 값에 사용됩니다.
   예: let isStudent: boolean = true;

4. Null - null 또는 존재하지 않는 값을 나타내는 데 사용됩니다.
   예: let myVar: null = null;

5. Undefined - 선언되었지만 값이 할당되지 않은 변수를 나타내는 데 사용됩니다.
   예: let myVar: 정의되지 않음 = 정의되지 않음;

6. Symbol - 개체 및 속성에 대한 고유 식별자를 만드는 데 사용됩니다.
   예: const mySymbol = Symbol();

7. Object - 배열, 함수 및 개체를 포함하여 복잡한 데이터 구조를 나타내는 데 사용됩니다.
   예: let myObj: Object = { 이름: "John", 나이: 25 };

8. never - 절대 발생하지 않는 값이다. 예를 들면 항상 오류를 발생시키는 함수에 사용할 수 있다.

9. void - 자료형 없음을 정의한다. 반환하는 값이 없는 함수에 사용할 수 있다.

이러한 기본 데이터 유형 외에도 TypeScript는 두 가지 특수 유형의 배열도 지원합니다.

1. 배열 - 단일 데이터 유형의 배열에 사용됩니다.
   예: let numbers: number[] = [1, 2, 3, 4, 5];
2. 튜플 - 각 요소가 다른 데이터 유형을 가질 수 있는 요소 수가 고정된 배열에 사용됩니다.
   예: let myTuple: [String, Number] = ["John", 25];

인터페이스와 클래스

TypeScript에서 클래스와 인터페이스는 객체 지향 방식으로 복잡한 데이터 구조와 동작을 정의하고 모델링하는 데 사용되는 두 가지 별개의 구조입니다.

class Car {
  private model: string;
  private year: number;

  constructor(model: string, year: number) {
    this.model = model;
    this.year = year;
  }

  public getDetails() {
    return `${this.model} (${this.year})`;
  }
}

const myCar = new Car("Tesla Model S", 2022);
console.log(myCar.getDetails()); // Output: "Tesla Model S (2022)"

인터페이스는 종종 함수에 매개변수로 전달되거나 함수에서 값으로 반환되는 객체의 모양을 설명하는 데 사용됩니다. 또한 개체가 특정 구조를 준수하도록 하여 응용 프로그램의 여러 부분에서 일관성을 유지하는 데 도움이 됩니다.

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

function getFullName(person: Person) {
  return `${person.firstName} ${person.lastName}`;
}

const john = { firstName: "John", lastName: "Doe", age: 30 };
console.log(getFullName(john)); // Output: "John Doe"

유니언 자료형과 인터섹션 자료형

유니언 자료형은 A or B 형태로 타입을 지정할 수 있습니다. 인터섹션 자료형의 경우 여러 자료형을 결합해서 사용할 수 있습니다.

let myVariable: string | number;
myVariable = "hello"; // valid
myVariable = 123; // valid
myVariable = true; // invalid, boolean not allowed

interface Employee {
  name: string;
  age: number;
  department: string;
}

interface Manager {
  name: string;
  age: number;
  department: string;
  numberOfEmployeesManaged: number;
}

type ManagerEmployee = Employee & Manager;

const john: ManagerEmployee = {
  name: "John",
  age: 35,
  department: "Sales",
  numberOfEmployeesManaged: 10
};