Express를 통한 TypeScript 향상
28417 단어 nodetypescriptjavascripttutorial
안녕, 안녕!
오늘 우리는 이 두 가지 기술을 사용하여 하나를 만들 것이다
Rest API.너는 이것이 다른 것 Rest API 과 같다고 생각할 수 있지만, 이 예에서 우리는 대량의 TypeScript 고급 기능을 사용할 것이다. 이것은 이 시범에 진정으로 도움이 될 것이다.그러나 비즈니스 로직 대신 TypeScript를 사용하는 것에 더 많은 관심을 기울일 것입니다.이 예에서는 TypeScript에 많은 기능을 제공하므로 VScode를 사용하는 것이 좋습니다.우리가 제작할 API는 개에 초점을 맞출 것이다.우리의 단점은 아래와 같다.
GET /api/v1/dogs
GET /api/v1/dogs/:id
POST /api/v1/dogs
PUT /api/v1/dogs/:id
DELETE /api/v1/dogs/:id
우선 폴더를 만들어서 마음대로 이름을 지을 수 있습니다.내 express ts api를 명명할 것입니다.
mkdir express-ts-api
npm init --y
npm i -D typescript
npm i -D @types/express @types/node
npm i express
이 명령 사용하기
tsc -init
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "./build",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
}
}
import * as express from 'express';
// instead of this
// import express from 'express';
{
"name": "express-ts-api",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/express": "^4.17.13",
"@types/node": "^16.11.4",
"typescript": "^4.4.4"
},
"dependencies": {
"express": "^4.17.1"
}
}
자, 시작합시다.src 디렉토리 만들기
mkdir src
import express from 'express'
const app = express()
interface Dog {
name: string
breed: 'labrador' | 'german shepherd' | 'golden retriever'
adopted_at: Date | null
birth_date: Date | null
}
app.get<Params,ResBody,ReqBody,ReqQuery,Locals>('/api/v1/dogs',
(req,res) => {
})
우리는express가 제공하는 기본 형식이 아니라express에서 제공하는 형식을 제공할 것입니다.
/api/v1/dogs 가져오기
app.get<
{},
{ data: Dog[], message: string },
{},
{ page: number, limit: number, breed: 'labrador' | 'german shepherd' | 'golden retriever' }>
('/api/v1/dogs', (req,res) => {
// your implementation
})
GET/api/v1/dogs/：id
app.get<
{ id: number },
{ data: Dog | null, message: string },
{}>
('/api/v1/dogs/:id', (req,res) => {
// your implementation
})
POST/api/v1/dogs
app.post<
{},
{ data: Dog & { id: number }, message: string },
Dog,
{}>
('/api/v1/dogs', (req,res) => {
// your implementation
})
PUT/api/v1/dogs/：id
app.put<
{ id: number },
{ data: Dog & { id: number }, message: string },
Partial<Dog>,
{}>
('/api/v1/dogs', (req,res) => {
// your implementation
})
/api/v1/dogs/:id 삭제
app.delete<
{ id: number },
{ data: Dog & { id: number }, message: string },
{},
{}>
('/api/v1/dogs', (req,res) => {
// your implementation
})
나는 우리가 끝났다고 생각한다.
나는 우리가 아직 끝나지 않았다고 생각한다.우리는 줄곧 우리 자신의 사용자 정의 유형을 직접 전달하고 있는데, 그 중 일부 유형은 우리의 일부 방법에서 중복되어 우리의 코드를 깨끗하게 하지 못하게 한다.이 점을 바꾸자.
interface BaseParams<IDType = number> {
id: IDType
}
interface DogDetails {
name: string
breed: DogBreed
adopted_at: Date | null
birth_date: Date | null
}
interface APIResponse<Data> {
data: Data
message: string
}
interface Pagination {
page: number
limit: number
breed: DogBreed
}
interface Empty {
}
type DogBreed = 'labrador' | 'german shepherd' | 'golden retriever'
type Dog = BaseParams & DogDetails
BaseParams<string> 를 전달해서 id에 다른 종류를 제공할 수 있습니다.DogDetails 인터페이스는 ReqBody 위치에 사용할 유형입니다.인터페이스 APIresponse는 ResBody 위치에 사용할 유형입니다. 이 유형도 하나의 범위가 있습니다. 유형BaseParams와 같이 범위ResultType 형식은 데이터 속성의 유형이 될 것입니다.인터페이스 페이지 나누기는 Position ReqQuery에 사용할 유형입니다. 이 유형에는 하나의 속성이 있으며, 다른 사용자 정의 형식을 인용합니다. 이 유형에 대해 곧 토론할 것입니다.interface Empty는 빈 객체에 사용할 지원 인터페이스 유형입니다.Dogbride 유형 별칭도 페이지 나누기 인터페이스와 DogDetails 인터페이스에서 참조하는 도우미 유형입니다.마지막으로 Dog 유형 별명은 두 인터페이스BaseParams와 DogDetails의 조합으로 우리는 &intersection 유형을 사용하여 이 점을 실현했다.만약 우리가 코드에 이 모든 새로운 유형을 적용한다면, 우리의 코드는 반드시 이와 같아야 한다.
import express from 'express'
const app = express()
interface BaseParams<IDType = number> {
id: IDType
}
interface DogDetails {
name: string
breed: DogBreed
adopted_at: Date | null
birth_date: Date | null
}
interface APIResponse<Data> {
data: Data
message: string
}
interface Pagination {
page: number
limit: number
breed: DogBreed
}
interface Empty {
}
type DogBreed = 'labrador' | 'german shepherd' | 'golden retriever'
type Dog = BaseParams & DogDetails
app.get<Empty, APIResponse<Dog[]>, Empty, Pagination>('/api/v1/dogs', (req, res) => {
// your implementation
})
app.get<BaseParams, APIResponse<Dog | null>, Empty, Empty>('/api/v1/dogs/:id', (req, res) => {
// your implementation
})
app.post<Empty, APIResponse<Dog>, DogDetails, Empty>('/api/v1/dogs', (req, res) => {
// your implementation
})
app.put<BaseParams, APIResponse<Dog>, Partial<DogDetails>, Empty>('/api/v1/dogs', (req, res) => {
// your implementation
})
app.delete<BaseParams, APIResponse<Dog>, Empty, Empty>('/api/v1/dogs', (req, res) => {
// your implementation
})
나는 우리가 정말 끝났다고 생각한다.
이 글을 읽어 주셔서 감사합니다.
좋은 하루 되세요.😃!.
Reference
이 문제에 관하여(Express를 통한 TypeScript 향상), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/macmacky/get-better-with-typescript-using-express-3ik6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
