TypeScript, Node, Express 및 Vue를 사용한 Instagram 구축 - 섹션 1

5부로 구성된 튜토리얼 1이지만 각 튜토리얼은 개별적으로 읽어 Node+Express+TypeScript+Vue API/Vue 웹 앱 설정의 여러 측면을 이해할 수 있다.
이 자습서의 다섯 가지 섹션이 끝나면 다음과 같은 응용 프로그램을 구축하는 방법에 대해 학습합니다.

이동/데스크톱 응용 프로그램을 배우고 싶으세요?여기에는 모바일 애플리케이션(Native Script)이나 데스크톱 애플리케이션(Electron)에 사용할 수 있는 기술과 개념이 기본입니다.나는 그것들을 후속 보도로 삼을 수도 있다.

다른 섹션으로 이동(섹션 1)

유형 스크립트 사용

설정 노드 및 Express API

소개하다.

모든 좋은 응용 프로그램은 반석처럼 튼튼한 기초부터 시작해야 한다. 이것이 바로 본 강좌의 내용이다. 매우 간단한 사진 공유 응용 프로그램을 구축해서 설명하는 것이지 처리해야 할 사항이 아니다(실제로 많이 보이지 않는다).이 강좌를 통해 TypeScript, Node, Express, VueJS를 배워서 본고가 발표될 때 가장 선진적인 버전(가능한 경우 일부 미리 발행판을 사용)을 사용할 수 있습니다.
* 유감스럽게도 Deno은 이미 고려되었지만 아직 시기상조로 사용할 수 없습니다.그러나 이 자습서의 모범 사례를 따르는 경우가 많으면 Deno로 전환하고 대부분의 API 코드 라이브러리를 재사용할 수 있습니다.API와 결합하지 않으므로 모든 뷰 인코딩을 다시 사용할 수 있습니다.
솔직히 인스타그램은 한 강좌에 구축될 수 없기 때문에 부인할 수 없고, 이 글의 제목은 좀 과장됐다.이 프로젝트를 "Basicgram"이라고 합니다.

당신의 환매 협의를 받으세요

클론을 생성하고 tutorial-part1 branch를 체크 아웃하여 구축을 시작할 수 있습니다.

git clone https://github.com/calvintwr/basicgram.git
git checkout tutorial-part1

폴더 구조

폴더는'api'와'보기'로 나뉘는데 전자는 Node+Express 설정을 실행하고 후자는 Vue+패키지 설정을 실행합니다.

시작 - Express(API 엔진) 설치

npx express-generator --view=hbs

HTML처럼 보이기 때문에 새로운 템플릿 문법을 배울 필요가 없습니다. Handlebar (hbs) 를 보기 엔진으로 선택했습니다.Express for API 서비스만 사용하기 때문에 거의 사용하지 않습니다. 그러나 필요할 때 제공됩니다.
최신 Express 5.0(예매판)을 사용하여 모든 모듈 버전을 업데이트할 예정이므로 package.json 파일을 편집하십시오.

{
  "name": "api",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.5",
    "debug": "~4.1.1",
    "express": "~5.0.0-alpha.8",
    "hbs": "~4.1.1",
    "http-errors": "~1.7.3",
    "morgan": "~1.10.0"
  }
}

그것에 불을 붙여 모든 것이 정상인지 아닌지를 보다

npm install
npm start

localhost:3000으로 가면express가 당신에게 인사해야 합니다.

쾌속 노선

당신이 가장 얻고 싶은 택배 제품 중 하나는 express-routemagic 입니다. 이 택배 제품은 파일 하나하나가 아니라 모든 노선을 자동으로 요구합니다. (커다란 택배 프로그램과 산더미처럼 쌓인 노선 코드를 볼 수 있습니다. 이것은 무의미합니다.)그래서 routemagic만 받으면 문제가 해결된다.

npm install express-routemagic --save

라우트를 교체하여 다음을 요구합니다.

var indexRouter = require('./routes/index')
var usersRouter = require('./routes/users')
app.use('/', indexRouter)
app.use('/users', usersRouter)

및:

const Magic = require('express-routemagic')
Magic.use(app, { invokerPath: __dirname }) // need `invokerPath` because we shifting Express into a `src` folder.

이렇게 해서 너는 영원히 노선 문제를 걱정할 필요가 없다.계속합시다.

타자 스크립트로 변환

TypeScript는 더 좋은 코드를 만들기 위해 유용한 특성을 많이 제공합니다.너는 구글로 그것의 장점을 검색할 수 있다.그것도 단점이 있다. 특히 더욱 번거롭고 비유형 스크립트 패키지를 처리해야 한다. (유용하고 시간 검증을 거친 패키지가 많지만, 자신을 유형 스크립트 문법에 이식할 필요성을 보지 못했다.)이 강좌에서 일부 JS 문법을 TypeScript로 바꾸는 것은 고통스럽지 않고 거의 불가능하다.하지만 우리는 계속 전진한다.
현재 노드를 실행할 때 TS를 JS로 컴파일해야 하기 때문에 몇 가지 절차가 필요합니다.

