기술 습관/Javascript

[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 11-2

타입스크립트

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

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

타입스크립트 장점

JS 기반보다 버그를 줄일 수 있다
유지보수가 쉽다
강력한 높은 퀄리티의 코드 생산 가능

타입 스크립트란

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

// JS
function plus(a,b) {
    return a+b;
}
console.log(plus(3,5));

// TS
function plus(a : number,b : number) {
    return a+b;
}
console.log(plus(3,5));

데이터 타입을 표기시 좋은 점

컴파일 타임시 오류 체크

타입 스크립트를 자바스크립트로 컴파일하는 과정 필요

환경 설정

VSCode 설치 후 타입스크립트 설치Typescript 설치 및 컴파일 방법npm i -g typescript 전역 설치
tsc 명령어 사용
tsc [파일이름] 입력시 컴파일 진행 -> 동일한 이름의 js파일이 생성됨
매번 실행하기 귀찮지 않나.
- tsc -w : watch. 해당 파일이 변화하는지 계속 감시하며 수정될 때마다 자동으로 컴파일되도록 설정
- eg) tsc -w app.tsTypescript의 설정 초기값을 세팅해보자tsc --init : ts파일의 기본 설정값들이 설치된다 (tsconfig.json)

데이터타입과 추론

데이터타입의 종류

기본 데이터타입 / 객체타입 / 특수타입
기본 데이터타입
- number : 숫자 타입. 정수와 실수 모두 포함
- string : 문자열 타입
- boolean : 참 거짓
- null : 값이 없음을 나타내는 타입(참조하는 메모리 주소값이 없음을 의미. 능동적)
- undefined : 값이 할당되지 않는 변수의 기본값인 타입(수동적. 아무값도 리턴하지 않을 경우 undefined가 리턴됨. C의 return 0와 동일)
객체 타입
- object : 객체
- array : 동일한 타입의 요소를 가진 배열을 나타내는 타입(객체로 지원)
- tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입 (잘 안씀)
특수 타입
- any : 어떠한 타입이든 할당될 수 있는 타입 (JS의 var와 비슷. 모호할 경우에 임시로 쓰이게 됨)
- unknown : 타입을 미리 알 수 없는 경우 사용되는 타입. any와 비슷

타입스크립트 타입 명시

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

let x:string = '나는 문자열이다.';
// int x 정의방식과 유사

정의 시 데이터타입과 다른 타입이 재정의될 경우 Syntax 에러 발생

// TS
function plus(a : number,b : number):number { // 함수의 리턴값 데이터타입 명시 가능
    return a+b; // 리턴값이 number이게 됨
}
console.log(plus(3,5));

// 더 복잡한 값 반환 디테일하게 설정
function getInfo(id: number) : {
    stdId : number;
    stdName : string;
    age: number;
    gender: string;
    course: string;
    completed: boolean;
}
{
    return null;
}

인터페이스

인터페이스로 getInfo 좀 더 간단하게 코드 리팩토링하기

interface Student {
    stdId : number;
    stdName? : string;
    age?: number;  // 선택적 프로퍼티
    gender?: string;
    course?: string;
    completed?: boolean;
    // setName(name: string) : void; 아래와 동일
    setName? : (name: string) => void;
    getName? : () => string;
}

function getInfo(id: number) : Student {
    return {
        stdId : id;
        stdName : 'eom';
        age: 20;
        gender: 'female';
        course: 'typescript';
        completed: false;
    };
}

console.log(getInfo(5678));

function plus(a : number,b? : number):number { //b가 선택적 매개변수
    return a+b; 
}

function setInfo(student : Student) : void { // 인터페이스 재사용
    console.log(student);
}
let std = {
    stdId : 93,
    stdName : 'eom',
    age: 20,
    gender: 'female',
    course: 'typescript',
    completed: false
};
setInfo(std);

// 인터페이스 클래스로 상속
class MyStudent implements Student {
    stdId = 93;
    stdName = 'eom';
    age= 20;
    gender= 'female';
    course= 'typescript';
    completed= false;

    setName(name: string) :void {
        this.stdName = name;
        console.log('이름 설정 : ' + this.stdName);
    }
}
const myInstance = new MyStudent();
myInstance.setName('앨리스');

타입스크립트 인터페이스

인터페이스는 string이나 number타입처럼 데이터 타입으로 사용 가능
선택적 프로퍼티로 지정하려면 속성값 뒤 ? 붙이기
메서드도 인터페이스 내에서 선언 가능
인터페이스를 클래스에 상속 가능

열거형

interface Student {
    stdId : number;
    stdName? : string;
    age?: number;  // 선택적 프로퍼티
    // gender?: string; // Female Male 두가지밖에 없음. 
    // 값을 보장하기 위한 방법 1. 열거형(enum)으로 제한 두기
    gender? : enum;
    course?: string;
    completed?: boolean;
    // setName(name: string) : void; 아래와 동일
    setName? : (name: string) => void;
    getName? : () => string;
}
// 열거형 : 사용자 정의 타입
enum GenderType {
    Male,
    Female
}

class MyStudent implements Student {
    stdId = 93;
    stdName = 'eom';
    age= 20;
    gender= GenderType.Female; // string이 아닌 enum으로 받도록 변경
    course= 'typescript';
    completed= false;

    setName(name: string) :void {
        this.stdName = name;
        console.log('이름 설정 : ' + this.stdName);
    }
}