타입스크립트 데이터 타입과 추론, 타입 명시, 인터페이스, 열거형

데이터 타입과 추론

타입 추론(type inference) 기능

- ts는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단 가능함

- ts는 컴파일러가 토기에 할당된 값을 바탕으로 변수의 타입 추로

- 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만, 타입을 명시적으로 지정하는 것이 더 명확함

- 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋음

 

데이터 타입의 종류

- 크게 기본 데이터 타입, 객체 타입, 특수 타입

- 기본 데이터 타입 : number, string, boolean, null(의도적 지정), undefined(할당되지 않은 변수)

- 객체 타입 : object, array, tuple(각 요소가 다른 타입을 가질 수 있는 배열)

- 특수 타입 : any, unknown

 

 

타입 명시

: 변수 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정

let x : string

 

- 변수, 함수의 매개변수, 리턴 타입(리턴 값이 없는 경우엔 void)

 

타입 지정 방법

- 변수 선언 시 데이터 타입을 지정

- ts를 js로 컴파일할 때 데이터 타입에 다른 값이 할당되면 오류를 발생시켜 개발자에게 알려줌

 

 

인터페이스

: 객체를 타입으로 지정할 때 간결하게 표현하기 위함

=> 사용자가 정의한 타입

-인터페이스는 구현의 개념

 

let stdId: number = 1111;
let stdName: string = "lee";
let age: number = 20;
let gender: string = "male";
let course: string = "typescript";
let completed: boolean = false;

interface Student {
  stdId: number;
  stdName: string;
  age: number;
  gender: string;
  course: string;
  completed: boolean;
}

function getInfo(id: number): Student {
  return {
    stdId: id,
    stdName: "kim",
    age: 20,
    gender: "female",
    course: "js",
    completed: true,
  };
}

console.log(getInfo(5678));

 

위 코드의 문제

: 반환 시 모든 속성들을 넣어야 됨

ex ) age를 빼고 반환하고 싶은 경우에도 age는 필수

 

=> 옵셔널 (?) 넣기

let stdId: number = 1111;
let stdName: string = "lee";
let age: number = 20;
let gender: string = "male";
let course: string = "typescript";
let completed: boolean = false;

interface Student {
  stdId: number;
  stdName: string;
  age?: number;			//옵셔널
  gender: string;
  course: string;
  completed: boolean;
}

function getInfo(id: number): Student {
  return {
    stdId: id,
    stdName: "kim",
    gender: "female",
    course: "js",
    completed: true,
  };
}

console.log(getInfo(5678));

 

인터페이스 요약

- 인터페이스는 데이터 타입으로 사용 가능

- 선택적 프로퍼티로 지정하려면 ?(옵셔널) 를 붙여줌

- 메소드도 인터페이스 내에서 선언 가능 (메소드 오버라이딩)

- 인터페이스를 클래스에 상속 가능 (implement/ 기능 확장이 아닌 구현)

 

 

열거형

: 사용자 정의 타입

//열거형 : 사용자 정의 타입
enum GenderType {
  Male,
  Female,
  GenderNeutral,
}

interface Student {
  stdId: number;
  stdName?: string;
  age?: number;
  gender?: GenderType;
  course?: string;
  completed?: boolean;
  setName: (name: string) => void;
}