노드에서 개발하다.Typescript 사용 js

안녕하세요!
첫 번째 글에서 우리는 Node 개발의 기본적인 백엔드를 어떻게 사용하는지 토론할 것이다.js와 Typescript는 주요 개발 언어로서 우선 Typescript의 기본적인 측면과 응용 프로그램에서 왜 그것을 기본 언어로 사용하는지 상세하게 설명해야 합니다.
본고에서 우리는 루트, 컨트롤러, 응답으로 기본 백엔드를 구축할 수 있습니다. 다음 글에서 우리는 이 프로그램을 계속 사용해서 Jest 응용 프로그램 테스트를 사용해야 합니다. 덮어쓰는 확률을 높이는 방법과 Typescript와 함께 사용하는 방법을 알게 될 것입니다.

이제 Typescript 개발의 장점을 알아봅시다!

타자 스크립트는 무엇입니까?
Typescript 언어는 Javascript의 형식 초집합입니다. 더 내중적이고 깨끗한 코드를 만들 수 있습니다. 형식 오류는 개발할 때 발견할 수 있습니다. 팀은 잘 모르는 함수 파라미터에서 어떤 값을 전달해야 하는지 이해하도록 도와줍니다.
Javascript 코드와 Typescript 코드를 예로 들겠습니다.

function sum(num1, num2) {

    return num1 + num2;
}

위에 Javascript 코드가 있습니다. 두 값을 합쳐서 결과를 되돌려줍니다. 이것은 간단한 함수입니다. 형식화된 언어를 사용하지 않을 때 문제를 표시할 수 있습니다. 두 가지 다른 방법으로 이 함수를 호출합시다.

// Returns 4
sum(2, 2)

// Returns '22'
sum('2', 2)

sum 함수를 호출하고 두 개의 매개 변수가 숫자일 때 응답은 4가 됩니다. 그러나 이 두 개의 매개 변수 중 일부가 문자열일 때 Javascript는 두 문자열의 concat으로 해석하고 "22"에 응답합니다.
이 간단한 예는 코드가 어떻게 작동하는지 모르는 사람들이 비유형 언어를 이해하기 어려울 수도 있다는 것을 보여준다.이 문제 때문에 마이크로소프트는 유사한 문제를 완화하기 위해 소스 언어인 Typescript를 개발했다.

function sum(num1: number, num2: number) {

    return num1 + num2;
}

위의 코드는 Javascript로 개발된 코드와 같지만, 매개 변수 형식을 통해 모든 개발자가 현재 형식을 보고 함수에 정확한 값을 입력하면 다른 값이 오류를 생성할 수 있습니다.

// Returns 4
sum(2, 2)

// Error in development time
sum('2', 2)

두 번째 호출은sum 함수를 더 효과적으로 사용할 수 없습니다. 오류를 생성합니다. 개발자는 문자열이 아닌 두 개의 숫자를 입력해야 한다는 것을 알게 될 것입니다.
Typescript를 사용하는 또 다른 좋은 점은 최신 ECMAScript 규범에 제공된 새로운 기능을 사용할 수 있고 이전 브라우저나 이전 노드에서 실행할 때 문제가 없다는 것입니다.Typescript 컴파일러가 모든 코드를 ECMAScript 5 규범으로 변환하기 때문에 js 버전입니다.

Typescript를 사용하여 백엔드 구축

이제 Typescript를 주요 언어로 사용하여 기본 백엔드를 구축할 예정입니다. 다음 그림은 솔루션이 어떻게 변하지 않는지 보여 줍니다.

어디:
클래스 - 응용 프로그램에서 사용할 모든 범용 클래스를 포함하는 폴더입니다.
컨트롤러 - 응용 프로그램의 모든 컨트롤러를 포함하는 폴더입니다.
routes - 우리가 정의해야 할 모든 루트를 포함하는 폴더입니다.
서비스 - 외부 API 요청과 같은 다른 시스템과의 통합을 포함하는 폴더입니다.
우리의 응용 프로그램을 구축하기 위해서, 우리는 응용 프로그램을 시작하기 위해 소프트웨어 패키지가 필요하다.다음 json은 구성을 시작하기 전에 설치해야 할 모든 참고 사항을 포함합니다.

{
    "name": "typescript-node-api",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "npm run build && node dist/index.js",
        "build": "gulp scripts",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.7.7",
        "@types/body-parser": "1.17.1",
        "@types/debug": "4.1.5",
        "@types/express": "4.17.2",
        "@types/morgan": "1.7.37",
        "@types/node": "13.1.4",
        "gulp": "4.0.2",
        "gulp-babel": "8.0.0",
        "gulp-typescript": "5.0.1",
        "typescript": "3.7.4"
    },
    "dependencies": {
        "body-parser": "1.19.0",
        "debug": "4.1.1",
        "express": "4.17.1",
        "morgan": "1.9.1"
    }
}

