웹 풀사이클 데브코스 TIL 48일차

타입스크립트

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

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

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

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

타입스크립트란?

타입스크립트 = 자바스크립트 + 타입체크
타입스크립트 환경에 자바스크립트를 코딩하면 동작한다.
반대로 자바스크립트 환경에서 타입스크립트는 동작하지 않는다.
데이터 타입체크를 통해 변수의 데이터 타입을 명확하게 지정하여 안정성을 높여준다.

function plus(a : number, b: number) {
    return a + b;
}

console.log(plus(3,5));

console.log(plus('3','5')); // 컴파일 오류

타입스크립트는 객체지향적 특성을 지원한다. 타입스크립트는 컴파일을 해서 자바스크립트 코드로 바꿔주어야한다.

환경설정

IDE는 vscode를 사용한다. 몇가지 extension을 설치한다.

먼저 prettier이다. 코드를 보기좋게 해준다.

다음은 ESLint 이다. 코드를 검사하고 잠재적인 문제들을 경고해준다.

ts 코드 실행

ts 코드를 컴파일하려면 tsc 라는 명령어를 사용한다. 이렇게 하면 같은 이름의 js 파일이 생성된다.

tsc app.ts

타입스크립트를 위한 설정파일이 필요한데 이를 위해서는 위 명령어를 쳐준다. 그렇게 하면 tsconfig.json 이라는 파일이 생성된다.

tsc --init

ts 파일이 수정될 때마다 매번 컴파일 해주는것은 귀찮은 일이다. 따라서 파일이 수정될 때마다 자동으로 컴파일을 실행하는 명령어가 있다.

tsc -w app.ts

-w 는 watch의 약자이다.

정적 타입과 추론

let myname = 'lee';
myname = 1;
//error TS2322: Type 'number' is not assignable to type 'string'.

위 코드는 타입스크립트 컴파일시 에러가 난다. 처음 변수에 'lee'가 할당될 때 타입을 추론해서 이 변수는 string 타입라고 지정 해두기 때문이다. 이를 타입추론 이라고 한다. 타입스크립트는 타입추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있다. 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다. 이는 코드를 짧게 작성할 수 있도록 도와주지만 타입을 명시적으로 지정해주는 것이 더 좋다. 타입추론이 모호한 경우나 복잡한 로직에서는 타입을 제대로 명시해 주는 것이 좋다.

타입스크립트의 데이터 타입

기본 데이터 타입

• number: 숫자 타입, 정수와 실수를 포함
• string: 문자열 타입
• boolean : 참, 거짓 불리언 타입
• null : 값이 없음을 나타내는 타입. 의도적으로 값이 할당되지 않았을 때 사용. 널포인터(주소 값이 없다)와 같다.
• undefined: 값이 할당되지 않은 변수의 기본값. return 이 되지 않았을 경우 등에 사용

객체 타입

• object: 객체를 나타내는 타입
• array: 동일한 타입의 요소를 가진 배열을 나타내는 타입. 배열은 Array라는 객체를 사용한다.
• tuple: 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입

특수 타입

• any: 어떤 타입이든 할당될 수 있음
• unknown : 타입을 미리 알 수 없는 경우 사용되는 타입

타입 명시

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

let x: string = "나는 문자열이다.";

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

타입을 미리 지정하고 다른 타입의 값을 넣으면 컴파일 에러가 난다.
함수에서도 타입을 지정해 줄 수 있다.

함수 타입지정

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

function vd(a : number, b : number) : void{
   console.log("아무것도 리턴하지 않는 함수");
}

매개변수와 리턴값에 타입을 지정해 줄 수 있고 만약 아무것도 리턴하지 않는 함수의 경우 void로 설정해 주면 된다.
이번에는 리턴타입을 특정 형태로 해줬으면 좋겠을때의 코드이다

function getInfo(id : number) : {
    stdId : number;
    stdName : string;
    age : number;
    gender : string;
    course : string;
    complete : 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
    };
}

Student 인터페이스를 선언하고 타입으로 설정해주었다.
? 를 붙이면 선택적 프로퍼티이다. 이렇게 하면 있어도 그만 없어도 그만이기 때문에 age 프로퍼티가 리턴값에 없어도 에러가 나지 않는다.
선택적 매개변수도 있다.

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

b 매개변수는 매개변수로 넣어도 되고 안넣어도 된다는 뜻이다.

객체 생성 전달

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

let std = {
    stdId : 1234,
    stdName : 'kim',
    age : 25,
    gender : 'male',
    course : 'node.js',
    completed : true
}
setInfo(std);

매개변수로 전달할 때 변수로 객체를 생성해서 전달하면 더 깔끔하게 표현가능하다.

메소드

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

맴버변수 말고도 메소드도 선언할 수 있다. 일반적으로 함수를 선언할 수도 있고 화살표 함수를 사용할 수도 있다.

인터페이스 구현 객체

인터페이스를 구현한 객체를 만들 수도 있다.

class MyStudent implements Student{
    stdId = 1234;
    stdName = 'kim';
    age = 25;
    gender = 'male';
    course = 'node.js';
    completed = true;

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

인터페이스에 정의된 메소드들을 구현해 주어야 한다. 코드의 윗부분 인터페이스의 getName은 주석처리하였다.

열거형

gender 의 경우 male과 female만 있는데 타입은 string으로 되어있다. 이런경우에는 다른 문자열이 들어갈 수 있기 때문에 안정적이지 않다. 이런경우에 열거형을 사용해 값에 제한을 둘 수 있다.

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

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

class MyStudent implements Student{
    stdId = 1234;
    stdName = 'kim';
    age = 25;
    gender = GenderType.Male;
    course = 'node.js';
    completed = true;

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

GenderType 이라는 열거형을 선언해주고 그에 맞게 인터페이스와 클래스들을 변경해주었다. 이때 js 변환된 코드를 보면 Male에 0, Female에 1이 할당된 것을 알 수 있다. ts에서 자동적으로 할당해 준 것이다. 만약 이렇게 숫자로 하지 않고 문자로 하고 싶다면 직접 열거형 선언에 Male = 'male' 등과 같은 형태로 지정해 줄 수 있다.

후기

타입스크립트가 어떤것인지에 대해 학습하고 타입스크립트의 환경설정과 타입지정, 인터페이스 등에 대해 학습하였다.
키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프