[typesript] 땅콩코딩 타입스크립트 강좌 - 2

Any / Union Type, Type Aliases, Type Guards

Any 타입

어떠한 타입이든 변수에 할당될 수 있다.

let value : any = 5;
value = 'hello';
value = 'true';

하지만, 타입스크립트는 타입에 대한 정보를 명시할수록 개발자의 의도를 더 명확하게 기술할 수 있으며,
타입에러를 컴파일 시 잡아낼 수 있으므로 any 타입은 최대한 피하는게 좋다.

쓰는 경우의 예
third party library에서 동적 컨텐츠를 가져온 때, 프로그램 작성시 변수 타입을 알 수 없어 지정할 수 없는 상황

 

Union 타입

제한된 타입들을 동시에 지정하고 싶을 때 사용

let value : [타입] | [타입];

두 타입 중 아무 타입이 할당 될 수 있게 한다.

let price: number | string = 5;
price = 'free';
price = true; // Type 'boolean' is not assignable to type 'string | number'

 

같은 조합이 계속 반복된다면, 유지보수 할 수 있는 방법은?

let total: number;
let orderId : number | string;

const calculate = (price:number | string, qty: number):void =>{
};

const findOrderId = (customer:{costomerId: number|string, name:string}, prodId:number|string): number|string =>{
    return orderId;
};

 

Type Aliases

코드를 타입으로 지정하고 재활용

type [이름] = [타입] | [타입];

type StrOrNum = number | string;

let total: number;
let orderId : StrOrNum;

const calculate = (price:StrOrNum, qty: number):void =>{
};

const findOrderId = (customer:{costomerId: StrOrNum, name:string}, prodId:StrOrNum): StrOrNum =>{
    return orderId;
};

 

price 매개변수가 number 도 가능하고 string 도 가능하기에 나타난 에러이다.
만약 price 가 string 타입을 가진다면 itemPrice 에 할당되지 못 하기 때문이다. 

type StrOrNum = number | string;
let itemPrice: number;

const setItemPrice = (price:StrOrNum):void =>{
    itemPrice = price;
};

setItemPrice(50); 
//error
// Type 'StrOrNum' is not assignable to type 'number'.
// Type 'string' is not assignable to type 'number'.

 

Type Guards : 타입 가드

해결 => Type of Operator + 조건문을 사용하여 코드 검증을 수행한다.

const setItemPrice = (price:StrOrNum):void =>{
    if(typeof price === 'string'){
        itemPrice = 0;
    } else{
        itemPrice = price;
    }
};

 

Function 작성 방법

함수의 반환 (return)

// void 타입 : 아무것도 반환하지 않는 함수의 반환값으로만 사용
function sendGreeting(msg, name):void {
    console.log(`${msg}, ${name}`);
}

sendGreeting('Hello', 'Mark');

// string 타입
function sendGreeting(msg, name):string {
    return 'Hello, Mark';
}

// 배열 타입
function sendGreeting(msg, name):string[] {
    return ['Hello, Mark'];
}

 

Optional Parameter : 선택적 매개변수 

함수에 정의된 모든 매개변수가 함수에 필요하다고 가정되기 때문에,
매개변수와 arguments를 비교 검사 하여 수가 일치해야 한다.

function sendGreeting(msg:string, name:string):void {
    console.log(`${msg}, ${name}`);
}

sendGreeting('Hello', 'Mark');

sendGreeting('Hello', 1); // error : Argument of type 'number' is not assignable to parameter of type 'string'.

sendGreeting('Hello'); //error : An argument for 'name' was not provided.

 

 

해결 : 선태적 매개변수를 사용.
선택적 매개변수는 반드시 필수 매개변수 뒤에 위치해야 한다.

function sendGreeting(msg:string, name?:string):void{
    console.log(`${msg}, ${name}`);
};

sendGreeting('Hello');

 

Default Parameter : 매개변수의 기본값

할당된 기본값을 출력하게 하며, 선택적 매개변수 와 타입 명시도 필요하지 않다.
지정한 타입을 지우는 이유는 타입스크립트가  타입추론으로 string 타입이 되는 것을 알 수 있기 때문이다.

function sendGreeting(msg:string, name = 'there'):void{
    console.log(`${msg}, ${name}`);
};

sendGreeting('Hello');

 

두 매개변수가 전부 default 를 가지고 있다면?

function sendGreeting(msg = 'Hello', name = 'there'):void{
    console.log(`${msg}, ${name}`);
};

sendGreeting();
sendGreeting('Good');
sendGreeting('Good', 'Mark');

 

Arrow Function : 화살표 함수 

단순하고 간결한 문법으로 만들 수 있으며, 아래와 같이 한 줄인 경우 {} 생략 가능하다. 

const sendGreeting = (msg = 'Hello', name = 'there'):void => {
    console.log(`${msg}, ${name}`);
}

const sendGreeting = (msg = 'Hello', name = 'there'):void => console.log(`${msg}, ${name}`);

 

객체 지향 프로그래밍

