230602 타입스크립트 사용해보기

230602 타입스크립트 사용해보기

자유롭게 형 변환이 가능한 자바스크립트는 복잡한 코드 속에서 예기치 못한 오류를 발생시킬 수 있다.
타입스크립트는 컴파일 시점에서 미리 타입 에러를 확인함으로써 에러를 줄일 수 있다.

타입스크립트 단일 타입 정의

[type 변수명 = 타입] 을 통해 변수에 단일 타입을 지정할 수 있다.

| 를 사용하여 여러 값 또는 타입을 OR 처럼 가질 수도 있다.

type 변수 = 타입

type Name = string;
type Email = string;
type Room = number;
type Address = string;
type ContactInformation = string;
type DateOfBirth = string;
type Grade = 1 | 2 | 3 | 4 | 5 | 6;
type Gender = 'M' | 'W';
type Roles = 'Citizen' | 'Student' | 'Teacher';

 

인터페이스 정의

인터페이스는 여러 변수에 대해 타입을 선언할 수 있다.

interface 인터페이스명 {
  변수명:변수타입
}

interface User {
  id: number;
  name: Name;
  email: Email;
  gender: Gender;
  createdAt: number;
  updatedAt: number;
  role: Roles;
  address: Address;
  contactInformation: ContactInformation;
  dateOfBirth: DateOfBirth;
}

 

인터페이스 상속

extends를 통해 클래스처럼 인터페이스를 상속하여 사용할 수 있다.

interface 인터페이스이름 extends 상속할인터페이스이름 { }

interface SchoolMember extends User {
  isAuthenticated: boolean;
}

export interface Citizen extends User {
  job: string;
}

export interface Student extends SchoolMember {
  room: Room;
  grade: Grade;
  isFreshman: boolean;
  isGraduated: boolean;
}

export interface Teacher extends SchoolMember {
  yearsOfExperience: number;
  qualifications: string[];
  subject: string;
}

 

함수 인터페이스 정의

함수를 인터페이스로 정의할 때는 괄호() 안에 인자에 대한 타입을 정의하고 : 후에 반환 값의 타입을 정의한다.

export interface CreateTeacher {
  (인자1:타입,인자2:타입) : 반환타입;
}

export interface CreateTeacher {
  (
    teacherName: Name,
    email:Email, 
    gender:Gender,
    yearsOfExperience: number,
    qualifications?:string[],
    subject?:string,
    address?: Address,
    contactInformation?: ContactInformation,
    dateOfBirth?: DateOfBirth
  ): Teacher;
}

 

함수에 인터페이스를 사용할 때는 화살표 함수 표현식에서 변수 명 뒤에  :타입 을 지정한다.

const 함수명:함수인터페이스 = () => {}

const createTeacher: allTypes.CreateTeacher
= (
  teacherName,
  email, 
  gender,
  yearsOfExperience,
  qualifications=[],
  subject='',
  address='',
  contactInformation='',
  dateOfBirth=''
  ) => {
  const {value} =counter.next();
  const time = new Date().getTime();
  const newTeacher: allTypes.Teacher = {
    id: value,
    email: email,
    gender: gender,
    name: teacherName,
    createdAt: time,
    updatedAt: time,
    role: 'Teacher',
    isAuthenticated: false,
    yearsOfExperience: yearsOfExperience,
    qualifications: qualifications,
    subject,
    address,
    contactInformation,
    dateOfBirth
  }

  return newTeacher;
}