21 (2/2) :: TypeScript 함수 사용, class

21 (2/2) :: TypeScript 함수 사용, class

728x90

21 (1/2) :: 타입스크립트, Type, Utility Types

링크 => https://forgottenknowledge.tistory.com/entry/21-12-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Type-Utility-Types

TypeScript 이용 함수 사용하기전 함수에 대해 알아보기

일급객체의 특징

1. 함수 자체를 값으로 저장

2. 함수를 파라미터로 넣어 줄 수 있다

3. 함수를 리턴할 수 있다

// 함수 자체를 값으로 저장 let sum = function(a, b) { return a + b } function ul(child) { return`${child}` } function makeLi(container, contents) { const liList = [] for(const content of contents) { liList.push(`${content}`) } // 함수를 리턴할 수 있다. return container(liList.join('')) } // 함수를 파라미터로 넣어줄 수 있다 const htmlUl = makeLi(ul, ['월', '화', '수', '목', '금', '토', '일'])

가변인자

1. arguments 이용

2. spread operator(...) 이용

// 가변인자 const abcSum = sum(10, 20, 30, 40) // arguments 이용 function sum() { let s = 0 for(let i = 0; i < arguments.length; i++) { console.log(arguments[i]) } } // 발전! ... 이용 function sum(...arg) { let s = 0 for(let i = 0; i < arg.length; i++) { console.log(arg[i]) } } // 발전!! function sum(a, b, ...arg) { let s = 0 for(let i = 0; i < arg.length; i++) { console.log(arg[i]) } }

함수 호출

1. 그냥 호출

2. call 이용

3. apply 이용

// 보통 이렇게 부르지 sum(10, 20, 30, 40) // 얘는 다 써줘야 되고 sum.call(null, 10, 20, 30, 40) // 얘는 배열 써줘도 되고 sum.apply(null, arr)

즉시 실행함수

한번만 실행하고 끝낼 함수에 사용하기도 한다

// 즉시 실행함수 (function() { console.log('즉시 실행되어라') })()

생성기 함수

중간 중간 리턴이 있는 느낌

객체로 리턴

// 생성기 함수 function* gen() { yield 10; yield 20; return 30 } const g = gen() console.log(g.next()) console.log(g.next()) console.log(g.next())

TypeScript 이용 함수 사용

자바스크립트와 사용법은 비슷하지만

함수에 인자, 리턴에 타입을 선언해주는 것을 권장

매개변수 개수 = 인자 개수

function sum(a: number, b: number ): number { return a + b } let sumAge = sum(2, 3, 4) // 이게 자바스크립트에서는 에러가 안난다

선택적 매개변수

function sum(a: number, b: number, type?: string ): number { return a + b } // 둘다 OK let sumAge = sum(2, 3, 'weight') let sumAge = sum(2, 3)

가변인자 함수

function buildName(firstName: string, ...restOfName: string[]): string { return firstName + ' ' + restOfName.join(' ') } console.log(buildName('aurora')) console.log(buildName('aurora', 'bird', 'maple'))

객체 지향 프로그래밍(OOP)

Class

class Person { name: string constructor(name: string) { this.name = name } say(){ return 'Hello, Myname is ' + this.name } } let person = new Person('june') person.say()

Class 상속(extends)

class Dog { name: string; species: string; constructor(name: string, species: string) { this.name = name; this.species = species; } bark() { console.log(`${this.name}(${this.species}) : BOWWOW!`); } } class Puppy extends Dog{ constructor(name: string, species:string) { // super을 사용해 Dog 클래스에 접근할 수 있습니다. super(name, species + "-baby") } bark() { console.log(`${this.name}(${this.species}) : bowwow!`); } } const daisy: Dog = new Dog('Daisy', 'Bulldog'); daisy.bark(); const tom: Puppy = new Puppy('Tom', 'Bulldog'); tom.bark();

추상 클래스 예시

abstract class Animal { name: string; species: string; constructor(name: string, species: string) { this.name = name; this.species = species; } abstract bark() : void; } class Dog extends Animal { constructor(name: string, species: string) { super(name, 'Dog-' + species) } bark() { console.log(`${this.name}(${this.species}) : BOWWOW!`) } } class Cat extends Animal { constructor(name: string, species: string) { super(name, 'Cat-' + species) } bark() { console.log(`${this.name}(${this.species}) : meow!`) } } const daisy: Dog = new Dog('Daisy', 'Bulldog'); daisy.bark(); const cheese: Cat = new Cat('Cheese', 'Bengal'); cheese.bark();

types of Deon Black #unsplash

from http://forgottenknowledge.tistory.com/190 by ccl(A) rewrite - 2021-11-23 18:01:36