1110 타입스크립트 정의 및 사용 이유, 인터페이스 정의와 구현, 열거형 타입

언어/Typescript

1110 타입스크립트 정의 및 사용 이유, 인터페이스 정의와 구현, 열거형 타입

thinktank911 2025. 11. 10. 14:08

타입스크립트란

타입스크립트는 왜 필요한가

자바스크립트 코드가 너무 지저분하다
코드의 스케일이 커지면서 코드 관리가 되지 않는다.

타입스크립트를 사용하면 좋은 점

자바스크립트 기반보다 버그를 줄일 수 있다.
유지보수가 쉽다
강력한 높은 퀄리티의 코드를 생산할 수 있다.

필요 대상

자바스크립트 개발자
버그 위험을 낮추고 싶은 개발자

선행 학습

숫자, 문자열, 배열, 객체, 함수 데이터 타입
변수, 객체지향철학, 동적메모리의 동작 원리

타입스크립트 = 자바스크립트 + 타입 체크

타입스크립트 환경에 자바스크립트를 코딩하면 동작함
자바스크립트 환경에 타입스크립트를 코딩하면 동작안함

데이터타입을 표기하면 좋은 점

컴파일 타임 시 오류 체크

환경설정

extensions 설치

Prettier - Code formatter : 가독성을 위해 들여쓰기가 제대로 안 된 경우 한번에 맞춰주는 포매터
ESLint : JS 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구. 코딩 컨벤션에 위배되는 코드, 문법적인 오류나 안티 패턴을 찾아줌.
[Deprecated] Bracket Pair Colorizer 2 : Bracket Pair Colorizer는 여는 괄호와 닫는 괄호를 같은 색으로 꾸며줘, 코드 블록 시작과 끝이 어딘지를 쉽게 파악할 수 있도록 도와주는 VSCode의 서드파티 익스텐션
➡️ 현재는 vscode에 내장되어 있어 불필요

npm install -g typescript
➡️ 타입스크립트를 자바스크립트로 변환해주는 컴파일러를 설치함
➡️ tsc 명령어로 실행 가능

컴파일 실행 명령어

tsc app.ts : 'app.ts' 파일을 자바스크립트로 컴파일
tsc -w(watch의 약자) : 지켜보고 있겠다. 코드가 수정되면 자동컴파일
➡️ tsc -w app.ts
node app.js : 코드 실행
➡️ 새 cmd 창에서 파일 수정 후 실행하기
tsc --init : tsconfig.json 만들기

데이터 타입과 추론

데이터타입의 중요성

자바스크립트 변수에는 어떤 데이터타입의 값도 할당될 수 있다.
- let name = 'lee'에서
- let name = 1을 실수로 변경 가능
  ➡️ 자바스크립트는 이런 문제를 사전에 막지 못한다.

타입추론(Type Inferemce) 기능

타입 추론 기능 통해 변수 타입을 자동 판단
컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입 추론
타입추론은 코드를 간결하게 작성할 수 있도록 도와주지만 타입을 명시적으로 지정하는 것이 더 명확
타입추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋다.
오브젝트 형태 - 타입추론의 형태로

데이터타입 종류

기본 데이터타입, 객체 타입, 특수타입으로 분류
기본데이터타입
- number
- string
- boolean
- null : 의도적으로 값이 없음 나타내는 타입(널 포인터)
- undefined : 의도치않게 값이 할당되지 않는 변수의 기본값인 타입
객체 타입
- object : 객체 나타냄
- array : 동일한 타입의 요소를 가진 배열을 나타냄
- tuple : 각 요소가 다른 타입을 가질 수 있는 배열 나타냄 (파이썬에서의 튜플은 읽기 전용)
특수 타입
- any : 어떤 타입이든 할당될 수 있는 타입 (임시타입)
- unknown : 타입을 미리 알 수 없는 경우 사용되는 타입

타입 명시

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

let x : string = '나는 문자열';

변수에 데이터타입 지정 방법

변수 선언 시 데이터타입 지정
컴파일 시 데이터타입에 다른 값이 할당되면 오류 발생시켜 알려줌
코드의 품질을 높이기 위한 하나의 수단

변수에 지정한 타입으로 값이 할당이 안되면 컴파일에러(컴파일 타임에 나타나는 에러) 발생
➡️ syntax 에러

