타입스크립트(2) - ES6, 클래스 함수(1)

타입스크립트와 ES6 

- 타입스크립트는 쉽게 생각해서 자바스크립트의 확장판이기 때문에 자바스크립트에서 사용하던 문법을 그대로 사용 + 새로운 타입스크립트만의 문법 이렇게 생각하면 됨 

- 타입스크립트 ES6 = 자바스크립트 ES6

 

블록 스코프 

context.ts

let context = document.querySelector('html');

{
  let context = document.querySelector('body');
  console.log('블록문 내부 context = ', context);
}

console.log('글로벌 context = ', context);

 

템플릿 리터럴

- 템플릿(문자열)을 접합하는 것을 의미함 

- 데이터를 가져와서 넣어서 출력하는 것을 의미함 

- ${변수이름} 

let nickname = 'yamoo9';

let greeting_message = `
  <p>
    안녕하세요 <strong>${nickname}</strong>님.
    가입을 환영합니다. :-)
  </p>
`;

 

화살표 함수 

- 매개변수, 리턴 타입을 명시적으로 선언해 컴파일 과정에서 타입 검사를 수행하여 사전 문제를 방지할 수 있음 

let corsURL = (url:string): string => `https://crossorigin.me/${url}`;

corsURL('http://yamoo9.herokuapp.com/rest/ediya-menu');

 

자바스크립트 형태로 작성하면,

let corsURL = function (url) {
  return "https://crossorigin.me/" + url;
};

corsURL('http://yamoo9.herokuapp.com/rest/ediya-menu');

- 매개변수 url은 string 타입이라고 명시해줌 : = (매개변수 : 매개변수 타입) => 

 

- return 형태 만들기 

     

: 리턴 타입 => '템플릿/${붙여줄 매개변수}'

 

따라서, 종합해보면 이런 형태로 화살표 함수를 만들 수 있다. 

const 변수 이름 = (매개변수이름 : 매개변수 타입) : 리턴타입 => '반환할 항목';

 

 

연산자와 매개변수 

Default Parameter(기본 매개변수)

- 매개변수 타입 설정 후 '=' 이후 기본 값을 할당한다. 

 

coutDown.ts

function countDown(start:number = 10): ()=>number {
  return () => start > 0 ? start-- : 0;
}

 

countDown.js

function countDown(start) {
  if (start === void 0) { start = 10; }
  return function () { return start > 0 ? start-- : 0; };
}

 

- countDown 함수는 start라는 매개변수를 가지며, 이 매개변수의 기본값은 10이고, number type을 가진다. 

- 다음 return에는 함수가 반환되는데, 

number {
  return () => start > 0 ? start-- : 0;
}

- 이때, 익명함수(function () => {. . .})가 반환된다.

- start 값이 0보다 큰 경우( ? ) start 값을 감소시키고 반환된다. 그렇지 않은 경우, 즉 start 값이 0인 경우 0을 반환된다.

 

Spread Operator

// 배열 선언
let numbers:number[] = [101, 21, -12, 934, 87];

// 배열 내부 아이템으로 결합
numbers = [10, 31, 11, ...numbers, -2, 0];
// [10, 31, 11, 101, 21, -12, 934, 87, -2, 0]이 된다.


// 배열 ⟹ 개별 아이템으로 순차적 제공
let min_number:number = Math.min(...numbers);
let max_number:number = Math.max(...numbers);

 

- 배열을 배열 내부 아이템으로 결합하기 

,...배열변수 이름,

 

나머지 매개변수(Rest Parameters)

- 전개 연산자를 매개변수 앞에 붙여 사용함

- 함수에서 활용된다. 

- 가변인자 즉 매개인자를 배열타입으로 할당하여 사용할 때 작성한다. 

- args... : args의 타입 

function makeArray(...args:(number|string)[]): (number|string)[] {
  return args;
}

makeArray(11, 'eleven', 100, 'one hundred');

- makeArray 함수는 ...args라는 가변 인자를 받는다. 이 때 ' : '을 통하여 배열의 원소 타입이 선언되는데, 이 가변 인자는 (number|string)[] 형태로 선언되어 있으며, 숫자 또는 문자열로 이루어진 배열 타입이다.

- return args이기 때문에 args 가변인자 자체를 그냥 리턴값으로 반환된다. 

 

 

비구조화 할당 

- 배열, 객체의 아이템 또는 속성을 변수에 할당할 때 사용한다. 

