💬 오늘은 어제 배웠던 블록체인의 블록을 타입스크립트로 만들어보았다!
npm init -y
npm i -D typescript ts-node @types/node
이렇게 설치를 마치고
index.ts 파일을 만들어 아무거나 써보자
그 후 터미널에서
npx tsc index.ts
명령어를 입력하면 타입스크립트 파일이 빌드되어 자바스크립트로 변환되어 실행된다
리액트를 했을 때 웹팩을 통해 전체 파일이 번들링되어 자바스크립트로 변환되어 브라우저에서 실행이 되었던 것처럼
별도의 런타임이 없는 타입스크립트 역시 자바스크립트로 변환되어 실행되며 이에 대한 설정을 해주는 것이 tsconfig.json 파일이다.
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"strict": true,
"baseUrl": ".",
"typeRoots": [
"./node_modules/@types",
"./@types"
],
"paths": {
"@core/*": [
"src/core/*"
],
"*": [
"@types/*"
]
}
}
}
파일 내 각 속성값들의 의미는 다음과 같다.
npm i express
npm i --save-dev @types/express
라이브러리 뿐만 아니라 타입까지 설치해줘야 타입스크립트 상에서 에러가 나지 않는다!
그런데 유명하지 않은 라이브러리는 따로 타입을 제공하지 않는 경우가 있다. 그럴때는
@types 디렉토리 생성 후 내부에 [라이브러리명].d.ts 파일을 만들어준 뒤
declare module [라이브러리명];
이렇게 써주면 된다. 단, 타입은 any로 들어가버림..
얘네는 코드 스타일을 맞추기 위해 사용하는 확장 프로그램이다.
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier
eslint와 prettier를 설치해준다.
.eslintrc
{
"extends": ["plugin: prettier/recommended"]
}
{
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true,
"traillingComma": "all",
"semi": true
}
객체지향적으로 코드를 짜면 작은 단위기능을 테스트하기 힘들다는 단점이 있다. 이를 위해 테스트가 가능하게 해주는 프레임워크인 jest
를 사용한다
npm i -D ts-jest @types/jest babel-core @babel/preset-typescript @babel/preset-env
babel.config.js
module.exports = {
presets: [
["@babel/preset-env", {
targets: {node: 'current'}
}],
'@babel/preset-typescript'
]
}
import type { Config } from '@jest/types';
const config: Config.InitialOptions = {
moduleFileExtensions: ['ts', 'js'],
testMatch: ['<rootDir>/**/*.test.(js|ts)'],
moduleNameMapper: {
'^@core/(.*)$': '<rootDir>/src/core/$1',
},
testEnvironment: 'node',
verbose: true,
preset: 'ts-jest',
};
export default config;