함수에 데이터타입 지정 방법

매개변수와 함수 리턴타입을 지정할 수 있다.
리턴 타입이 없는 함수의 경우 void로 지정한다.

// 함수의 데이터타입 명시(매개변수, 리턴타입)
function Plus(a : number, b : number) : number{
    return a + b;
}

// 리턴 안하는 경우 void
function Plus(a : number, b : number) : void{
    // return a + b;
}

인터페이스

객체를 타입으로 지정

function getInfo(id : number) : {
  // 자체가 타입이 됨
  stdId : number;
  stdName : string;
  age : number;
  gender : string;
  course : string;
  completed : Boolean;
}
{
  return null;
}

복잡해보이는 객체 타입 지정을 간단히할 때 인터페이스 사용

// 인터페이스 타입 생성
interface Student{
  stdId : number;
  stdName : string;
  age : number;
  gender : string;
  course : string;
  completed : Boolean;
}

function getInfo(id : number) : Student
{
    return {
        stdId : id,
        stdName : 'lee',
        age : 20,
        gender : 'female',
        course : 'javascript',
        completed : true
    };
}

console.log(getInfo(5678));

선택적 프로퍼티 : 인터페이스 정의할 때 ? 기호 쓰면 프로퍼티를 옵션으로 받을 수 있다.

// 인터페이스 타입 생성
interface Student{
    stdId : number;
    stdName : string;
    age? : number; // 선택적 프로퍼티
    gender : string;
    course : string;
    completed : Boolean;
}

선택적 매개변수 : 함수의 매개변수도 옵션으로 받을 수 있다.

function Plus(a : number, b? : number) : void{
	// return a + b;
}

setInfo 함수 생성하기

// 객체생성 - new 가 생략
let std = {
    stdId : 91011,
    stdName : 'park',
    age : 30,
    gender : 'male',
    course : 'node.js',
    completed : true
}

function setInfo(student : Student) : void{
	console.log(student);
}

setInfo(std);

타입스크립트 함수 화살표 함수로 변경

setName(name : string) : void;
setName : (name : string) => void;

인터페이스를 클래스에 상속하기

// 인터페이스 클래스에 상속하기
class MyStudent implements Student{
    stdId = 91011;
    stdName = 'park';
    age = 30;
    gender = 'male';
    course = 'node.js';
    completed = true;
    // setName 오버라이딩
    setName(name: string) : void{
        this.stdName = name;
        console.log('이름 설정 : ' + this.stdName);
    }
}

const myInstance = new MyStudent();
myInstance.setName('앨리스');

인터페이스 타입은 자바스크립트로 컴파일 시 사라짐
➡️ 인터페이스는 타입스크립트에게 더 많은 정보 제공 위해 존재함

요약

인터페이스는 데이터타입으로 사용 가능
선택적 프로퍼티로 지정하려면 속성값 뒤에 ?를 붙여준다.
메소드도 인터페이스 내에서 선언 가능 ➡️ 반드시 메소드 오버라이딩 필요
인터페이스를 클래스에 상속할 수 있다. ➡️ extends 아닌 구현의 의미의 implements

열거형

gender 같은 값에 제한 줄 수 있음

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

// 인터페이스 타입 생성
interface Student{
    stdId : number;
    stdName? : string;
    age? : number; // 선택적 프로퍼티
    gender? : GenderType;

enum은 자바스크립트에 구현되고 있음
타입스크립트가 열거형의 프로퍼티에 자동으로 숫자 할당함 ➡️ 숫자 열거형

// 열거형 : 사용자 정의 타입
var GenderType;
(function (GenderType) {
GenderType[GenderType["Male"] = 0] = "Male";
GenderType[GenderType["Female"] = 1] = "Female";
})(GenderType || (GenderType = {}));

문자열 열거형

자동 할당 기능은 없지만 코드를 좀 더 읽기 쉽게 한다는 장점 있음

// 타입스크립트
enum GenderType {
    Male = 'male',
    Female = 'female'
}

// 자바스크립트 변환
var GenderType;
(function (GenderType) {
GenderType["Male"] = "male";
GenderType["Female"] = "female";
})(GenderType || (GenderType = {}));