노드는 서버 측 Javascript를 작성할 수 있게 해주는 런타임 환경입니다. 실제 출시일인 2011년 이후 널리 채택되었습니다. Javascript 언어에는 강력한 정적 타이핑이 없기 때문에 코드베이스가 커짐에 따라 Javascript를 사용하여 서버 측에서 작성하는 것은 바쁘고 걱정스러울 수 있습니다.

TypeScript는 대규모 JavaScript 프로젝트를 구축하고 관리하는 데 도움이 되는 유형이 지정된(선택 사항) JavaScript 상위 집합입니다. strong static typing , compilation , object-oriented programming 및 interfaces 사용 기능과 같은 추가 기능이 있는 JavaScript로 생각할 수 있습니다.

이후 Typescript는 앱 코드를 더 많이 만드는 객체 지향 언어입니다consistent, clean, simple, testable and reusable. 따라서 대규모 프로젝트를 개발할 때는 TypeScript를 사용하는 것이 좋습니다.

이제 다이빙하자

단계

TypeScript가 없는 경우 전체적으로 설치합니다. 터미널 또는 명령 프롬프트를 엽니다.

npm install -g typescript

NodeTypescript라는 폴더를 만듭니다.

즐겨 사용하는 코드 편집기로 폴더를 엽니다. 내 것은 Visual Studio 코드(VSCode)

입니다.

터미널 또는 명령 프롬프트에서 생성한 폴더 내부로 이동합니다.

cd NodeTypeScript

For those using vscode, you can use the command line in vscode, so you don't need to do the step above

app.ts 만들기

NB. tsc it's used to compile from typescript to javascript.

TypeScript 구성을 설정해 보겠습니다.

tsc --init

NB

At default, the target is ES5, which is deprecated at the moment, ES5 uses var, while ES6+ uses let and const

1. change the target from es5 to es6 in tsconfig.json
2. uncomment the outDir and set it to dist. Note this is where we want our complied version to go to.
3. uncomment the rootDir and set it to dist. Note this is where our typescript files will be stored.
4. uncomment moduleResolution

폴더scr를 만든 다음 이전에 만든 app.ts를 해당 폴더로 이동합니다.
tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "./dist",                        /* Redirect output structure to the directory. */
    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */

    /* Advanced Options */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

노드 package.json을 설정하겠습니다.

npm init --y

종속성과 devDependencies를 설치합시다.

npm i express
npm i D typescript ts-node nodemon @types/node @types/express

스크립트 섹션을 편집하고 start , dev 및 build를 추가합니다.start 이렇게 하면 컴파일 폴더가 시작됩니다.dev 이렇게 하면 typescript 파일이 시작됩니다.build 이것은 typescript 파일을 컴파일하고 dist에 저장합니다.

패키지.json

"scripts": {
    "start": "node dist/app.js",
    "dev": "nodemon src/app.ts",
    "build": "tsc -p ."
},

app.ts를 편집해 보겠습니다.

import express from 'express';

const app = express();

app.get('/', (req, res) => {
    res.send('hello');
});
const PORT = 3000;

app.listen(PORT, () => console.log(`Server Running on port ${PORT}`));

이것은 이 서버를 실행하기 위해 포트 3000에서 실행됩니다. 아래 코드를 사용하십시오

npm run dev

참고: 이렇게 하면 src 폴더에 있는 typescript 파일이 실행됩니다.

app.ts에 typescript 유형을 추가해 보겠습니다.

import express, { Application, Request, Response, NextFunction } from 'express';

const app: Application = express();

app.get('/', (req: Request, res: Response, next: NextFunction) => {
    res.send('hello');
});
const PORT = 5000;

app.listen(PORT, () => console.log(`Server Running on port ${PORT}`));

WOOOOW.. 드디어 엔딩에서

TypeScript 파일을 빌드하여 컴파일해 보겠습니다. 명령줄에서 아래 명령을 실행합니다.

npm run build

이렇게 하면 src 폴더의 모든 파일이 컴파일된 다음 dist 폴더에 덤프됩니다.

우리가 실행할 마지막 명령은

npm start

그러면 dist 폴더의 파일이 실행됩니다.

공유하는 것을 기억해주세요. ❤️❤️❤️