5. 함수와 클래스

5.1 함수의 선언과 실행

5.1.1 함수에 타입을 선언하는 방법

• 함수 선언문

// 리턴 타입이 추론된 방식
function food1(name:string){
	return 'good' + name
}
food1('chicken') //'goodchicken'

// 리턴 타입이 선언된 방식
function food1(name:string):string{
	return 'good' + name
}
food1('chicken') //'goodchicken'

• 함수 표현식

//리턴 타입이 추론된 방식
let food2 = function(name:string){
	return 'good' + name
}
food2('chicken') //'goodchicken'

//리턴 타입이 선언된 방식
let food2 = function(name:string):string{
	return 'good' + name
}
food2('chicken') //'goodchicken'

• 화살표 함수

//리턴 타입이 추론된 방식
let food3 = (name:string) =>{
	return 'good' + name
}
food3('chicken')//'goodchicken'

//리턴 타입이 선언된 방식
let food3 = (name:string):string =>{
	return 'good' + name
}
food3('chicken')//'goodchicken'

function food(price:number):void{
	console.log(price);
}
food(20000); //20000;

5.1.2 선택적 매개변수

// JavaScript
function food(price,name){
	console.log(price,name)
}
food(10000); //10000,undefined

//TypeScript
function food(price:number,name:string):void{
	console.log(price,name)
}
food(10000); 

function food(price:number,name?:string):void{
	console.log(price,name)
}

food(10000); //10000,undefined

function food(price:number,name?:string|undefined):void{
	console.log(price,name)
}

food(10000); //10000,undefined

5.2 타입스크립트의 함수 표현

5.2.1 Call signature

• 변수를 이용해 정의

// 변수에 함수 타입을 지정
let Addnum: (a:number, b:number) => number;

Addnum = function(a,b) {
    return a + b;
}

• type을 이용해 정의

// type으로 함수 타입을 지정
type Addnum = (a:number, b:number) => number;

const addnum: Addnum = (a, b) => a + b;

• 인터페이스를 이용해 정의

// 인터페이스로 함수 타입을 지정
interface Name {
    (firstName: string, lastName: string): string; 
}
   
const Myname: Name = function(first, last) {
		return first + last;
}

5.2.2 this

5.2.2.1 명시적 this

function lion(this: type, a) {
 // ...code
}

lion(a) // 실제 매개변수는 this 다음으로 오는 매개변수.

• 예시1

// this의 타입을 Fruits으로 지정
interface Fruits {
	name: string,
	price: number,
	purchase(this: Fruits): () => {};
}

let mart: Fruits = {
	  name: 'banana',
	  price: 3000,
	  purchase: function(this: Fruits) {
	    return () => {
      return this.name;
    }
  }
}

let getFruit = mart.purchase();
let fruitName = getFruit();
console.log(fruitName); // banana

• 예시2

// this의 타입을 Lion으로 지정, 첫번째 this는 가짜 매개변수
interface Lion {
  name: string
}

const lion: Lion = {
  name: 'licat'
}

function animal(this: Lion, a: string) {
  console.log( a + this.name )
}
animal.call(lion, 'Hello'); // HelloLicat

5.2.2.2 콜백함수에서 this

• 예시1

interface UIElement {
    addClickListener(onclick: (this: void, e: Event) => void): void;
} 
// 위 함수의 this: void는 addClickListener가 onclick이 this타입을 요구하지 않는 함수라는 것을 의미한다. 즉 onclick에서 this는 사용 불가하다.

class Handler {
    info!: string;
    onClickBad(this: Handler, e: Event) {
// 위의 UIElement 인터페이스에서 'this'가 필요없다고 했지만 사용했기 때문에 에러가 발생한다.
        this.info = e.message;
    }
}

let h = new Handler();
uiElement.addClickListener(h.onClickBad); // error

class Handler {
    info!: string;
    onClickGood(this: void, e: Event) {
        // void 타입 때문에 this는 이곳에서 쓸 수 없다
        console.log('clicked!');
    }
}
let h = new Handler();
uiElement.addClickListener(h.onClickGood); // ok

• 예시2

const obj = {
    a: 'Hi~',
    b: function(){
      console.log(this.a);
    }
};
  
obj.b(); // Hi~
  
const lion = obj.b;
lion(); // Cannot read property 'a' of undefined
  
function animal (cb: any) {
    cb();
}

animal(obj.b); // Cannot read property 'a' of undefined

const b = obj.b.bind(obj);

b(); // Hi~

