[TypeScript] 기본3 class, func(?)

/*
7. class
*/

class Person{
    //자바에서 생성자 => 클래스명과 동일 => Person(){}
    //1. 타입스크립트에서 생성자 => constructor() or constructor("")
    //2. 생성자는 절대로 한개이상 생성X
    constructor(name,age){
        this.name=name //동적으로 멤버변수선언 //name 빨간줄 (에러)
        this.age=age  //age 빨간줄 (에러)
    }
}
class Person1{
    name1
    age1
    constructor(name1,age1){
        this.name1=name1 //에러발생하지 않는다.
        this.age1=age1
    }
}

class Person2{
    //name
    //age
    address
    //접근지정자 public을 부여하는 경우(속성추가)
    constructor(public name:string, public age:number){}
    //constructor(){} // 멀티플 컨스트럭터는 허용하지 않는다.
}

 

 

tsc class.ts (ES5)의 경우

/*
7. class
*/
var Person = /** @class */ (function () {
    //자바에서 생성자 => 클래스명과 동일 => Person(){}
    //1. 타입스크립트에서 생성자 => constructor() or constructor("")
    //2. 생성자는 절대로 한개이상 생성X
    function Person(name, age) {
        this.name = name; //동적으로 멤버변수선언 //name 빨간줄 (에러)
        this.age = age; //age 빨간줄 (에러)
    }
    return Person;
}());
var Person1 = /** @class */ (function () {
    function Person1(name1, age1) {
        this.name1 = name1; //에러발생하지 않는다.
        this.age1 = age1;
    }
    return Person1;
}());
var Person2 = /** @class */ (function () {
    //접근지정자 public을 부여하는 경우(속성추가)
    function Person2(name, age) {
        this.name = name;
        this.age = age;
    }
    return Person2;
}());

ES5

1. 클래스사용이 불가능하다.

2. 속성명을 멤버변수형태로 선언해서 사용 가능하다.

 

---

tsc class.ts --target es6 (ES6)의 경우

// --target es6로 지정하여 ES6의 문법으로 컴파일한다.

// tsc class.ts 로 컴파일하는 경우는 ES5문법으로 컴파일한다.

 

/*
7. class
*/
class Person {
    //자바에서 생성자 => 클래스명과 동일 => Person(){}
    //1. 타입스크립트에서 생성자 => constructor() or constructor("")
    //2. 생성자는 절대로 한개이상 생성X
    constructor(name, age) {
        this.name = name; //동적으로 멤버변수선언 //name 빨간줄 (에러)
        this.age = age; //age 빨간줄 (에러)
    }
}
class Person1 {
    constructor(name1, age1) {
        this.name1 = name1; //에러발생하지 않는다.
        this.age1 = age1;
    }
}
class Person2 {
    //접근지정자 public을 부여하는 경우(속성추가)
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

ES6

1. 클래스사용이 가능하다.

2. 속성명을 멤버변수형태로 선언해서 사용이 불가능하다.

 

 

/*
7. class extend

클래스를 상속받을 수 있다.

*/

class Animal {
  _weight: any; // 저장되는 값에 따라서 자료형이 결정
  constructor(weight) {
    this._weight = weight; //this.속성명(=멤버변수) //(this생략하면 안된다.)
  }
  weight() {
    console.log(this._weight);
  }
  eat() {
    console.log("Animal Eat");
  }
}
class Human extends Animal {
  _language: string;
  //_weight:any //부모로부터 상속되어 있다.

  constructor(weight, language) {
    //부모클래스의 값을 초기화 먼저하고 자식클래스의 값을 초기화
    super(weight); //this._weight=weight super(props)
    this._language = language;
  }
  // 오버라이딩-> 자식입장에서 부모클래스로부터 물려받은 메서드의 내용을 수정
  eat() {
    console.log("Human eat!");
  }
  speak(){
      console.log(`Korean speak ${this._language}`)
  }
}
// 형식) const 객체명=new 클래스명(인수1, 인수2,,)
const korean=new Human(65, 'Korean')
korean.weight() //객체명.메서드명()
korean.eat()
korean.speak()

// 형식) 객체명 instanceof 클래스명 = true or false
console.log(korean instanceof Human) //true
console.log(korean instanceof Animal) //true

// tsc classextend.ts
// node classextend.js

//터미널 결과화면
65
Human eat!
Korean speak Korean
true
true

 

/*
8. func
함수 호출시 함수의 매개변수명 뒤에 ?를 주면 함수의 실행을 위해서 
매개변수를 강제로 전달하지 않아도 될 때 사용한다.
-> 전달할 값이 있으면 전달하고 전달할 값이 없으면 전달하지 않다도
에러를 발생시키지 않도록 해주는 옵션
*/

function display_detail(id:number,name:string,mail_id?:string){
    console.log('id->',id,'name->',name)
    if(mail_id!=undefined){
        console.log('mail_id->',mail_id)
    }
}
display_detail(123,"John") // mail_id -> mail_id?로 작성하면 에러발생하지 않음.
display_detail(111,"Mary","mary@daum.net")
// tsc func.ts
// node func.js


//터미널결과
id-> 123 name-> John
id-> 111 name-> Mary
mail_id-> mary@daum.net