#2 typescript

1. typesrcipt

javascript와 비슷한데, 이보다는 조금 strict한 문법을 제공한다고 볼 수 있다.

 

대표적으로 우리가 변수를 선언할 때 JS에서는 데이터의 종류를 따로 지정하지 않고 자유롭게 쓸 수 있었지만

 

(배열인지 숫자인지 문자열인지 등..)

 

TS에서는 변수 선언시 데이터 종류(type)을 반드시 함께 선언해주어야한다.

 

우리가 class 문법을 이용해 객체 (이제부턴 보통 블럭) 를 사용할 때,

 

그 class안에 있을 요소와 그 데이터 타입을 지정해 class를 선언해주면

 

앞으로 해당 class에 속하는 객체를 생성 할 때, 선언시 지정된 속성, 데이터 타입과 다를 경우 그 사실을 알려줄 것이다.

 

우선 ts 파일을 하나 만들고, 이를 js로 변환하는 가장 간단한 작업을 하는 것부터 시작해보자.

 

1.1 typescript set up

typescript도 마찬가지로 npm을 통해 설치할 수 있다.

npm i -D typescript

다음으로 typescript 파일 (.ts)를 실행할 수 있게끔 해주는 라이브러리를 설치한다.

npm i -g ts-node

js파일을 node에서 실행해줄 때 파일 이름 앞에 node를 붙이고 파일명을 입력해 실행한 것에 대응한다고 보면 된다.

 

e.g. index.ts 파일을 실행하고 싶다면 다음과 같이 입력하면 된다.

ts-node index.ts

마지막으로 node로 ts 파일을 실행할 수 있게 만들어진 @types/node 를 설치한다.

npm i -g @types/node

nodeJS에서 만들어진 라이브러리를 ts 환경에서도 사용할수 있도록 ts에 맞춰 만든 라이브러리가 있기도 하는데,

 

위처럼 @types/[라이브러리 명] 을 입력후 npm으로 설치해주면 된다.

 

3개 라이브러리를 다 설치했다면 이제 필요한 기본적인 작업 환경은 어느 정도 만들어진 것이다.

 

이제 다음과 같이 index.ts 파일을 만들어보자.

/*  index.ts  */

const str: string = "hello typescript"
console.log(str)

변수 str을 선언할 때, 변수 옆에 데이터 타입 string을 같이 써주었다.

 

이제 파일을 실행해서 그 value 'hello typescript' 가 잘 출력되는지 확인해보자.

 

1.2 ts 파일을 js 파일로 변환하기

ts 파일은 이를 읽을 수 있는 환경이 많지 않으므로 js 파일로 변환을 해줘야 할 때가 많다.

 

react에서 webpack을 이용해 jsx를 js로 변환해준 것과 비슷한 경우라고 볼 수 있다.

 

터미널에 다음과 같이 입력해주면 된다.

npx tsc index.ts

잠시 기다리면 변환된 js 파일이 생성되는 것을 볼 수 있다.

 

이런 작업을 할 때, 변환 작업에 대한 설정을 위해 파일을 하나 더 만드는데 루트 디렉토리에 다음과 같이

 

tsconfig.json 파일을 작성해보자.

 

/*  tsconfig.ts  */

{
    "compilerOptions": {
        "outDir": "./dist/", // 파일 생성 위치
        "esModuleInterop": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "strict": true,
        "baseUrl": ".",
        "typeRoots": ["./node_modules/@types", "./@types"]
    }
}

 

어떤 ts 파일을 변환할 것인지, 변환된 파일은 어디에 둘 것인지 등에 대한 정보를 담아주면 된다.

 

명령어는 이제부턴 다음과 같이 입력해주면 된다.

npx tsc --build

입력하면 dist 폴더를 새로 만들고 그 안에 변환된 js 파일을 생성해준다.

 

1.3 test code 만들기

문제는 이렇게 변환을 한 후, 파일을 실행해 읽으면 수정한 코드를 확인할 때마다 시간이 너무 오래 걸린다는 문제가 있다.

 

이를 보완하기 위해 빠르게 테스트를 할 수 있게 도와주는 라이브러리 jest를 설치할 것이다.

npm i -D ts-jest @types/jest

ts-jest를 typescript 환경에서 사용 할 수 있는 라이브러리 @types/jest도 설치해준다.

 

앞에서 언급한 것처럼 jest를 ts에서 사용할 수 있도록 만든 라이브러리가 @types/jest 이다.

 

@types 뒤에 슬래시를 긋고 라이브러리 이름을 적으면 되는데 모든 라이브러리가 이런 ts 전용이 있지는 않다.

 

이럴 때는 다른 대처법이 있는데 이는 후술하도록 하고,

 

