[220609] prettier, eslint 설치 / 테스트코드(test.ts), 선언파일(d.ts)

[ 사전 세팅 ]

문법을 맞춰주는 Prettier

확장프로그램 설치

ctrl / Command + , 누르면 뜸

 

prettier와 함께 사용할 라이브러리 설치

prettier 말고도 eslint 라이브러리도 설치하는 코드.

$ npm install -D eslint prettier eslint-plugin-prettier eslint-config-prettier

 

prettier의 기본값을 세팅하는 config 파일 만들기

// eslint라이브러리를 세팅하는 .eslintrc 파일
{ "extends":["plugin:prettier/recommended"] }


// prettier라이브러리를 세팅하는 .prettierrc 파일
{
    // 줄바꿈할 폭이 길이
    "printWidth": 120,

    // 탭을 누를때 얼마나 공간을 둘건지
    "tabWidth": 4,

    // '' 이걸 쓸건지말건지
    "singleQuote": true,

    // 여러줄을 사용할때 ,을 사용할 것인지
    "trailingComma": "all",

    // ;을 무조건 붙여야할지 말지
    "semi":false
}

설정을 바꿔준 후에 비쥬얼 코드를 종료하고 다시 실행하면 적용된다.

 

 

 

 

 

 

 

---

테스트 코드를 작성하기 위해 세팅하기

객체지향형 프로그램언어인 타입스크립트의 상태를 검사하기위해 테스트 코드를 별도로 작성할것이다.

테스트 코드를 작성하는 프레임워크를 설치하고, 각 프레임워크의 세팅값을 위한 config 파일도 작성했다.

이런게 있다는거정도만 알아둬도 사용하는데 문제없음.

이렇게 작성하는 이유는 '나중에 테스트코드 결과가 알아보기 쉽게 나와서.'

$ npm install -D ts-jest @types/jest
$ npm install -D @babel/preset-typescript @babel/preset-env

// jest.config.ts

import type { Config } from '@jest/types'
const config: Config.InitialOptions = {
    moduleFileExtensions: ['ts', 'js'], //확장자

    //이 조건에 맞는 파일만 실행할거임 = 끝자리가 js 또는 ts
    //Config 안에 있는걸 끌고오는 rootDir
    testMatch: ['<rootDir>/**/*.test.(js|ts)'],
    moduleNameMapper: {
        //별칭
    },
    testEnvironment: 'node',
    verbose: true,
    preset: 'ts-jest',
}

export default config

// babel.config.js

module.export = {
  presets:[
    ["@babel/preset-env",{
      targets:{node:'current'}
    }],
    '@babel/preset-typescript'
  ]
}

 

 

 

 

 

 

---

테스트코드 작성하기

테스트코드의 기본틀.

descrive는 2개의 매개변수가 필요하다.

첫번째 인자값에는 string이, 두번째 인자값에는 콜백함수가 들어간다.

// example.test.ts

describe('나는 테스트코드를 테스트한다.',()=>{
  it('1 is 1',()=>{
    expect(1).toEqual(1)
  })
})

 

 

 

제네릭

타입스크립트를 작성할때 먼저 타입을 정해놓고 코드를 작성했었다.

하지만 여러가지를 넣어야할 가능성이 보일때 사용하는게 제네릭이다.

function log<T>(n: T){
  console.log('result : ', n)
}

log<number>(123)
log<string>('1234')

 

 

 

제네릭을 테스트코드로 검사하기

타입스크립트에서 객체를 만들때에는 반드시 타입이 필요했다.

그래서 interface로 먼저 전역적으로 만들어질 객체의 타입을 선언한 후에야 만들 수 있었다.

하지만 클래스는 내부에 앞으로 완성될 청사진을 만들어놓기때문에 interface가 필요없다.

대신 클래스는 접근제한자(public, private...)를 필요로한다.

// generic.ts

export class Output {
  // 이 객체가 완성되었을때 이런 형태가 될거다!라고 interface대신 알려주는 형태
  public address: string
  public amount: number

  constructor(_address: string, _amount:number){
    this.address = _address
    this.amount = _amount
  }
}

// 클래스가 완성되었을때의 형태
// {
//   address:'asef',
//   amount:10
// }

 

 

만들어둔 파일을 테스트코드를 작성해서 테스트하기

다음 코드를 넣으면 jest.config.js에 넣은 세팅값대로 .test가 붙어있는 자바스크립트나 타입스크립트를 모두 테스트한다.

$ npx jest

// generic.test.ts

import { Output } from './generic'

// 묶어주는 용도 = describe
describe('Class Output 검증', () => {
    it('Output 인스턴스 생성 확인', () => {
        output = new Output('7722', 10)
        console.log(output)
    })
})

테스트코드를 실행한 결과

 

 

 

 

 

---

타입스크립트 선언 파일 d.ts

namespace 역할을 declare 키워드로 정의하여 js 기반 모듈로부터 타입정의를 사용할 수 있게하는 파일이다.

전역상태로 선언한 변수나 함수를 import 구문을 사용하지 않고도 사용하게 해준다.

// 전역 변수
declare const pi = 3.14;

// 전역 함수
declare namespace myLib {
  function greet(person: string): string;
  let name: string;
}

myLib.greet('캡틴');
myLib.name = '타노스';