function animal(cb: any) {
  cb();
}

animal(obj.b.bind(obj)); // Hi~

5.2.2.3 화살표 함수의 this

• 예시1

const obj = {
  a: 'cat~',
  b: 'dog~',
  c: function () {
    console.log(this.a);
  },
  d: function (){
		// 화살표 함수의 this는 메서드 d 함수 내의 this 스코프를 참조
   return () => console.log(this); 
  },
	e: function (){
	 return () => console.log(this.b);
	},
	f: () => console.log(this); // error 
		//메서드 e의 this는 전역객체를 참조하기 때문에 에러가 나온다.
};

obj.c(); 
// cat~
obj.d()(); 
// { a: 'cat~', b: 'dog~', c: [Function: c], d: [Function: d] }
obj.e()();
// dog~

const c = () => obj.c();
const d = () => obj.d();
const e = () => obj.e();

c(); 
// cat~
d()();
// { a: 'cat~', b: 'dog~', c: [Function: c], d: [Function: d] }
e()();
// dog~

function animal(cb: any) {
  cb();
}

animal(() => obj.c()); 
// cat~
animal(() => obj.d()()); 
// { a: 'cat~', b: 'dog~', c: [Function: c], d: [Function: d] }
animal(() => obj.e()); 
// dog~

• 예시2

class Dog {
  constructor(private name: string) {}
  dogName = () => {
    console.log(this.name);
  }
}
const dog = new Dog('happy');
dog.dogName(); // happy

const dogName = dog.dogName;
dogName(); // happy

function animal(cb: any) {
  cb();
}
animal(dog.dogName); // happy

5.2.3 Overloading

• 예시1

function likelion(a: string, b: string): string; // 선언부
function likelion(a: number, b: number): number; // 선언부
function likelion(a: any, b: any): any { // 구현부
  return a + b;
}

likelion('licat ', 'gary~'); // licat gary~
likelion(10, 20); // 30
likelion('hello ', 2); // Error

• 예시2

type User = {
	(a: number, b: number) : number
	(a: number, b: string) : number
}

const user: User = (a,b) => {
	if(typeof b === 'string') return a
	return a + b
}

user(10,'lion') // 10
user(10,20) // 30

• 예시3

interface User {
    name: string,
    age: number,
    getInformation(x: string): string[];
    getInformation(y: number): string;
  }
  
  let user: User = {
    name: 'Harry',
    age: 30,
    getInformation: (a: any) => {
      if (typeof a === 'string') {
        return a.split('');
      } else {
        return a.toString();
      }
    }
  };

user.getInformation('Poter') // [ 'P', 'o', 't', 'e', 'r' ]
user.getInformation(30) // '30'

• 예시4

function checklen(a: string): number; // 선언부
function checklen(arr: any[]): number; // 선언부
function checklen(x: any): number { // 구현부
  return x.length;
}

checklen("123");   // 3
checklen([123]);   // 1
checklen(['123']); // 1

// 위와 같은 코드다
function checklen(a: any[] | string) {
    return a.length;
}

checklen("123");   // 3
checklen([123]);   // 1
checklen(['123']); // 1

5.3 클래스

5.3.1 접근제한자

5.3.1.1 접근제한자의 종류

• public 클래스 내부, 상속 받은 자식(서브) 클래스, 객체 모두 접근이 가능하게 해주는 접근제한자이다. 만약 생략하게 된다면 기본값으로 public이 설정된다.

• protected 해당 클래스를 포함한 자식(서브) 클래스에서만 접근이 가능하게 해주는 접근제한자이다.

• private 선언된 클래스 내부에서만 접근이 가능하고 외부에서는 접근이 불가능하게 하는 접근제한자이다. class내에서만 접근이 가능하기 때문에 의미적으로 조금 더 명확하게 명시하기 위해서 변수앞에 _(underscore)붙이는 것을 컨벤션으로 사용한다.

5.3.1.2 접근제한자를 사용하는 이유

• 예시1

class Dog {
	name?: string;
  age?: number;
	gender?: string
}

let dog = new Dog();

dog.age = -1; //논리적으로 오류 발생하게 된다

• 예시2

class Dog {
  protected name!: string;
  private _age!: number;
  protected gender!: string;

// 생성자를 이용하거나 초기화 해주시 않은 경우 에러

  public setAge(age: number) : boolean{
    // 메서드 내부에서 음수가 들어오지 못하게 설정을 하게 해준다.
    if (age < 0) {
      return false;
    }
    this._age = age;
    return true;
  }
}

let dog = new Dog();

dog._age = -1; // 객체의 프로퍼티가 private로 설정되어있기 때문에 접근불가

dog.setAge(-1); // 메서드내부에서 음수를 받은 경우 
								// 객체의 프로퍼티에 할당하지 않고 false를 반환

dog.setAge(3); // true를 반환하면서 객체의 프로퍼티에 값을 할당

5.3.1.3 생성자란?

• 내부에 프로퍼티 선언 후 생성자 사용

class Dog {
	// 클래스 내부에 프로퍼티 선언 
  public name: string;
  private _age: number;
  protected gender: string;
 
  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this._age = age;
    this.gender = gender;
  }
}

class Dog {
  name: string;
  age: number;
  gender: string;
  constructor(name: string, age: number, gender: string) {
    this.name = name; 
    this.age = age;
    this.gender = gender;
  }
}

• 생성자메서드의 매개변수에 Acess Modifier(접근 제한자)를 사용하는 경우

// 매개변수부분에 접근제한자를 붙인 경우 자동으로 class 프로퍼티로 변경된다.
class Dog {
  constructor(
		public name: string, 
		private _age: number, 
		protected gender: string
	) 
	{
		/* 생성자 내부에 작성하는 부분을 생략할 수 있다는 큰 장점이며
		굳이 작성을 하여도 에러가 발생하지는 않는다.*/
    // this.name = name;
    // this._age = age;
    // this.gender = gender;
  }
}

• 내부에 프로퍼티를 선언하지 않고 생성자를 사용할 경우 - 에러 발생

class Dog {
  constructor(name: string, age: number, gender: string) {
    this.name = name; 
    this.age = age;
    this.gender = gender;
  }
}

5.3.1.4 Class를 활용한 객체 생성 방법

• 타입을 명시해준 경우

let dog : Dog = new Dog("Happy", 3, "female");
console.log(dog);

• 타입을 명시해주지 않은 경우

let dog = new Dog("Happy", 3, "female");
console.log(dog);

5.3.2 getter / setter 메서드

• setter메서드

  set ratingfunc(rating: number) {
		 // 검증코드 작성
  }

• setter메서드 호출방법

// 일반적인 메서드 호출
객체.메서드()

// set메서드 호출
객체.메서드명 = 할당할 값

• getter메서드

  get ratingfunc(): number {
    return this._rating;
  }

• gette메서드 호출방법

// 일반적인 메서드 호출
객체.메서드()

// get메서드 호출
객체.메서드명 

• 전체 예시 코드

class GameReview {
  // public title: string;
  // public genre: string;
  // public developer: string;
  private _rating: number;

  constructor(num: number) {
    this._rating = num;
  }

  // getter 메서드
  get ratingfunc(): number {
    return this._rating;
  }

  // setter 메서드 - 내부에 프로퍼티의 값을 변경할 수 있는지 확인하는 검증코드 작성 
  set ratingfunc(rating: number) {
    if (rating < 1 || rating > 6) {
      return;
    }
    this._rating = rating;
  }
}
//객체 생성
let review = new GameReview(0);

// setter 함수 활용
review.ratingfunc = 4;

// getter 함수 활용
console.log(review.ratingfunc);

5.3.3 추상클래스

5.3.3.1 추상클래스란?

• 예시1

abstract class Phone {
  constructor(public owner: string){}

  public callConnect() : void{
    console.log("따르릉");  
  }
}

// 추상클래스로는 객체를 생성할 수 없다.
let phone = new Phone("이정호"); // error

• 예시2

// 공통된 프로퍼티나 메서드를 미리 설계한 추상클래스
abstract class Phone {
  constructor(public owner: string){}

  public callConnect() : void{
    console.log("따르릉");  
  }
}

// 각각 CellPhone과 TelePhone 클래스에게 상속
class CellPhone extends Phone {
  constructor(owner:string){
    super(owner)
  }
}

class TelePhone extends Phone {
    constructor(owner:string){
    super(owner)
  }
}

let cellphone = new CellPhone("이정호");
cellphone.callConnect(); // 따르릉

let telephone = new TelePhone("이정호");
telephone.callConnect(); // 따르릉

• 일반 클래스를 상속시켜주지 않고 추상클래스를 만들어서 상속시켜주는 이유

5.3.3.2 추상 메서드

• 예시를 통해 살펴본 추상 메서드 사용 방법

abstract class Animal {
  constructor(public name: string) {}

	// 추상클래스에서는 선언만 진행
  public abstract sound() : void;
}

