JiSoo's Devlog
[타입스크립트로 블록체인 만들기] Typescript Blockchain 본문
package.json 초기화
npm init -y
typescript 설치
npm i -D typescript
tsconfig.json 파일 만들기
code tsconfig.json
tsconfig.json 파일이 있으면 vs code는 우리가 타입스크립트로 작업한다는 것을 즉시 알게 된다
{
"include":[
"src"
]
}
include 배열에는 자바스크립트로 컴파일하고 싶은 모든 디렉터리 넣기
-> 타입스크립트가 src의 모든 파일을 확인한다는 것을 의미
compilerOptions에서 outDir라는 키를 만들어주는데 이 키는 자바스크립트 파일이 생성될 디렉터리를 저장한다
타입스크립트는 컴파일러니까 index.ts 같은 파일들을 일반적인 자바스크립트로 컴파일시켜준다
{
"include": ["src"],
"compilerOptions": { "outDir": "build" }
}
"scripts": {
"build": "tsc"
},
타입스크립트가 코드를 컴파일해서 낮은 버전의 자바스크립트 코드로 바꿔준 것
{
"include": ["src"],
"compilerOptions": { "outDir": "build", "target": "ES5" }
}
target은 어떤 버전의 자바스크립트로 내가 타입스크립트를 컴파일하고 싶은지를 나타낸다
lib은 타입스크립트에게 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는 지를 지정할 수 있다
target 런타임 환경이 무엇인지 지정
프로그램이 브라우저에서 실행되면 lib에 'DOM' 유형 정의 가능
DOM: window, document 등
타입스크립트는 내장된 자바스크립트 API를 위한 기본적인 타입 정의는 가지고 있다
타입 정의는 타입스크립트에게 몇몇 자바스크립트 코드의 타입을 설명해 주기 위해 사용하는 것
타입스크립트에게 우리가 불러올 자바스크립트 함수의 모양을 설명하려면 타입 정의가 필요
정의 파일은 자바스크립트 코드의 모양을 타입스크립트에 설명해 주는 파일
strict는 모든 엄격한 타입 검사 옵션 활성화
d.ts의 정의 파일에서 호출 시그니처, 즉 타입만 써주면 된다
allowJs를 true로 해주면 타입스크립트 안에 자바스크립트를 허용한다는 의미
코드가 엄청 많을 때는 파일을 그냥 자바스크립트 파일인 채로 두는 게 좋다
자바스크립트에 보호장치를 더하는 방법은 코멘트 더하는 것
// @ts-check
↑ 타입스크립트 파일한테 자바스크립트 파일을 확인하라고 알리는 것
JSDoc은 코멘트로 이루어진 문법
@ts-check
자바스크립트 코드에 JSDoc 코멘트만 더하면 타입스크립트가 도와준다
// @ts-check
/**
* Initializes the project
* @param {object} config
* @param {boolean} config.debug
* @param {string} config.url
* @returns boolean
*/
export function init(config) {
return true;
}
/**
* Exits the program
* @param {number} code
* @returns number
*/
export function exit(code) {
return code + 1;
}
워크 플로우는 'npm run build && npn run start' 이런 식으로 실행해야 한다
"scripts": {
"build": "tsc",
"start": "node build/index.js"
},
ts-node 설치
npm i -D ts-node
빌드 없이 타입스크립트 실행 가능
nodemon 설치
npm i nodemon
자동으로 커맨드를 재실행시켜 일일이 커맨드를 다시 실행할 필요 X
esModuleInterop는 CommonJS 모듈을 ES6 모듈 코드베이스로 가져오려고 할 때 발생하는 문제 해결
DefinitelyTyped - 타입 정의를 위한 레포지토리
https://github.com/DefinitelyTyped/DefinitelyTyped
nodejs를 위한 타입 전부 설치
npm i -D @types/node
axon에 대한 타입 정의 설치
npm i -D @types/axon
import crypto from "crypto";
interface BlockShape {
hash: string;
prevHash: string;
height: number;
data: string;
}
class Block implements BlockShape {
public hash: string;
constructor(
public prevHash: string,
public height: number,
public data: string
) {
this.hash = Block.calculateHash(prevHash, height, data);
}
static calculateHash(prevHash: string, height: number, data: string) {
const toHash = `${prevHash}${height}${data}`;
return crypto.createHash("sha256").update(toHash).digest("hex");
}
}
class Blockchain {
private blocks: Block[];
constructor() {
this.blocks = [];
}
private getPrevHash() {
if (this.blocks.length === 0) return "";
return this.blocks[this.blocks.length - 1].hash;
}
public addBlock(data: string) {
const newBlock = new Block(
this.getPrevHash(),
this.blocks.length + 1,
data
);
this.blocks.push(newBlock);
}
public getBlocks() {
return [...this.blocks];
}
}
const blockchain = new Blockchain();
blockchain.addBlock("First one");
blockchain.addBlock("Second one");
blockchain.addBlock("Third one");
blockchain.addBlock("Fourth one");
console.log(blockchain.getBlocks());
'Frontend > Typescript' 카테고리의 다른 글
[Udemy React 완벽 가이드] 리액트 + TypeScript (1) | 2024.06.04 |
---|---|
[타입스크립트로 블록체인 만들기] Classes and interfaces (0) | 2024.04.17 |
[타입스크립트로 블록체인 만들기] Functions (0) | 2024.03.31 |
[타입스크립트로 블록체인 만들기] Overview of Typescript (0) | 2024.03.31 |