조금 전 tsconfig.json와 마찬가지로 테스트 실행에 대한 설정을 위해 jest.config.ts 파일을 만들어준다.

 

/*  jest/config.ts  */

import type { Config } from '@jest/types'
const config: Config.InitialOptions = {
    moduleFileExtensions: ['ts', 'js'],
    testMatch: ['<rootDir>/**/*.test.(js|ts)'],
    testEnvironment: 'node',
    verbose: true,
    preset: 'ts-jest',
}

export default config

 

어떤 파일을 테스트 할지, 어떤 경로 내에 있는 파일을 테스트 할지 등을 설정해주면 된다.

 

여기서 우리는 확장자로 .test.ts 혹은 .test.js를 갖는 파일만을 테스트 하도록 제한했다.

 

작동 여부 확인을 위해 간단한 테스트 파일을 만들어보자.

 

/*  ex.test.ts  */

describe('let me test this test code', () => {
    it('1 is 1', () => {
        expect(1).toEqual(1)
    })
})

describe 명령어 안에 출력할 문자열과 콜백 함수를 주면 된다.

 

콜백 함수 안에 테스트 해볼 내용과 코드를 넣어줄 수 있다.

 

다음과 같은 명령어를 터미널에 입력해 테스트를 실행할 수 있다.

npx jest

여기서 이 파일을 테스트 하면 'let me test this code'가 출력되면서 콜백함수를 실행해준다.

 

그럼 it문이 실행되면서

 

'1 is 1' 메시지를 출력해주고 다시 콜백 안의 코드를 실행한다.

 

문제가 없다면 passed, 그렇지 않다면 에러가 있다는 것을 알려줄 것이다.

 

여기서는 1이 1과 같은지를 코드에 넣었기 때문에 pass되었다는 결과를 주지만,

 

두 인자를 다른 값을 주면 (가령 toEqual 안에 2를 넣는다던가) 에러가 난다는 것을 알려준다.

 

2. 외부 라이브러리 사용하기

방금 사용한 jest는 운 좋게도 typescript환경 전용 라이브러리가 따로 나와있어 그걸 인스톨해 사용할 수 있었다.

 

이처럼 일부 자주 사용되는 라이브러리의 경우 이미 typescript 전용 라이브러리가 나와있지만

 

그렇지 않은 경우 이를 사용할 수 있는 방법도 마련되어 있다.

 

2개의 라이브러리를 비교해보자.

 

 

첫 번째로 저번에 사용한 crypto-js가 있다.

 

이 라이브러리가 ts 환경 전용으로도 있는지 확인해보기 위해 npm으로 다음과 같이 입력했다.

npm i crypto-js
npm i --save-dev @types/crypto-js

우선 nodeJS 전용 crypto-js를 설치하고, 이어서 ts 환경 전용 @types/crypto-js를 설치해보았다.

 

이 경우, 다행히 ts 전용 라이브러리가 존재했기 때문에 설치가 성공했다.

 

두 번째로 16진수를 2진수로 변형해주는 라이브러리 hex-to-binary를 설치해보자.

npm i hex-to-binary
npm i --save-dev @types/hex-to-binary

두 번째 줄을 실행하면 에러가 있다는 결과를 준다.

 

이는 이 라이브러리는 ts 환경 전용으로는 나오지 않았다는 것을 의미한다.

 

이런 경우 다른 방법을 통해 이 nodeJS 환경 전용 라이브러리를 ts 환경에서 사용하게끔 만들어 줄 수 있다.

 

루트 디렉토리에 @types 폴더를 만들고 이 안에 hex-to-binary.d.ts 파일을 생성한다.

 

파일 안에 다음과 같이 라이브러리를 전역 선언해주면 js와 마찬가지로 라이브러리를 import해 사용할 수 있다.

/*  @types/hex-to-binary.d.ts  */

declare module "hex-to-binary"

이제 src/core/lib 폴더를 만들어 그 안에 다음과 같이 index.ts 파일을 생성후 ts-node로 실행해 잘 되는지 확인해보자.

 

/*  src/core/lib.ts  */

import SHA256 from 'crypto-js/sha256'
import hexToBinary from 'hex-to-binary'

const a : string = '10'

const hash:string = SHA256(a).toString()
console.log(hash)

const binary = hexToBinary(hash)
console.log(binary)

hash, binary는 각각 다음 값이 출력될 것이다.

 

4a44dc15364204a80fe80e9039455cc1608281820fe2b24f1e5233ade6af1dd5

 

01001010010001001101110000010101001101100100001000000100101010000000111111101000000011101001000000

111001010001010101110011000001011000001000001010000001100000100000111111100010101100100100111100011

11001010010001100111010110111100110101011110001110111010101