Typescript를 사용하여 코드를 작성해야 하지만 노드는 사용하지 않습니다.js 핵심은 자바스크립트 파일로 내용을 설명하고 모든 명령을 실행해야 합니다. 우선 Gulp 파일을 만들고 설정하여 우리의 Typescript를 자바스크립트로 녹음해야 합니다.
다음은 기본 프로필입니다. gulpfile을 만들어야 합니다.응용 프로그램 루트 디렉터리의 js:

const gulp = require('gulp');
const babel = require('gulp-babel');
const ts = require('gulp-typescript');
const JSON_FILES = ['src/*.json', 'src/**/*.json'];

// Indicates to gulp the typescript configuration
const tsProject = ts.createProject('tsconfig.json');

const scripts = () => {

    return tsProject.src()
        .pipe(tsProject()).js
        .pipe(babel())
        .pipe(gulp.dest('dist'));
};

const watch = () => {

    gulp.watch('src/**/*.ts', scripts);
};

const assets = () => {

    return gulp.src(JSON_FILES).pipe(gulp.dest('dist'));
};

exports.scripts = scripts;
exports.watch = watch;
exports.assets = assets;

const build = gulp.series(gulp.parallel(scripts));
gulp.task('build', build);
gulp.task('default', build);

이 파일에서, 예를 들어 파일이 어디로 전송될지, 그리고 이 복사본에서 만든javascript 파일이 어디에 저장될지 설정이 있습니다.
다음 단계는 tsconfig를 정의하는 것입니다.json, 이 파일에는 Typescripts 코드를 Javascript 코드로 변환하는 컴파일 옵션이 포함되어 있습니다. 다음은 이 파일의 예입니다.

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
    ]
}

이 예에서 compilerOptions는 컴파일러에 ECMAScript 버전을 사용할 버전과 다음 예시의 다른 버전을 표시하는 정보를 포함합니다.
대상 - ECMAScript 버전을 로깅해야 합니다.
모듈 - None, CommonJS, System 등의 모듈 코드 생성 지정
sourceMap- 생성이 필요한 경우파일을 매핑합니다.
exclude 속성은 프로세스가 시작될 때 컴파일할 필요가 없는 모든 폴더를 포함하는 배열입니다. 이 경우 node\u 모듈은 인용된 폴더이기 때문에 필요하지 않습니다.

Typescript 파일 만들기

다음 단계는 Typescript 인코딩을 시작하는 것입니다. 프로그램을 만들어야 합니다."src"폴더에서, 우리는 이 파일에 중간부품과 루트의 설정을 가지고 있으며, 시스템의 다른 점에서 사용할 수 있도록 express를 공개했습니다.

import * as express from 'express';
import * as logger from 'morgan';
import * as bodyParser from 'body-parser';
import { Utility } from './classes/helpers/utility';

class App {

    public express: express.Application;

    constructor() {

        this.express = express();
        this.middleware();
        this.routes();
    }

    private middleware(): void {

        this.express.use(logger('dev'));
        this.express.use(bodyParser.json());
        this.express.use(bodyParser.urlencoded({ extended: false }));
    }

    private routes(): void {

        this.setAllRoutes();
        this.setDefaultRoute();
    }

    private setAllRoutes(): void {

        const utility = new Utility();
        let arrayFileRoutes = utility.readRecursiveDirectory('routes');

        arrayFileRoutes.forEach(file => {

            let routeInstance = require(`./${file.replace(/\.[^/.]+$/, '')}`);
            let fn = `/api${file.replace('routes', '').split('\\').join('/').replace(/\.[^/.]+$/, '')}`;

            this.express.use(fn, routeInstance.default.getRouter());
            console.log(`Route ${fn} --> OK`);
        });
    }

    private setDefaultRoute(): void {

        this.express.get('/api', (req, res, next) => {

            res.status(200).json({
                title: 'API Test',
                version: '1.0.0',
                path: '/api/v1'
            });
        });
    }
}

export default new App().express;

다음과 같이 파이프라인 파일의 위치에 따라 파이프라인이 생성됩니다.

