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

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`<ul>${child}</ul>`
}

function makeLi(container, contents) {
    const liList = []

    for(const content of contents) {
        liList.push(`<li>${content}</li>`)

    }

    // 함수를 리턴할 수 있다.
    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