gyungsublee / nomard-typescript Goto Github PK

• readonly
• readonly vs 불변성
• tuple
• undefined, null, any

웹에서 TypeScript 실행

👉 Typesript

개발자의 실수를 알려준다. (변수명 틀리거나, 빠진 부분이 있을 경우 등)
javascript의 단점을 보완해준다. (javascript 에서 check하지 않는 Error를 check해준다.

● strongly typed(강타입) 프로그래밍 언어(javascript + type)

-> 타입 안정성 -> 코드 버그 ↓, 런타입 에러 ↓, 생산성 증가

● 타입스크립트는 자바스크립트로 컴파일 과정이 필요하다.

-> why) 브라우저가 자바스크립트만 이해하기 때문이다.
-> How) 타입스크립트가 알아서 컴파일 해준다.

● TypeScript는 compile과정에서 error를 처리한다.

기존 JavaScript 런타임 (코드 실행) 에서만 확인되는 error 대신
editor에서 error를 바로 확인하여 수정하는 작업이 가능해 작업 생산성이 증가한다.

타입스크립트-첼린지

• [4] 함수: 제출한 코드, 정답 코드
  -> javascript 마지막 index 추출: items[items.length - 1];
  -> 배열 복사: [item, ...items] (spread 문법)
• [5] HashMap: 제출한 코드, 정답 코드
• [6] LocalStorage: [제출한 코드 X ], 정답 코드
• [6] : 제출한 코드, 정답 코드

● 다향성(Polymorphism) -> 제네릭(<>)으로 구현

● 제네릭(<>) : interface, class 명 옆에 작성

• 선언, 초기화, 할당
• var, let , cont
• 호이스팅

노마드 - 타입스크립트로 블록체인 만들기, 1 Chapter

👉 JavaSciprt의 단점

JS는 데이터의 type을 정의하지 않는다. 따라서 데이터 타입에 대한 error를 발생시키지 않는다.
웹을 예시로 들면 설계한 api의 데이터 타입과 다른 타입의 입력값을 받아도
실행시켜주며 런타임 시 error를 발생시키지 않는다.
따라서 api/UI(User Interface) error가 발생하며
결과적으로 UX(User Experience)에 매우 좋지 않다.

이러한 부분을 typescript로 보완가능하다 .

• void
• unknwon
• never

👉 변수에 타입 할당

• 타입 자동 유추
• 타입 직접 할당

• call signatures
• 제네릭
• polymorphism(다향성)
• overloading(오버로딩)

✍️ 클래스(Class), 객체(Object), 인스턴스(instance)의 개념

● 클래스(Object)

클래스란 객체를 정의하고 만들어 내기 위한 설계도 혹은 틀을 말하며 클래스 안에는 객체를 만들어내기 위해 필요한 변수와 메서드들이 존재한다.

● 객체(Object)

객체란 클래스에서 선언된 모양 그대로 생성된 실체를 말하며 '클래스의 인스턴스' 라고 부른다.

● 인스턴스(instance)

인스턴스란 클래스를 통해서 구현해야 할 대상(객체)이 실제로 구현된 구체적인 실체를 말한다.

예를 들어 붕어빵을 만든다고 했을 때,

붕어빵을 만들려면 붕어빵을 찍기 위한 틀이 있어야 한다.
틀이 준비되었다면 틀에 밀가루 반죽과 팥을 집어넣고 구워준다.
적당히 구워지면 틀에서 꺼낸다. 그러면 붕어빵이 만들어진다.

이 과정을 Class, Object, Instance 관점에서 살펴보면

• 붕어빵틀= Class
• 붕어빵 = Object
• 구워진 각각의 붕어빵 = Instace
• 붕어빵을 굽다 = 인스턴스화(instantiating)하다

가 된다.

Class인 붕어빵틀 을 보면 아래의 그림과 같이 밀가루 반죽 과 팥이라는 변수(member variable) 와 굽다라는 메서드(member method) 를 가지고 있다.

이 붕어빵 틀에 밀가루와 반죽을 넣어 아래와 같이 6개의 붕어빵은 만들 때,

각 붕어빵의 반죽의 양과 팥의 양을 다르게 집어넣고 굽다() 라는 메서드를 호출하여 붕어빵을 굽는다.

이 구워지는 과정이 인스턴스화(instantiating)되고 있는 것이며
다 구워진 붕어빵들은 class를 통해 객체가 만들어 진 것이다.

각 붕어빵들은 같은 틀에서 구워졌지만 자신들만의 특징(개성)을 가지고 있다.
그 각각의 개성을 가진 붕어빵들을 인스턴스(Instance)라고 부르는 것이다.

Reference)
https://computer-science-student.tistory.com/319
https://victor8481.tistory.com/280

👉 Object(key: value) - type 정의

객체의 property에 대해 모르지만 타입이 동일할 때, 위 예시와 같이

[key: type] : type

로 key, value의 type을 정의한다.

🤔 Interface란?

객체 모양을 추상화 시켜 놓은 것 으로 형태(propery, method명과 타입)만 정의한다. (구현 코드는 없다.)

따라서 사용 시 구현된 객체(클래스)에 할당하거나
implement를 사용하여 shape을 체크하는데 사용한다.

1. 객체(class)에 직접 할당: 객체(클래스)명: interface명

interface ExType{
    ex1: string,
    ex2: string,
}

const example: ExType = {
    ex1: "11",
    ex2: "22"
}

2. implement 사용: class 클래스명 implement interface명

-> implement는 class와 class 의 interface(shape) 를 check하는데 사용함.

interface ExType{
    ex1: string,
    ex2: string,
}

// shape Check  -> type까지 모두 구현
class example implements ExType {
  constructor(
    public ex1: string,
    public  ex2: string,
  ) {}
}

implement 사용 시

property: 초기화(initialize) - constructor,

method: 오버라이딩(overriding)

하여 구현함.

🤔 오버라이딩(Overriding)이란?

상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용하는 것으로 위의 경우는 상위 클래스가 interface로 형태(propery, method명과 타입)만 있어 구현 코드를 작성해야 하는 것을 말한다.

👉 기본 타입 할당

TypeScript가 자동 유추하도록 하는 것이 가장 좋다.

✍️ Public + Readonly

pubilc + readonly = 전역 접근가능(pulic) + 수정불가(readonly)

👉 TS - property initialize

constructor를 통해 property initialize 시,

TS에서 constructor의 parameter를

field parameter 명 : type

으로 작성한다.

JS로 comfile 시, 자동으로 property를 초기화시켜준다.

👉 getter, setter -> get, set 키워드

아래와 같이 constructor를 통해 initialize(초기화)를 한 name이라는 property를 가지는 Person으로 정의된 class가 있다고 할때,

class Person {
    constructor(name) {
        this.name = name;
    }
}

let person = new Person("John");
console.log(person.name); // John

person 이라는 instance를 만들어 person.name 를 통해 name property에 직접적으로 접근할 수 있다.

name property에 직접적으로 접근하지 않길 원한다면

아래와 같이 getName(), setName() 작성하여 접근한다.

class Person {
    constructor(name) {
        this.setName(name);
    }
    getName() {
        return this.name;
    }
    setName(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this.name = newName;
    }
}

let person = new Person('Jane Doe');
console.log(person); // Jane Doe

person.setName('Jane Smith');
console.log(person.getName()); // Jane Smith

이러한 getName(), setName() 메소드를 통하여 property에 접근하는 방식은 Java나 C++ 같은 다른 프로그래밍 언어에서 getter 와 setter 로 정의한다.

ES6에서부터는 get 및 set 키워드를 사용하여 getter 및 setter 를 정의할 수 있다.

따라서 위의 코드는 아래와 같이 표현할 수 있다.

class Person {
    constructor(name) {
        this.name = name;
    }
    get name() {
        return this._name;
    }
    set name(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this._name = newName;
    }
}

(getter 와 setter의 변수명 충돌을 방지하기 위해 name property는 _name으로 변경함.)

getter 호출: let name = person.name;

setter 호출 person.name = 'Jane Smith';

Dos) https://www.javascripttutorial.net/es6/javascript-getters-and-setters/