Javascript에서 Typescript까지의 스크립트 작성

46432 단어 babelnodetypescriptjavascript

왜?


스크립트는 일반적으로 어느 정도의 수정과 조정이 있어야만 필요한 출력을 얻을 수 있다.Javascript로 작성하면 개발자는 입력과 출력의 모양을 기억해야 합니다.나는 개인적으로 내가 얻은 응답을 회상하기 위해 출력을 기록해야 한다.지금까지 대부분의 자바스크립트 커뮤니티는 Typescript로 전환하는 장점을 깨달았다.연수를 원하시면 방문Serokell's post

우리 뭐 하는 거야?


우리는 the covid tracking api 에서 입력을 가져오고 도표에 그릴 준비를 위해 약간 다른 방식으로 포맷할 것이다.다음은 하루에 미국에서 생산되는 예이다

샘플 입력


[
 {
   "date":20200916,
   "states":56,
   "positive":6597783,
   "negative":81976741,
   "pending":10587,
   "hospitalizedCurrently":30278,
   "hospitalizedCumulative":390624,
   "inIcuCurrently":6308,
   "inIcuCumulative":18961,
   "onVentilatorCurrently":1651,
   "onVentilatorCumulative":2090,
   "recovered":2525573,
   "dateChecked":"2020-09-16T00:00:00Z",
   "death":188802,
   "hospitalized":390624,
   "lastModified":"2020-09-16T00:00:00Z",
   "total":88585111,
   "totalTestResults":88574524,
   "posNeg":88574524,
   "deathIncrease":1202,
   "hospitalizedIncrease":1517,
   "negativeIncrease":625601,
   "positiveIncrease":40021,
   "totalTestResultsIncrease":665622,
   "hash":"e66c44b8b93e51c84321a2933d4031d75084a04c"
 },
 ...
]

견본 출력


[
 {
   "x":09-16-2020,
   "y":{
      "positive":6597783,
      "negative":81976741,
      "pending":10587,
      "hospitalizedCurrently":30278,
      "hospitalizedCumulative":390624,
      "inIcuCurrently":6308,
      "inIcuCumulative":18961,
      "onVentilatorCurrently":1651,
      "onVentilatorCumulative":2090,
      "recovered":2525573,
      "death":188802,
      "hospitalized":390624,
      "total":88585111,
      "totalTestResults":88574524,
      "posNeg":88574524,
      "deathIncrease":1202,
      "hospitalizedIncrease":1517,
      "negativeIncrease":625601,
      "positiveIncrease":40021,
      "totalTestResultsIncrease":665622,
 },
 ...
]
기능이 완비된 Javascript 스크립트부터가 아니라...스크립트를 실행하고 Typescript로 전환하여 구조를 구축하고 미래의 변경 사항을 기록합니다

Javascript 예제 시작


프로젝트 공간 설정


mkdir script-in-ts && cd script-in-ts
그리고 package.json 를 초기화하면 필요한 스크립트와 의존 항목을 지정할 수 있습니다
npm init --y

우리는 우선 스크립트를 자바스크립트에서 실행할 것입니다. 따라서 필요한 의존항을 설치할 것입니다


npm install @babel/core @babel/node @babel/preset-env
babel는 우리로 하여금 현대javascript를 번역할 수 있게 한다.@babel/core 및 @babel/node 모두 이를 가능하게 하고, @babel/preset-env 노드 버전이나 브라우저 지원 같은 내용을 지정할 수 있습니다.

자바스크립트를 실행하기 위해 babel 설정


파일 추가.babelrc
touch .babelrc && code .babelrc
다음 설정을 붙여넣어 노드 버전 10 사용을 지정합니다.이것은 우리로 하여금 spread operator 같은 내용을 방문할 수 있게 할 것이다. 당신은 곧 이곳에서 보게 될 것이다
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ]
  ]
}

우리는 이미 창설할 준비가 되어 있습니다!


제작 index.js 파일
touch index.js && code index.js
hello world 예제부터
console.log("hello world")

가방을 열다.json과 같은 시작 스크립트 추가


{
...
   "scripts": {
       "start": "babel-node index.js",
      ...
   },
...
}

스크립트가 실행되고 모든 내용을 Typescript로 이동하도록 설정합니다.


npm run start
  hello world // expected output

Javascript를 Typescript로 마이그레이션


종속 항목 설치


npm install typescript @babel/preset-typescript @babel/plugin-transform-typescript
첫 번째 의존항은 Typescript 자체이고, 두 번째 의존항은 babel 전송 Typescript의 사전 설정을 사용하는 것이다
이러한 Typescript 사전 설정을 포함하려면 업데이트.babelrc가 필요합니다.
{
  "presets": [
    "@babel/preset-typescript",
    [
     ...
    ]
  ]
}

tsconfig를 만듭니다.json 파일


npx tsc --init

색인 이름을 바꿉니다.인덱스송전 시스템


mv index.js index.ts

패키지의 시작 스크립트를 업데이트합니다.json


{
...
"scripts": {
 "start": "babel-node index.ts --extensions '.ts'",
 ...
},
...
}
비록 우리가 @babel/preset-typescript 파일을 추가했지만, babel은 여전히 .ts 파일을 허용하는 규범이 필요합니다.

