220511

1.타입스크립트, 선택적 매개변수, 나머지 매개변수

 

// 타입스크립트에서의 함수 매개변수는 변수에서의 매개변수 설정과 동일합니다.
// 다만 입력값도 타입이 있고, 출력값도 타입이 있어야 하므로 신경써야겠죠?
function addTwo(a: number, b: number): number {
    return a + b;
}

console.log(addTwo(2, 3))



// 한 개의 매개변수가 들어올 수도 있고, 두 개의 매개변수가 들어올 수도 있습니다.
// ?를 사용하는 것을 제외하면, 위 함수와 동일하게 작성합니다!
function addOneOrTwo(a: number, b?: number): number {
    if (b) {
    return a + b;
    } else {
    return a;
    }
}

console.log(addOneOrTwo(5, 10))
console.log(addOneOrTwo(10))



// JS에서도 기본값을 포함하는 함수를 만들어 본 적이 있지 않나요?
// 이번에도 마찬가지입니다!
// 두 개의 인자를 받되, 숫자가 1개만 들어오면 10을 더하도록 만들어 보세요.
function addDefault(a: number, b = 10): number {
    return a + b;
    
}
console.log(addDefault(3)) // return 13
console.log(addDefault(12, 15))



// JS도 가변인자 (나머지 매개변수)를 갖고 있어요.
// 워낙 유용하다보니, 많이 사용했을 것 같지만, 한 번 더 연습해 봅시다.
function addTwoOrMore(a:number,b:number, ...rest: number[]): number {
        
        if (rest) { 
            for(let i:number=0; i<rest.length;i++) {
             a+=rest[i]            
            }
        }
        
        return a + b;
    
}

console.log(addTwoOrMore(2, 1))
console.log(addTwoOrMore(8, 8, 6, 1, 9, 6))

 

 

2. 타입스크립트에서 class 생성

 

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!`);
    }
}

const newDog:Dog = new Dog('Daisy','Bulldog');

newDog.bark();

 

3. 타입스크립트 클래스 상속

 

 

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();

 

4. 추상 클래스 , 추상 함수란 ? : 하위 요소에 꼭 있어야하지만 값이 다른 요소를 생성해야할때 필요함.

그래서 모든 하위 요소에 꼭 추가해줘야함.

 

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();

5. 인터페이스 클래스 상속

 

interface shapeInterface {
  getArea(): number;
}

interface triangleInterface extends shapeInterface {
  width: number;
  height: number;
}

interface circleInterface extends shapeInterface {
  radius: number;
}

class triangle implements triangleInterface {
    width: number;
    height: number;
    
    constructor(a:number,b:number) {
        this.width = a;
        this.height = b;
       
    }
    
     getArea():number {
        return this.width * this.height / 2;
    }
    
}

class circle implements circleInterface {
    radius:number;
    
   constructor(r:number) 
   {
        this.radius = r
   }
   
   getArea() {
        return this.radius**2 * Math.PI 
   };
}

const tri = new triangle(10, 5);
const cir = new circle(4);

console.log(tri.getArea());
console.log(cir.getArea());

 

6. generic 함수 : 입력의 타입에 따라 출력의 타입이 결정되는 함수

 

function add<T>(a: T, b: T): T {
  if (typeof a ==='boolean') {
    return a||b
  }
  
  return <any>a + <any>b
}

console.log(add<number>(13, 15));
console.log(add<string>("hell", "o"));
console.log(add<boolean>(false, true));

// error
// console.log(add<number>(3, "5"));