연관된 변수와 함수들을 한 덩어리로 묶어 구조화하여 표현하는 프로그래밍
어플리케이션을 실제 세상에 존재하는 객체와 같은 단위로 쪼개고 객체들이 서로 상호작용 함으로써 시스템이 동작하는 것

Class - Object

객체는 클래스를 통해 만들어질 수 있으며, 클래스는 객체의 뼈대, 설계도, 생산틀이다.

가장 유명한 예제로는 붕어빵 = 객체 // 붕어빵 틀 = 클래스 가 있다.

 

class

class [이름: 대문자로 시작]{
    변수 이름 : [타입]
}

 

예제

let fullName:string;
let age:number;
let job:string;

let eployeeInfo = (fullName:string, job:string):void => {
    console.log(`${fullName}의 직업은 ${job} 입니다.`);
};

 

클래스 내에서는 this 키워드를 통해 접근 할 수 있다.

 

class Employee{
    fullName:string;
    age:number;
    job:string;

    employeeInfo = ():void => {
        console.log(`${this.fullName}의 직업은 ${this.job} 입니다.`)
    }
}

 

클래스 내 정의된 함수는 클래스 내 정의된 변수들에게 접근 가능하다.
때문에, 클래스 내에 정의되지 않은 함수들보다 적은 매개변수를 가지게 된다. 

클래스 내 정의된 함수 - method: 메소드 / 클래스 내 정의된 변수 - Property: 프로퍼티

 

Class 의 인스턴스

Employee 클래스를 바탕으로 employee1 객체 생성이 되었기 때문에,
Employee 클래스 내의 프로퍼티와 메소드를 가질 수 있게 된다.

let employee1 = new Employee();

employee1.fullName='Minsu';
employee1.age=28;
employee1.job='개발자';

employee1.employeeInfo();

 

Constructor : 생성자

모든 class 는 constructor 를 가질 수 있으며,
클래스로부터 객체를 생성할때 호출되고 객체의 초기화를 담당한다.

constructor(fullName:string, age:number, job:string){
        this.fullName = fullName; // 전달된 매개변수
        this.age = age;
        this.job = job;
    }

 

constructor 에 정의된 parameter의 값이 Arguments 로 전달되어야 한다.

let employee1 = new Employee('민수', 28, '개발자');
employee1.employeeInfo();

 

전달되는 매개변수를 강제하고 있다. 때문에 class 도 선택적 매개변수로 만들 수 있다.

옵셔널 매개변수는 필수 매개변수보다 뒤에 있어야 하며,
만약 중간부터 있다면 그 이후에 매개변수들도 선택적 매개변수로 변경되어야 한다.

constructor(fullName:string, age?:number, job?:string){
        this.fullName = fullName; // 전달된 매개변수
        this.age = age;
        this.job = job;
    }

 

할당된 초기값을 변경할 수 있지만,
웹으로부터 데이터를 보호하려면, 프로퍼티에 직접 접근하여 변경하는 방법은 좋은 선택이 아니다.

let employee1 = new Employee('민수', 28, '개발자');
employee1.fullName = '영희';
employee1.employeeInfo();

 

Access Modifiers : 접근 제한자

클래스 속 멤버 변수(프로퍼티) 와 메소드에 적용될 수 있는 키워드
클래스 외부로 부터 접근을 통제할 수 있기 때문에 버그를 줄이고 코드의 안전성을 향상시킬 수 있다.

종류

public	private	protected
클래스의 외부에서 접근 가능	클래스 내에서만 접근 가능 (비공개 멤버)	클래스 내부, 상속받은 자식 클래스 접근 가능
키워드 명시할 필요 없다	직접적으로 접근하여 변경할 수 없다

 

private 예시 

class Employee{
    private fullName:string;
    age:number;
    job:string;
    
    ...
}

employee1.fullName='영희'; //error : Property 'fullName' is private and only accessible within class 'Employee'
console.log(employee1.fullName); //error : Property 'fullName' is private and only accessible within class 'Employee'

 

Getter & Setter

Get 과 Set 키워드를 사용하여 선언할 수 있다.

 

_[비공개 프로퍼티] : private 멤버를 나타내기 위해 표시하는 암묵적 약속

class Employee{
    private _fullName:string;
    age:number;
    job:string;
    
    ...
 }

 

키워드 뒤에 코드는 메소드의 형태를 보여준다.

 

class Employee{
    ...
    
    get fullName(){
        return this._fullName;
    }

    set fullName(value:string){
        this._fullName = value;
    }
    
    ...
}

console.log(employee1.fullName);

console 에서 사용되는 fullName 은 getter 를 부르기 때문

 

Constructor 와 Access Modifiers 

Constructor 매개변수에 access modifiers 를 직접 적용하여, 코드를 간결하게 만든다.

객체가 생성될 때 생성자의 매개변수로 전달되는 값은 객체의 프로퍼티 값으로 자동 초기화 되고 할당된다.

class Employee{
    constructor(
        private _fullName:string, 
        private _age:number, 
        public job:string){
    }