Hardhat+TypeScript(+React) 설정

주식회사CauchyE저는 엔지니어입니다.
최근 이더리움과 관련해 타입 스크립트의 친선적인 환경 구축 방법을 공유하고 싶다고 밝혔다.

TL;DR

Type Script 유형이 자동으로 생성되면 기분이 좋아진다

자동으로 생성된 유형과 일치하려면 의존하는 라이브러리의 버전

을 주의하십시오

Hardhat에서 Solidity+Type Script 환경 구축

hardhat의 v2.6 이후 Type Script 환경의 Scaffold가 추가되었습니다.홀가분하네.

오늘6.7에서는 프로그램 라이브러리에 의존하여 이런 프로그램을 설치한다.
(ESlint은 긴밀하게 연결되어 있음)

  "devDependencies": {
    "@nomiclabs/hardhat-ethers": "^2.0.2",
    "@nomiclabs/hardhat-etherscan": "^2.1.7",
    "@nomiclabs/hardhat-waffle": "^2.0.1",
    "@typechain/ethers-v5": "^7.2.0",
    "@typechain/hardhat": "^2.3.1",
    "@types/chai": "^4.2.22",
    "@types/mocha": "^9.0.0",
    "@types/node": "^16.11.6",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "chai": "^4.3.4",
    "dotenv": "^10.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-promise": "^5.1.1",
    "ethereum-waffle": "^3.4.0",
    "ethers": "^5.5.1",
    "hardhat": "^2.6.7",
    "hardhat-gas-reporter": "^1.0.4",
    "prettier": "^2.4.1",
    "prettier-plugin-solidity": "^1.0.0-beta.13",
    "solhint": "^3.3.6",
    "solidity-coverage": "^0.7.17",
    "ts-node": "^10.4.0",
    "typechain": "^5.2.0",
    "typescript": "^4.4.4"
  }

TypeChain이 들어가기 때문에 구조기의 유형을 자동으로 생성할 수 있습니다.시험을 쓸 때 보충이 끝나면 매우 편리하다.

Hardhat과 Hardhat-React로 Solidity+Type Script+React 환경 구축

hardhat-reactSolidity 기반의sol 파일을 기반으로 하는 Hardhat 플러그인으로 사용자가 hooks를 기반으로 설정에 사용할 클라이언트를 자동으로 생성할 수 있습니다.
위에 있는 Scaffold에 Hardhat-react를 직접 추가했으면 좋았을 텐데 잘 되지 못해서 아쉽다...hardhat-react 문서에 기재된 의존 프로그램 라이브러리가 최근에 업데이트된 것 같습니다. 아마도 이런 것 같습니다. 하지만 지금은 순조롭지 않습니다.
따라서 하드hat-react가 준비한 보일러판을 이용하여 환경을 구축한다.
https://github.com/symfoni/hardhat-react-boilerplate

보일러판도 유형 오류가 발생할 수 있다

문서대로 설정해 보았을 뿐인데, 그렇게 개발 서버를 시작하는 것도 형식 오류로 바뀌었다.
문제는 Hardhat-react에서 생성된 파일 내에서Provider의 유형이 미묘하게 다르다는 점이다.

이곳의 해결은 어렵지만 눈에 띄는 것은 간단하다. 앞부분과 하드 측ethers의 버전이 다르기 때문이다.

/root
 "ethers": "^5.0.21"

/frontend
 "ethers": "^5.0.17"

버전을 준비한 후 개발 서버가 순조롭게 시작되었고 환경 구축이 완성되었다.

총결산

이번에 React 환경 구축에서 시도한 하드 해트릭은 라이브러리의 업데이트가 따라가지 못하고 라이브러리에 의존하는 것이 낡았다.
기능으로 보기 편하기 때문에 버전 업그레이드가 기대됩니다.
하지만 프로그램 라이브러리에 의존하면 이번처럼 매혹적인 점이 있기 때문에 리액트에 있는 고객은 TypeChain을 이용해서 직접 만들 수 있다고 생각합니다.
이번엔 환경 구축일 뿐이기 때문에 이 위에서 간단한 앱을 실시한다는 기사를 최근 공개할 수 있을 것 같다.

CauchyE 같이 일하는 사람 기다리고 있어!

블록체인과 데이터 과학에 관심 있는 엔지니어를 적극 채용하고 있습니다!
다음 페이지에서 응모를 기다리십시오.
https://cauchye.com/company/recruit