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

객체 리터럴

특정 값만을 나타내는 타입 중 하나

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

gneder는 male 또는 female 둘 중 하나만 허용하고 다른 string이 들어오면 오류가 난다.

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

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

이 클래스는 Student 인터페이스를 구현한 인터페이스이기 때문에 그냥 'male' 이라고만 하면 오류가 나고 타입을 다시한번 지정해 주어야 한다.
이외에도 숫자, 불리언 등등 다양한 리터럴이 있다.

let speed: 50 | 100 | 200;
speed = 100; //유효
speed = 150; // 에러

let isTrue : true;
isTrue = true; // 유효
isTrue = false; // 에러

let person : {name: 'John', age : 30};
person = {name: 'John', age : 30}; //유효
person = {name: 'Alice', age : 25}; //에러

type CardinalDirection = 'North' | 'East' | 'South' | 'West';
let direction : CardinalDirection;
direction = 'North'; // 유효
direction = 'Northeast'; // 에러

리터럴 타입을 사용하면 좋은점

• 코드의 가독성이 높아진다.
• 잘못된 값이 들어오는 것을 방지할 수 있다.

객체 타입 지정

const user : {name : string, age : number}= {
    name : 'John',
    age : 25
}

프로퍼티의 타입을 미리 지정하면 데이터 타입에 맞게 값이 들어갔는지 확인할 수 있다.

Any

let anyVal : any= 100;
anyVal = 'kim';

any 타입은 어떤 타입이든 가능하다는 뜻이다. 과연 이런 방식이 좋은 것인가? 그렇지 않다. 타입스크립트에 최대한 많은 정보를 제공해야 오류를 효과적으로 잡아준다. 따라서 any 타입은 되도록 피하는게 좋다.

유니온

공용체. 제한된 타입을 동시에 지정하고 싶을 때 사용한다.

let anyVal : number | string;

여러개 타입을 동시에 지정할 수 있다. number 나 string 타입 중 아무 타입이나 올 수 있다.

let anyVal : number | string = 100;
anyVal = 'kim';

위 코드도 유니온을 적용하면 오류가 나지 않는다.

타입 별칭

유니온 number | string을 하나의 타입으로 만들어서 사용할 수 있다.

type strOrNum = number | string;
let numStr : strOrNum = '100';

typeof

typeof 연산자는 변수의 타입을 알려준다. 유니온을 사용할 때는 이런 typeof 를 사용해서 타입가드를 해주어야한다.

type strOrNum = number | string;
let numStr : strOrNum = '100';
let item : number;

function convertToString(val : strOrNum) : string {

    if(typeof val === 'string') {
        item = 0;
    } else {
        item = val;
    }
    return String(val);
}

item 변수는 number 타입만 올 수 있지만 val에는 string과 number 둘다 올 수 있다. 따라서 typeof를 사용해 val의 타입이 number 일 경우만 item 에 대입해주도록 하였다. 이렇게 하지 않으면 컴파일 단계에서 오류가 난다.

Array

타입스크립트에서 배열의 선언은 다음과 같다.

let numbers : number[] = [1,2,3,4,5];
let fruits : string[] = ['apple', 'banana', 'orange'];

배열을 유니온 타입으로 선언할 수도 있다.

let mixedArray : (number | string)[] = [1, 'two', 3, 'four'];

읽기 전용 array 라는 것도 있다.

let readOnlyArray : ReadonlyArray<number> = [1,2,3];

Tuple

튜블과 일반 배열의 다른점은 타입의 순서가 정해져 있다는 것이다. 또한 길이가 고정적이다.

//튜들 : 타입의 순서가 정해져 있다.
let greeting: [number, string, boolean] = [1, 'hello', true];

for(let i =0; i<greeting.length; i++) {
    console.log(greeting[i]);
}

Spread 연산자

... 으로 표시한다. 이 연산자의 역할은 배열의 괄호를 벗겨주는 역할을 한다. 사용예시는 다음과 같다.

let firstArray = [1,2,3];
let secondArray = [4,5,6];

let combineArray = [...firstArray, ...secondArray]
console.log(combineArray);
//[ 1, 2, 3, 4, 5, 6 ]

Spread 연산자로 괄호를 해제 해주고 다시 하나로 묶어서 변수에 담았다.

클래스와 객체

클래스(설계도, 생산틀)는 객체의 뼈대, 객체는 클래스의 실체이다.

class Employee {
    empName : string;
    age : number;
    empJob : string;

    printEmp = () : void => {
        console.log(`${this.empName}의 나이는 ${this.age}이고, 직업은 ${this.empJob}입니다.`);
    };
}

let employee1 = new Employee();
employee1.empName = 'kim';
employee1.age = 20;
employee1.empJob = '개발자';

employee1.printEmp();

클래스를 생성하고 객체 인스턴스를 생성한후 사용하는 예제 코드이다.

생성자

타입스크립트에서는 생성자를 constructor 라는 메소드를 통해 제공된다.

    constructor(empName : string, age : number, empJob : string){
        this.empName = empName;
        this.age = age;
        this.empJob = empJob;
    }

이 생성자를 통해 객체를 생성하는 코드는 다음과 같다.

let employee1 = new Employee('kim', 20, '개발자');

생성자의 매개변수를 선택적 매개변수로 만들 수도 있다.

    constructor(empName : string, age? : number, empJob? : string){
        this.empName = empName;
        this.age = age;
        this.empJob = empJob;
    }

단 선택적 매개변수의 뒤에 오는 매개변수는 모두 선택적 매개변수로 선언해주어야한다. 왜냐하면 중간에 선택적 매개변수가 있으면 컴파일러에서 어떤 매개변수에 값을 넣어야할지 파악할 수 없기 때문이다.

접근지정자

타입스크립트에서는 접근지정자를 쓰지 않으면 디폴트가 public으로 설정된다.

    private _empName : string;
    private _age : number;
    private _empJob : string;

멤버변수는 캡슐화를 위해 private로 설정해 준다. private 이름 앞에는 _(언더바)를 붙이는 관습이 있다.

getter setter

맴버변수에 접근하기 위해 get set 키워드를 이용해 getter 와 setter를 만들어 줄 수 있다.

 //get set
    get empName(){
        return this._empName;
    }
    set empName(val : string){
        this._empName = val;
    }

실제 접근은 프로퍼티 접근법 처럼 하면 된다.

employee1.empName = 'lee'

생성자 간소화

현재 클래스 코드는 맴버변수 생성 부분에 불필요한 중복이 많다. 이를 축약할 수 있다.

class Employee {
    constructor(
        private _empName : string,
        private _age : number,
        private _empJob : string
        ){

    }

}

생성자의 파라미터는 암묵적으로 클래스의 맴버변수로 선언이 된다. 그와 동시에 전달인자로도 사용되고 있다. 프로퍼티값이 자동으로 할당이 되고 초기화 까지 되는 것이다.

후기

객체 리터럴, 타입지정, 배열, spread 연산자, 클래스와 객체에 대해 공부하였다.
키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프