babel 컴파일을 검증하고 인덱스를 실행합니다.송전 시스템


npm run start
hello world // expected output

🤞 큰 단계는 아닌 것 같지만...예.babel을 자주 설정하지 않으면, 이 설정 설명을 잊어버려서 검색 기능을 발휘할 수 있습니다

Typescript로 손 더럽혀.👨🏻‍💻


만약 정의 유형과 인터페이스에 익숙하지 않다면, 여기에서 잠시 휴식을 취하고, 익숙함Javascript과 Typescript 사이의 미세한 차이를 익히는 것을 강력히 권장합니다.나는 익숙할 때 이것devhints cheatsheet을 좋아한다.

데이터 가져오기


우리는 json 형식으로 United States COVID-19 impact 의 응답을 입력할 것입니다.
원하는 캡처 라이브러리를 마음대로 사용할 수 있습니다.사용node-fetch
npm install node-fetch @types/node-fetch
응답 가져오기 및 기록
import fetch from "node-fetch"
;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json = await response.json() //
  console.log(json)
})()

입력 입력


콘솔은 이와 유사한 내용을 기록해야 합니다...
[
 {
   "date":20200916,
   "states":56,
   "positive":6597783,
   "negative":81976741,
   "pending":10587,
   "hospitalizedCurrently":30278,
   "hospitalizedCumulative":390624,
   "inIcuCurrently":6308,
   "inIcuCumulative":18961,
   "onVentilatorCurrently":1651,
   "onVentilatorCumulative":2090,
   "recovered":2525573,
   "dateChecked":"2020-09-16T00:00:00Z",
   "death":188802,
   "hospitalized":390624,
   "lastModified":"2020-09-16T00:00:00Z",
   "total":88585111,
   "totalTestResults":88574524,
   "posNeg":88574524,
   "deathIncrease":1202,
   "hospitalizedIncrease":1517,
   "negativeIncrease":625601,
   "positiveIncrease":40021,
   "totalTestResultsIncrease":665622,
   "hash":"e66c44b8b93e51c84321a2933d4031d75084a04c"
 },
 ...
]
우리 인터페이스를 만들어서 그것을 복제합시다!
import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json = await response.json() //
  console.log(json)
})()
위의 인터페이스는 하나의 그룹 USInputDay 이기 때문에 이 유형을 json 응답 상수에 적용하면
import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()
  console.log(json)
})()
저희가 이제 Typescript로 전환하는 장점을 체험할 수 있습니다!

자동 완성은 앞으로 입력이나 출력을 변경하는 요청을 쉽게 합니다.우리는 파일이 어떤 모양인지 이해하기 위해 더 이상 기록할 필요가 없다.

입력 출력


입력 형식에 비해 x 및 y 개의 값으로 나누어 새로운 형식으로 변환하는 방법을 보여 줍니다
import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()
})()
위에서 우리는 USInputDay 인터페이스를 다시 사용했고, Omit 실용 프로그램을 사용하여 우리가 설명하고 싶지 않은 키를 삭제했다

출력 포맷하기


지금 우리가 해야 할 일은 입력을 출력 구조로 포맷하는 것이다
import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()

  const output: USOutputDay[] = json.map(
    ({ date, dateChecked, lastModified, hash, ...theRest }) => ({
      x: date,
      y: theRest
    })
  )
})()
나는 이곳을 좀 좋아해서 사용했다spread operator.출력 형식이 입력에서 몇 개의 키만 제외된 것을 알고 있기 때문에 제가 원하는 키를 추출했습니다. ...theRest 출력을 만족시켜야 하는 대상의 모든 나머지 키입니다.

파일에 쓰기


마지막 걸음...장담합니다.😉
가져오기file system 및 출력 파일에 쓰기
import fetch from "node-fetch"
import { writeFileSync } from "fs"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()

  const output: USOutputDay[] = json.map(
    ({ date, dateChecked, lastModified, hash, ...theRest }) => ({
      x: date,
      y: theRest
    })
  )

  writeFileSync("formatted.json", JSON.stringify(output)) 
})()
그렇습니다!현재 스크립트는 새로운 변경을 하거나 원래대로 사용할 준비가 되어 있습니다!

만약 당신이 언제든지 길을 잃었다면, 두려워하지 마세요. here 는 하나의 저장소입니다. 모든 것을 보여 줍니다!

총결산


우리는 처음부터 프로젝트를 설정하고 babel을 사용하여 기본적인 Javascript 파일을 실행하는 방법을 배웠다.그리고 우리는 자바스크립트를 Typescript로 변환하고 babel을 설정하여 Typescript 파일을 처리합니다.다음으로 우리는 node-fetch를 사용하여 파일을 얻는 방법을 배웠다.우리는 입력과 출력을 제어하기 위해 유형/인터페이스를 구축한 경험을 얻었다. 예를 들어 자동으로 완성하는 것이다.마지막으로 우리는 fs 를 사용하여 내용을 파일에 쓰는 것을 배웠다.
222.[R]Count Complete Tree Nodes
알고리즘 노트 연습

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage