前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React+GraphQL+TypeScript全栈教程

React+GraphQL+TypeScript全栈教程

作者头像
lilugirl
发布2021-01-05 10:08:12
1K0
发布2021-01-05 10:08:12
举报
文章被收录于专栏:前端导学

本教程我们实现一个山寨reddit网站 项目目录名为lireddit

首先编写服务端 ,创建服务端目录 lireddit-server ,初始化项目 安装@types/node ts-node typescript等

代码语言:javascript
复制
mkdir lireddit
cd lireddit 
mkdir lireddit-server
cd lireddit-server
npm init -y
npm i yarn -g
yarn add -D @types/node ts-node typescript 

配置package.json的启动命令 start为

代码语言:javascript
复制
  "scripts": {
   "start":"ts-node src/index.ts"
  }

创建文件 src/index.ts

然后运行命令npx tsconfig.json

代码语言:javascript
复制
npx tsconfig.json

选择y ,选择node

自动创建好的tsconfig.json长这样:

代码语言:javascript
复制
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": [
      "dom",
      "es6",
      "es2017",
      "esnext.asynciterable"
    ],
    "sourceMap": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src/**/*.tsx",
    "./src/**/*.ts"
  ]
}

现在测试yarn start命令是否ok,首先在src/index.ts中添加内容

代码语言:javascript
复制
console.log('hello world');

然后在lireddit-server目录下运行命令

代码语言:javascript
复制
yarn start

运行成功

在package.json中再加入watch命令

代码语言:javascript
复制
 "scripts": {
    "watch":"tsc -w",
    "start": "ts-node src/index.ts"
  },

运行命令 yarn watch

代码语言:javascript
复制
yarn watch

src文件夹下的所有ts文件都会被监控,有任何改动会进行重新编译生成文件到到dist文件夹中

修改package.json中的start命令 ,使用node运行dist文件中的js文件

代码语言:javascript
复制
"scripts": {
    "watch":"tsc -w",
    "start":"node dist/index.js",
    "start2": "ts-node src/index.ts"
  },

重新开启终端 运行yarn start测试是否work

代码语言:javascript
复制
yarn start

安装nodemon

代码语言:javascript
复制
yarn add -D nodemon

在package.json中添加dev命令

代码语言:javascript
复制
 "scripts": {
    "watch":"tsc -w",
    "dev":"nodemon dist/index.js",
    "start":"node dist/index.js",
    "start2": "ts-node src/index.ts"
  },

nodemon也可以执行ts文件, 比如dev2的写法

代码语言:javascript
复制
  "scripts": {
    "watch": "tsc -w",
    "dev": "nodemon dist/index.js",
    "start": "node dist/index.js",
    "start2": "ts-node src/index.ts",
    "dev2":"nodemon --exec ts-node src/index.ts"
  }

安装mikro-orm mikro-orm官网 https://mikro-orm.io/

代码语言:javascript
复制
yarn add @mikro-orm/cli @mikro-orm/core @mikro-orm/migrations @mikro-orm/postgresql pg

创建数据库lireddit,输入命令 createdb lireddit

代码语言:javascript
复制
createdb lireddit
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档