1. 다음과 같이 Express를 "src" 폴더로 포장합니다.

또한 "app.js"가 "app.ts"로 이름이 바뀌었음을 주의하십시오.우리는 이것부터 시작해서 잠시 다른 문제를 토론하지 않을 것이다.아기 걸음.

Tip: I think it is OK to have mixed codebase. Not everything needs to be in TypeScript, plus you will be missing out a lot of really good JS modules. But I'm sure this statement invokes agitation amongst TypeScriptors. Oh well, make your case below.

2. TypeScript 패키지를 설치하고 구성 설정

TypeScript 설치(참고: 모든 npm 명령은 basicgram/api 폴더에서 실행됩니다. api과 view은 기술적으로 두 개의 다른 응용 프로그램입니다. basicgram에서 npm을 실행하면 노드 모듈과 다른 설정을 혼동합니다.)

TypeScript 컴파일러 설정

npm install typescript --save-dev

패키지에서 tsc 명령을 설정합니다.json:

"script": {
    "start": "node ./bin/www", // this came default with express, but we will change it later.
    "tsc": "tsc"
}

구성 파일을 생성하는 tsc를 초기화합니다.

npx tsc --init

tsconfig.json은 현재 basicgram/api에 등장한다.이것은 컴파일러의 행동을 제어할 것이다.일반적으로 두 가지 기본 동작을 변경해야 합니다.

TSC 기본 출력 ES5는 Node에서 실행할 때 불필요합니다. Node를 업그레이드하지 못하게 하는 것이 오래된 애플리케이션인 경우에는 Node Version Manager을 참조하십시오.

은 .ts의 모든 basicgram/api 파일을 검색하고 그 옆에 .js을 생성합니다. 이것은 정말 우리가 원하는 것이 아닙니다.

따라서 다음과 같이 변경되었습니다.

{
    "compilerOptions": {
        "target": "ES6", // you can go for higher or lower ECMA versions depending on the node version you intend to target.
        "outDir": "./dist" // to output the compiled files.
    }, "include": [
        "src" // this tells tsc where to read the source files to compile.
    ]
 }

이제 우리의 명령을 시험해 보자.

npm run tsc

다음 오류가 표시됩니다.

src/app.ts:21:19 - error TS7006: Parameter 'req' implicitly has an 'any' type.

21 app.use(function (req, res, next) {

이것은 TypeScript가 작동할 수 있다는 것을 의미한다. app.ts. 이것은 여전히 자바스크립트이다. 유형 안전을 위반한 것이다. 이것은 당연한 것이다.그래서 전환을 시작했습니다.

3. 코드 변환과 유형 설명

우선, 모든 모듈의 설치 유형에 대한 설명이 필요합니다.먼저 따라와, 내가 나중에 설명할게.그것들은 '@ types/[modulename]' 으로 명명되었다.사용 가능 여부는 패키지 소유자가 제공했는지 여부에 따라 달라집니다.그들 중 많은 사람들이 결코 정말로 괴로워하지 않는다.어떠한 상황에서도 우리는 node과 express을 예로 삼아 // @ts-ignore을 사용하는 다른 모듈의 유형 검사를 건너뛰었다.

npm install @types/node
npm install @types/express

app.ts을 다음으로 변환합니다.
(참고: 이 프레젠테이션에서는 @ts-ignore을 권장하지 않습니다.)

// @ts-ignore
import createError = require('http-errors') // change all `var` to import
import express = require('express')
import { join } from 'path' // this is a Node native module. only using #join from `path`
// @ts-ignore
import cookieParser = require('cookie-parser')
// @ts-ignore
import logger = require ('morgan')
// @ts-ignore
import Magic = require('express-routemagic')
const app: express.Application = express() // the correct type declaration style.
// view engine setup
app.set('views', join(__dirname, 'views'))
app.set('view engine', 'hbs')
app.use(logger('dev'))
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(join(__dirname, 'public')))
Magic.use(app, { invokerPath: __dirname }) // // need to use `invokerPath` because we are not in api's root dir.
// catch 404 and forward to error handler
app.use((req: express.Request, res: express.Response, next: express.NextFunction) => { // type declaration, and changed to use arrow function
    next(createError(404))
})
// error handler
app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => {
    // set locals, only providing error in development
    res.locals.message = err.message
    res.locals.error = req.app.get('env') === 'development' ? err : {}
    // render the error page
    res.status(err.status || 500)
    res.render('error')
})
module.exports = app

What is app.use? It is Express's way of using "middleware" (functions that will run and be given the HTTP request to "read" and do something to it). And it is sequential, and one way is to imagine a HTTP request "falling" through your middlewares: In this case it will first pass through logger('dev'), which logs the request on your terminal, then express.json() which parses the request into json... and so on so forth sequentially.

