타입스크립트 스터디 - 2

노요셉·2019년 9월 23일

class typescript

typescriptStudy

목록 보기

2/3

이전에 한거 다 날라갔네.. 저장을 안했나보다..
함수 선택적 매개변수 기본 매개변수 까지..했었는데

https://typescript-kr.github.io/
핸드북만 보기

tsconfig.json( typescript 개발환경 구축 )
interface vs type
this
class

tsconfig.json

cli 명령어로 파일 컴파일

npm init -y 로 package.json을 만든후에
npm i typescript 로 typescript를 설치한후에
프로젝트 디렉토리 하위 디렉토리에 .bin 디렉토리가 생긴것을 볼 수 있습니다.

여기에 나온 프로그램들은 npm script으로 실행할 있으므로
package.json에 "script" 부분에 다음과 같이 쓴다면

  "scripts": {
    "build": "tsc"
  },

프로젝트 디렉토리에서는 npm run build <파일명.ts> 로 typescript를 transpile(ts -> js)로 만들 수 있게 된다.

그런데 여기에 여러가지 설정들을 가미할 수 있게 된다. 어디에? tsconfig.json
예를 들어 js파일도 되게 종류가 많죠. es5냐? es6버전 js로 만들거냐 이러한 설정들을 tsconfig.json에 넣어줘요.

!!!
tsconfig.json 파일이 없어도 transpile이 되는데 어떠한 설정으로 transpile되는거죠? ( 디폴트로 어떤 js로 트랜스파일 되는지, 그리고 라이브러리도 정해져있음. )

특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 npm 스크립트로 컴파일

프로젝트 루트 디렉토리에서
tsc --init tsc 컴파일러에 초기 세팅을 하겠다. 라는 명령어
tsconfig.json 파일이 만들어져요.

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module 
    "strict": true,                           
    "esModuleInterop": true                   /* Enables emit 
  }
}

target: 컴파일된 결과물을 es5버전에 맞추겠다.
라이브러리는 설정을 안했기 때문에 es5 디폴트 라이브러리가 설정됌.

라이브러리의 의미는 definition 파일이 들어감.
예를 들어 javascript에서 name. 치면 length 가 나와야 하잖아요
length 자체는 길이라는 결과물을 갖고 있는 애잖아요.
그 결과물의 type을 다 써 놓은 라이브러리 파일
얘가 있어서 . 누르면 toString()도 나오는 역할을 해주는 라이브러리에요.

그런데 라이브러리 설정할때도 어려움이 있는게
라이브러리 간 의존성이 있기 때문에 라이브러리간 선후 관계를 확실히 알아야 에러가 안뜸.

module: 은 transpile 결과물이 어떤 모듈을 사용할 것이냐에요. ( 어떤 모듈을 사용해서 결과물을 만들까가 아님 ) 목적파일을 만들때 모듈 형태의 결과물들이 존재할때 그때 어떤 모듈을 쓸건지에 대한 설정

tsconfig.json이 있는 상태에서는
tsc 만 명령해도 tsconfig.json 파일 읽어서 트랜스파일 함.

watch 모드란... ( ts 코드가 변경되면 새로 트랜스파일 해줌 )

interface

this

JavaScript에서는 this가 함수 호출될때 결정된다고 했고, javascript this 바인딩으로 검색하면 엄청나게 나올 정도로 유명하기도 하다.

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        // 주의: 아래 줄은 이제 화살표 함수입니다. 여기에서 'this'를 캡처할 수 있습니다.
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

더 좋은 점은 컴파일러에 --noImplicitThis 신호를 넘겨주면 TypeScript가 실수를 했을 때 경고를 합니다.
this.suits[pickedSuit]에서 this는 any 타입입니다.

this paremeter

불행히도 this.suits [pickedSuit]의 타입은 여전히any입니다.
왜냐하면 this는 객체 리터럴 내부의 함수 표현식에서 왔기 때문입니다.
이 문제를 해결하기 위해 명시적으로 this 매개변수를 제공할 수 있습니다.

class

클래스 만들기

class Person{
  name: string; 
  age: number;
}

const person = new Person();
console.log(person); //Person {}
/*

1. 생성자 함수 없으면 디폴트 생성자 불림.

2. 클래스의 프로퍼티 정의는 되어있지만, 값을 대입하지 않으면 undefined
오브젝트에 프로퍼티가 아예 존재하지 않는다.

3. 프로퍼티 접근제어( Access Modifier ) 의 디폴트가 public
*/

Implementing an interface

https://www.typescriptlang.org/docs/handbook/interfaces.html#class-types

인터페이스 확장 클래스 (Interfaces Extending Classes)

추상 클래스 (Abstract Classes)

https://www.typescriptlang.org/docs/handbook/classes.html#abstract-classes

추상 클래스 인터페이스 이런거 왜 쓸까요?

레퍼런스1
이 분은 추상 클래스 말 그대로 덜 구체화 된것
상태와 행동을 가지지 못하는 객체라면
추상 클래스로 하라~

내 생각은... 추상클래스 음 팀단위로 코드작업을 수행할때 전체적인 설계는 한 후에 작업을 맡길 것 아닌가? 거기서 그리고 Data 플로우를 설계하기 위해서 적어도 input과 output은 명세해야하지 않는가? 그래서 필요하다고 생각을 했음.
여기서 얻는 이점은 많다. 코드 퀄리티, 당연히 유지보수성 아 두 개 밖에 생각이 안난다. 전체 데이터 플로우를 몰라도 작은 프로그램를 효율적으로 동작하게끔 집중할 수 있는? 이런것?

또 장점이라면
인터페이스를 아직 정확히 안봐서 모르겠지만.. 겹치는 부분이라면
다형성이 가져다 주는 이점?