이 이미지에는 루트 폴더가 있습니다. 이 폴더에는 v1과 v2 폴더가 있습니다. 이것은 API 개발에서 흔히 볼 수 있는 모델입니다. 폴더를 만들어서 API 자원의 버전을 지정합니다. 이런 방식으로 우리는 API 동작을 수정할 수 있습니다. 이전에 이 API를 사용한 응용 프로그램에서 오류를 만들지 않습니다.
이 자동 정의 라우팅을 사용하면 응용 프로그램을 시작할 때 로그는 다음과 같습니다.

루트 폴더에 있는 파일의 위치에 따라 모든 루트는 응용 프로그램에서 자동으로 생성됩니다.ts, 폴더 구조를 읽고 필요한 모든 루트를 만듭니다.
마지막으로 색인을 만듭니다.ts 이것은 우리의 응용 프로그램을 최종적으로 시작하는 것을 책임지는 파일입니다.

import * as http from 'http';
import * as debug from 'debug';

import App from './App';

debug('ts-express:server');

const port = normalizePort(process.env.PORT || 3000);
App.set('port', port);

const server = http.createServer(App);
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

console.log(`Online in port ${port}`);

function normalizePort(val: number | string): number | string | boolean {

    let port: number = (typeof val === 'string') ? parseInt(val, 10) : val;

    if (isNaN(port))
        return val;
    else if (port >= 0)
        return port;
    else
        return false;
}

function onError(error: NodeJS.ErrnoException): void {

    if (error.syscall !== 'listen')
        throw error;

    let bind = (typeof port === 'string') ? 'Pipe ' + port : 'Port ' + port;
    switch (error.code) {

        case 'EACCES':
            console.error(`${bind} requires elevated privileges`);
            process.exit(1);
            break;

        case 'EADDRINUSE':
            console.error(`${bind} is already in use`);
            process.exit(1);
            break;

        default:
            throw error;
    }
}

function onListening(): void {

    let addr = server.address();
    let bind = (typeof addr === 'string') ? `pipe ${addr}` : `port ${addr.port}`;

    debug(`Listening on ${bind}`);
}

노선, 컨트롤러, 서비스!

다음은 모든 클라이언트 정보를 조회하는 지점으로서 API 끝에 더 많은 작업을 추가할 수 있는 기본 라우팅입니다.

import * as express from 'express';
import { ClientController } from '../../controllers/v1/ClientController';
import { IRouterApi } from '../../classes/interfaces/IRouterApi';

class ClientRouter implements IRouterApi {

    public getRouter(): express.Router {

        const clientController = new ClientController();

        let router = express.Router();
        router.route('/').get(clientController.getClients);

        return router;
    }
}

export default new ClientRouter();

그리고 우리의 IRouterApi 인터페이스:

import { Router } from "express";

export interface IRouterApi {

    getRouter(): Router;
}

이제 라우팅과 인터페이스를 정의했습니다. 우리는 컨트롤러와 서비스를 만들어야 합니다. 왜냐하면 우리는 우리의 노드를 테스트하고 클라이언트의 라우팅이 어떻게 되돌아오는지 볼 수 있기 때문입니다. 클라이언트 컨트롤러를 봅시다.

import { NextFunction, Request, Response } from "express";
import { ClientService } from '../../services/v1/ClientService';

export class ClientController {

    public getClients(req: Request, res: Response, next: NextFunction): void {

        const clientService = new ClientService();
        res.status(200).json(clientService.searchClients());
    }
}

이 파일에서 기본적으로 모든 클라이언트를 검색하는 기본 함수를 만들었습니다. 클라이언트 서비스를 실례화하고 프로그램의 응답에서 이 값을 되돌려줍니다.

export class ClientService {

    public searchClients(): Array<any> {

        return [
            {
                message: 'Client name'
            }
        ];
    }
}

마지막으로 클라이언트 서비스입니다. 이 함수는 간단한 대상이 있는 그룹을 되돌려줍니다.

테스트

Typescript를 사용하여 첫 번째 기본 백엔드를 만든 후에 응답이 우리의 요구에 부합되는지 테스트해야 합니다. 예시에서 Postman을 사용하지만, 당신이 좋아하는 프로그램을 사용할 수 있습니다.

대답하다.

돌아올게요!

다음 글에서 우리는 이 Typescript 기본 백엔드를 사용하여 다른 기술과 개념을 응용할 것이다.나는 너희들 모두가 이 게시물을 좋아하길 바란다. 나는 곧 너희들을 만날 것이다.
안녕히 가세요.

공구서류
[1] https://www.typescriptlang.org/
[2] https://ionicframework.com/docs/v3/developer-resources/typescript/
[3] https://medium.com/swlh/the-major-benefits-of-using-typescript-aa8553f5e2ed
[4] https://www.typescriptlang.org/docs/handbook/compiler-options.html