// 배열 비구조화 할당
let [html, , body] = [document.documentElement, document.head, document.body];

// 객체 비구조화 할당
let numbers_module = {
    multiplyNumbers: (...n:number[]):number => n.reduce((a, b) => a * b),
    sumNumbers: (...n:number[]):number => n.reduce((a, b) => a + b)
};

let { sumNumbers } = numbers_module;

 

 

클래스(1) 

 

접근 제어자 

- 접근 제어자(access modifiers)를 통해 접근 가능한 범위를 설정할 수 있고, 각 속성에 데이터 타입을 지정할 수 있게 하는 typescript의 고유한 문법

 

1. 접근 제어 속성

class Book {

  // 제목
  // public: 클래스 외부에서 접근 가능
  public title:string;

  // 저자
  // public은 기본 값으로 생략 가능합니다.
  public author:string;

  // 제조 공장 : _manufacturing_plant
  // private: Book 클래스 내부에서만 접근 가능
  private _manufacturing_plant:string;

  // 종이 유형 papter_type
  // protected: Book 클래스를 포함한 서브 클래스에서만 접근 가능
  protected paper_type:string;

  // constructor() 매개변수 앞에 
  // public, private, protected를 사용하면
  // Book 클래스의 타입(type)을 별도 선언하지 않아도 됩니다. constructor은 초기화임. 즉 사용변수를 선언해주는 것을 의미함
  constructor(title:string, author:string, public pages:number) {
    this.title = title;
    this.author = author;
    this.pages = pages;
  }

}

/* 인스턴스 생성 ------------------------------------------------ */

let indRevo = new Book('한 권으로 정리하는 4차 산업혁명', '최진기', 367);
console.log(indRevo); // Book {}

 

1. 변수의 속성을 설정해준다. 

 

public title : string;
public author : string;
private _manufactoring_plant : string;
protected paper_types : string;

 

2. 클래스 변수 안에서 인스턴스 변수를 선언한다.(constructor) 즉, 외부에서 받아올 사용 변수를 선언함

  constructor(title:string, author:string, public pages:number) {
    this.title = title;
    this.author = author;
    this.pages = pages;

 

 

 

 

2. 접근 제어 메서드 

- 메서드는 변수가 아니기 때문에, (변수로서 사용할 수 있지만) constructor을 사용하지 않는다. 

class Book {

  public    title:string;
  public    author:string;
  public    pages:number = 150;
  private   _manufacturing_plant:string = '충무로 공장';
  protected paper_type:string = '밍크지';

  constructor(title:string, author:string, pages:number) {
    this.title  = title;
    this.author = author;
    this.pages  = pages;
  }

  /* 메서드 ------------------------------------------------ */

  // public 메서드
  // 클래스 외부에서 접근 가능
  public printPages(): string {
    return `${this.pages}페이지`;
  }

  // protected 메서드
  // Book 클래스를 포함한 서브 클래스에서만 접근 가능
  protected changePaperType(type:string): void {
    this.paper_type = type;
  }

  // private 메서드
  // Book 클래스 내부에서만 접근 가능
  private setManufacturingPlant(plant:string): void {
    this._manufacturing_plant = plant;
  }


  /* 클래스 내부 메서드에서 private, protected 메서드 접근 가능 */

  public setPaperType(type:string):void {
    // protected 메서드 접근 가능
    this.changePaperType(type);
    console.log(this.paper_type);
  }

  public setPlant(plant:string):void {
    // private 메서드 접근 가능
    this.setManufacturingPlant(plant);
    console.log(this._manufacturing_plant);
  }

}


/* 인스턴스 생성 ------------------------------------------------ */

let indRevo = new Book('한 권으로 정리하는 4차 산업혁명', '최진기', 367);

console.log(indRevo.printPages()); // '367페이지'

// [오류]
// [ts] 'changePaperType' 속성은 보호된 속성이며
// 'Book' 클래스 및 해당 하위 클래스 내에서만 액세스할 수 있습니다.
// (method) Book.changePaperType(type: string): void
console.log(indRevo.changePaperType('인디언지'));

// [오류]
// [ts] 'setManufacturingPlant' 속성은 private이며
// 'Book' 클래스 내에서만 액세스할 수 있습니다.
// (method) Book.setManufacturingPlant(plant: string): void
console.log(indRevo.setManufacturingPlant('파주 공장'));