TypeScript 9일차_클래스

# TypeScript 

## 클래스

class.js

// ES2015 (ES6)
class Person {
    //클래스 로직
    constructor(name, age) {  // 초기화.
        console.log('생성 되었습니다.');
        this.name = name;
        this.age = age;
    }
}

var seho = new Person('세호', 35);
console.log(seho);

자바스크립트 프로토타입.

• 자바스크립트는 프로토타입 기반의 언어.

var user = { name: 'capt', age: 100 };
var admin = {};
admin._proto_ = user;   // admin은 user를 상속받아 사용.
admin.name;
admin.age;
admin.role = 'admin';

자바스크립트 프로토타입 활용 사례.

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object - JavaScript | MDN

• Built-in JavascriptAPI 또는 Javascript Native API

프로토타입과 클래스와의 관계.

• 아래 코드는 동일한 코드임. (생성자 함수 사용한 것과, 클래스 사용한 것)

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var capt = new Person('kim', 150);  // 아래와 동일 코드임.

// ES2015 (ES6)
class Person {
    //클래스 로직
    constructor(name, age) {  // 초기화.
        console.log('생성 되었습니다.');
        this.name = name;
        this.age = age;
    }
}

var seho = new Person('세호', 35);
console.log(seho);

타입스크립트의 클래스 문법.

class.ts

• 타입 스크립트 에서의 클래스 문법

class Person {
    private name: string;   // 클래스에서 사용할 멤버변수 정의 필요.
    public age: number;     // 변수의 접근 범위 지정 가능. (private, public, readonly..)
    readonly log: string;   // readonly : 값에 접근만 할 수 있고 변경은 불가능.(읽기만)

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}


// 리액트 예전 문법 - 클래스 기반 코드
class App extends React.Component {

}
// 리액트 최신 문법 - 훅 기반의 함수형 코드
function App() {
    return <div>Hello World</div>
}