타자 기초 해설

설치된 @types/express 모듈은 Express 객체의 TypeScript 선언입니다.성명은 사전과 같다. 성명은 무엇이 옳고 그른지 설명한다.app.ts에서 다음 코드를 참조하면 // error handler 코드 블록에 이 사전이 함수 매개 변수에 어떻게 적용되는지 표시됩니다.

(err: Error, req: express.Request, res: express.Response, next: express.NextFunction) => { ... }

이것은 req 매개 변수와 Express'Request object/prototype은'같은 유형을 가지고 있고 더 좋은 단어-형식이 부족하기 때문에'(나는'class'를 사용하지 않겠다. 왜냐하면 Javascript is irrefutably classless).
따라서 함수에서 Request을 그 유형이 아닌 유형으로 사용하려고 하거나 Request에 없는 방법을 사용하려고 하면 TypeScript가 불평할 것입니다.

(req: express.Request) => {

   req.aMethodThatDoesNotExist() // red curlies underlines, and will not compile.

   if (req === 'someString') {} // TypeScript will tell you this is always false.

})

이 모든 것은 본질적으로 TypeScript 유형이 코드를 어떻게 검사하는지에 대한 매우 기본적인 해석이다.
현재 npm run tsc을 다시 실행하면 오류가 발생하지 않을 것입니다.

4. 모든 파일을 /dist로 복사

TSC는 당연히 .ts개의 파일만 컴파일할 것입니다.그러나 .js의 파일을 포함해서 다른 파일을 복사해야 한다. 이 파일들은 변환할 생각이 없거나, 나중에 변환할 것이다. (이것이 바로 묘한 점이다. 모든 것을 TypeScript에 복사할 필요가 없다. 모든 코드가 시간이 걸리는 것은 아니다.)tsc은 좋은 방법(see issue here)을 제공하지 않은 것 같습니다. 따라서 cpy-cli과 del-cli 모듈을 사용하겠습니다.

npm install cpy-cli del-cli --save-dev

package.json에 npm 스크립트를 설정합니다.

prebuild 스크립트, del 셸 명령(del-cli 모듈에서 온)을 사용하여 이전 "/dist"폴더를 삭제합니다.

"prebuild": "del './dist'"

postbuild 스크립트, cpy 셸 명령(cpy-cli 모듈로부터)을 사용하여 나머지 파일을 다음으로 복사

"postbuild": "cpy --cwd=src '**/*' '!**/*.ts' './../dist' --parents"

// --cwd=src means the Current Working Directory is set to "./src"
// '**/*' means all files and folder in the cwd.
// '!**/*.ts' means excluding all typescript files.
// './../dist' means "basicgram/api/dist", and is relative to "src" folder
// --parents will retain the folder structure in "src"

package.json의 스크립트는 다음과 같습니다.

{
    "scripts": {
        "start": "node ./dist/bin/www",
        "build": "npm run tsc",
        "prebuild": "del './dist'",
        "postbuild": "cpy '**/*' '!**/*.ts' './../dist' --cwd=src --parents",
        "tsc": "tsc"
    }
}

이제 모든 것이 정상인지 확인하려면 "src/routes/index.js"로 이동하여 title을 Express에서 Express in TypeScript으로 변경하십시오.

res.render('index', { title: 'Express with TypeScript' })

구축 및 실행:

npm build
npm start

5. 자동 재컴파일 설정

개발에 있어 npm build과 npm start의 운영 효율을 유지하는 것은 매우 낮다.따라서 우리는 nodemon을 사용하여 파일이 바뀔 때 자동으로 서버를 재부팅하고 ts-node을 사용하여 자바스크립트처럼 TypeScript 파일을 실행할 것이다(주의: 이것은 개발 환경에 사용되는 것으로 ./dist으로 출력되지 않는다).

npm install nodemon ts-node --save-dev

package.json에 다음을 추가합니다.

"scripts": {
    "dev": "nodemon --ext js,ts,json --watch src --exec 'ts-node' ./src/bin/www"
}

설명:--exec: 우리는 --exec 로고를 사용합니다. nodemon은 ts-node을 사용하지 않고 node을 사용할 것입니다. 만약에 항목 파일이'.ts'가 아니라면.이 경우 www은 아닙니다.--ext: --exec을 사용할 때 우리는 --ext을 사용하여 변경 사항을 감시할 파일을 수동으로 지정해야 한다.--watch: 이것은 nodemon이 어떤 폴더의 변경 사항을 감시하여 다시 시작할 것인지를 정의합니다.
(공로)

개발 서버를 실행하려면 다음과 같이 하십시오.

npm run dev

너의 API가 다 켜졌어!nodemon이 자동으로 재컴파일되는 방식을 보기 위해 변경을 진행합니다.VueJS를 사용하여 TypeScript에서 뷰 엔진 설정하기를 참조하십시오.

미주:

Getting Started Using TypeScript with Node.js and Express

Typescript compiler file copy issue