타입스크립트: 함수, 클래스

 

 

this

---

const obj = {
  a: 'Hello~',
  b: function () {
    console.log(this.a);
  }
};

this.a를 써서 

 

 

할당하는 경우 에러 발생

obj.b(); // Hello~

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

function someFn(cb: any) {
  cb();
}
someFn(obj.b); // Cannot read property 'a' of undefined

setTimeout(obj.b, 100); // undefined

 

해결법 1. blind

obj.b(); // Hello~

const b = obj.b.bind(obj);
b(); // Hello~

function someFn(cb: any) {
  cb();
}
someFn(obj.b.bind(obj)); // Hello~

setTimeout(obj.b.bind(obj), 100); // Hello~

* 컴파일러 옵션에 strict: true (혹은 strictBindCallApply : true) 넣어줘야함

 

 

화살표함수 사용

화살표함수는 호출한 곳이 아니라 생성된 곳에서 this 캡처

 

obj.b(); // Hello~

const b = () => obj.b();
b(); // Hello~

function someFn(cb: any) {
  cb();
}
someFn(() => obj.b()); // Hello~

setTimeout(() => obj.b(), 100); // Hello~

 

엄격모드에서의 this= undifined

interface ICat {
  name: string
}

const cat: ICat = {
  name: 'Lucy'
};

function someFn(greeting: string) {
  console.log(`${greeting} ${this.name}`); // Error - TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
}
someFn.call(cat, 'Hello'); // Hello Lucy

에러 발생

 

가짜 매개변수로 넣어 줌

interface ICat {
  name: string
}

const cat: ICat = {
  name: 'Lucy'
};

function someFn(this: ICat, greeting: string) {
  console.log(`${greeting} ${this.name}`); // ok
}
someFn.call(cat, 'Hello'); // Hello Lucy

 

 

 

 

오버로드(Overload)

---

매개변수 타입과 반환함수타입이 다른 여러 경우

 

선언부

function add(a: string, b: string): string; 
//함수 선언
function add(a: number, b: number): number;
//함수 선언

 

 

구현부(주로 any를 자주 사용 함)

function add(a: any, b: any): any { // 함수 구현
  return a + b;
}

 

add('hello ', 2); // Error - No overload matches this call.

 

 

 

인터페이스+오버로드

interface IUser {
  name: string,
  age: number,
  getData(x: string): string[];
  getData(x: number): string;
}

string이면 배열

number이면 문자열

 

 

 

 

클래스 접근제어자,  수식어

---

접근제어자(속성 메소드)

 

public: 어디서나 접근 가능

protected: 나, 파생된 후손 클래스 내에서 접근 가능

private: 내 클래스에서만 접근 가능

 

수식어

static 정적 사용  속성, 일반메소드

readonly 읽기 전용  속성

 

 

 

 

 

추상클래스

---

인터페이스와 같이 다른 클래스 파생 가능

// Abstract Class
abstract class Animal {
  abstract name: string; // 파생된 클래스에서 구현해야 합니다.
  abstract getName(): string; // 파생된 클래스에서 구현해야 합니다.
}
class Cat extends Animal {
  constructor(public name: string) {
    super();
  }
  getName() {
    return this.name;
  }
}
new Animal(); // Error - TS2511: Cannot create an instance of an abstract class.
const cat = new Cat('Lucy');
console.log(cat.getName()); // Lucy

// Interface
interface IAnimal {
  name: string;
  getName(): string;
}
class Dog implements IAnimal {
  constructor(public name: string) {}
  getName() {
    return this.name;
  }
}