2024.01.29(월)

📘타입스크립트란?

자바스크립트 확장판 ⇒ 자바스크립트 + 타입체크

• 자바스크립트
  • 변수에 할당되는 값에 따라 변수의 타입이 결정되는 동적 타입 언어
  • 런타임 시간에 변수의 타입이 결정됨
• 타입스크립트
  • 변수 선언 시 변수에 할당할 수 있는 데이터 타입을 사전에 선언하는 정적 타입 언어
  • 컴파일 시간에 변수의 타입이 결정됨
• 환경설정
  • 확장 프로그램 설치: Prettier 및 ESLint 설정하기
  • Node.js 설치 후 typescript 설치: npm install -g typescript
• 간단한 사용법
  • terminal에서 tsc filename.ts로 컴파일 (tsc는 typescript compiler의 약자)
  • tsc --init → tsconfig.json 생성
  • tsc -w filename.ts로 파일이 변경될 때마다 자동으로 compile 진행 (w는 watchdog의 약자)

🤔데이터 타입과 추론

• 타입 추론(Type Inference) 기능
  • 타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론

    let age = 30;    // age의 변수 타입을 자동으로 number로 추론

  • 타입 추론 기능에 의존하기보다는 타입을 명시적으로 지정하는 것이 더 좋음 (특히 타입 추론이 모호하거나 복잡한 로직에서)
• 타입스크립트에서 지원하는 데이터 타입
  • 기본 데이터 타입 number, string, boolean, null, undefined
    
  • 객체 타입
    • object: 객체를 나타내는 타입
    • array: 동일한 타입의 요소를 가진 배열을 나타내는 타입
    • tuple: 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입
  • 특수 타입
    • any: 어떠한 타입이든 할당될 수 있는 타입
    • unknown: 타입을 미리 알 수 없는 경우 사용되는 타입

📝타입 명시

• 변수 선언 시 데이터 타입을 지정
• 타입스크립트를 자바스크립트로 컴파일할 때 데이터 타입에 다른 값이 할당되면 오류를 발생시킴 (컴파일 에러)

  let age: number = 20;
  age = '30'; // error TS2322: Type 'string' is not assignable to type 'number'.

• 예시

  // 변수의 데이터 타입 명시
  let age: number = 20;
  let myName: string = "hwang";
  let course: string = "typescript";
  let completed: boolean = false;
  
  // 함수의 데이터 타입 명시(매개변수, 반환형)
  function plus(a: number, b: number): number {
      return a + b;
  }
  
  // 반환 값이 없을 때
  function hello(): void {
      console.log("hello");
  }
  
  // 문자열 또는 문자열 array
  function getLength(obj: string | string[]): number {
      return obj.length;
  }
  
  // 객체 구조 명시
  function getInfo(id: number): {
      age: number;
      myName: string;
      course: string;
      completed: boolean;
  } {
      // do something
      return null;
  }

📜인터페이스

👉 사용자 정의 데이터 타입

• 선택적 프로퍼티로 지정하려면 속성값 뒤에 ? 붙이기
• 메소드도 인터페이스 내에서 선언 가능
• 인터페이스를 클래스에 상속 가능
  • 메소드 오버라이딩(method overriding)을 해주어야 함
  • extends가 아니라 implements
• 간단한 인터페이스 예시

  interface Student {
      age: number;
      myName: string;
      gender: string;
      course: string;
      completed?: boolean;    // ?를 붙이면 optional property
  }
  
  function getInfo(id?: number): Student {
      return {
          age: 20,
          myName: "hwang",
  		    gender = "male";
          course: "typescript",
          completed: false
      };
  }
  
  function setInfo(student: Student): void {
      console.log(student);
  }

• method와 class 상속 예시

  interface Student {
      age: number;
      myName: string;
      gender: string;
      course: string;
      completed?: boolean;
      // 함수, 즉 method도 정의 가능
      // setName(name: string): void;
      setName: (name: string) => void;
      getName: () => string;
  }
  
  class MyStudent implements Student {
      age = 23;
      myName = "do0ori";
      gender = "female";
      course = "Full Stack";
  		completed = false;
      // method overriding
      setName(name: string): void {
          this.myName = name;
          console.log(`이름 설정: ${this.myName}`);
      }
      getName(): string {
          console.log(`학생 이름: ${this.myName}`);
          return this.myName;
      }
  }
  
  const myInstance = new MyStudent();
  myInstance.getName();   // 학생 이름: do0ori
  myInstance.setName("JaeKyung"); // 이름 설정: JaeKyung
  myInstance.getName();   // 학생 이름: JaeKyung

🏷️열거형

👉 사용자 정의 데이터 타입

• 예시

  enum GenderType {
      Male,   // default로 0부터 시작
      Female
  }
  
  interface Student {
      age: number;
      myName: string;
      gender: GenderType; // enum에서 정의한 타입 사용
      course: string,
      completed?: boolean;
      setName: (name: string) => void;
      getName: () => string;
  }
  
  class MyStudent implements Student {
      age = 23;
      myName = "do0ori";
      gender = GenderType.Female; // enum member 사용
      course = "Full Stack";
      // method overriding
      setName(name: string): void {
          this.myName = name;
          console.log(`이름 설정: ${this.myName}`);
      }
      getName(): string {
          console.log(`학생 이름: ${this.myName}`);
          return this.myName;
      }
  }

• enum의 멤버 값 지정
  • 숫자를 명시하면 그 다음 멤버의 값은 바로 앞 멤버의 값보다 1만큼 증가되며 정의됨

    enum GenderType {
        Male = 2,   // 2
        Female      // 3
    }

  • 그 외의 값을 명시할 수 있음 → 이 경우 모든 멤버에 초깃값을 써주어야 함

    enum GenderType {
        Male = "male",
        Female = "female"
    }