class Cow extends Animal {
    constructor(name: string) {
      super(name);
  }
	
	//메서드를 구현하지 않은 경우 오류 발생 무조건 구현해야 된다.
  public sound() : void {
    console.log("음메");
  }
}

class Duck extends Animal {
  constructor(name: string) {
    super(name);
  }

	//메서드를 구현하지 않은 경우 오류 발생 무조건 구현해야 된다.
  public sound() : void {
    console.log("꽥꽥")
  }
}

let duck = new Duck("리버덕스");
duck.sound();

let cow = new Cow("맥스");
cow.sound();

5.3.3.3 추상클래스와 인터페이스

• 예시1

abstract class Player {
   constructor(public backnumber: number) {}
}
abstract class People {
   constructor(public name: string) {}

   public move() : void {
      console.log("걷기");
   }
}

// 인터페이스와 다르게 클래스는 다중 상속을 받는 것이 불가능하다
class SoccerPlayer extends People, Player { } // error

5.3.4 static

class Test {
  // 인스턴스 간에 공통으로 프로퍼티를 공유하기 위해서 static키워드 사용
  static staticproperty: string = "static";
  // 인스턴스 프로퍼티는 객체들마다 다른 값을 가지고 있다.
  public instanceproperty: string;


  constructor(property: string) {
    this.instanceproperty = property;
  }

  // 정적 메서드
  static staticMethod(): void {
    // 아래와 같이 정적 메서드에서는 인스턴스 프로퍼티를 사용할 수 없다는 점을 유의하자
    /* 이유는 외부에서 클래스이름으로 정적 메서드를 호출을 한 경우 
	  어떤 인스턴스의 프로퍼티인지를 알 수 없기 때문에 사용할 수 없게 만들었다.*/
		/* 정적 메서드에서의 this는 클래스 그 자체를 의미한다. */
    console.log(this.instanceproperty); // error
    console.log(Test.staticproperty);
		console.log(this.staticproperty);
  }

  // 일반 메서드
  instanceMethod(): void {
    // 반대로 인스턴스 메서드에서는 정적 프로퍼티를 사용할 수 있다.
    console.log(this.instanceproperty);
    console.log(Test.staticproperty);
  }
}

console.log(Test.staticproperty);

// 인스턴스 생성
let test = new Test("instance");

//인스턴스로 정적프로퍼티 접근이 불가능하다.
console.log(test.staticproperty); // error
//클래스이름으로 프로퍼티 접근이 불가능하다.
console.log(Test.instanceproperty);  // error

// 클래스이름.정적메서드
Test.staticMethod();

// 클래스이름.일반메서드
Test.instanceMethod();  // error

// 인스턴스.일반메서드
test.instanceMethod();

// 인스턴스.정적메서드
test.staticMethod(); // error

• 정적 메서드에서 프로퍼티에 접근한 경우와 클래스명을 통해 일반메서드와 프로퍼티 접근한 경우 오류가 발생하는 이유

5.3.4.1 정적 프로퍼티 활용

• 예시1

class JsExam {
  static cutline: number = 60;

  constructor(public name: string, public score: number) {}

  public checkScore(): void {
    if (this.score > JsExam.cutline) {
      console.log(`${this.name}님 합격입니다.`);
    } else {
      console.log(`${this.name}님 불합격입니다.`);
    }
  }
}

let result_j = new JsExam("이정호", 40);
let result_s = new JsExam("김성진", 80);
let result_e = new JsExam("선은혜", 90);


result_j.checkScore(); // 이정호님 불합격입니다.
result_s.checkScore(); // 김성진님 합격입니다.
result_e.checkScore(); // 선은혜님 합격입니다.

• 예시2

class GamePlayer {
  static playercount: number = 0;

  constructor(protected name: string) {
		//생성자메서드는 객체를 생성할 때 자동으로 실행되는 메서드이기 때문에 그때마다 카운트가 증가
    GamePlayer.playercount++;
  }

  // getter메서드로 객체에 접근해서 정적프로퍼티를 가져올 수 있다.
  get count(): number {
    return GamePlayer.playercount;
  }
}

let player1 = new GamePlayer("jeongho");
let player2 = new GamePlayer("eunhye");
let player3 = new GamePlayer("seongjin");

// 생성된 객체들을 모두 공통된 값을 공유하게 된다.
console.log(GamePlayer.playercount); // 3
console.log(player1.count); // 3
console.log(player2.count); // 3
console.log(player3.count); // 3

- Reference