TS&&Node：项目实战笔记
一、项目初始化
-
首先先初始化一个npm项目
npm init -
其次，在项目目录中初始化tsconfig.json文件
tsc --init -
修改tsconfig.json文件，设置根目录和输出目录:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "outDir": "./dist", // 输出目录文件夹名称可自己设定 "rootDir": "./src", // 根目录文件夹名称可自己设定 "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } -
创建根目录和输出目录后，修改package.json里的命令，使调试时更加容易；
{ "name": "ts-node", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { // 先将ts文件编译后，在执行js文件 "start": "tsc && node dist/index.js" }, "author": "", "license": "ISC" }
二、开始项目
1. 安装依赖
1. 请求依赖
npm install request --save-dev
npm install @types/request --save-dev
参考地址：https://github.com/request/request
2. 排序依赖
npm install lodash --save-dev
npm install @types/lodash --save-dev
3. express
npm install express --save-dev
npm install @types/express --save-dev
2. 创建实体类
// User.ts
import {
Repo} from "./Repo"
export class User {
login: string;
bio: string;
name: string;
avatar_url: string;
repos : Repo[];
constructor(responseUser: any) {
this.login = responseUser.login;
this.bio = responseUser.bio;
this.name = responseUser.name;
this.avatar_url = responseUser.avatar_url;
this.repos = [];
}
}
// Repo.ts
export class Repo{
name : string;
size : string;
language : string;
description : string;
constructor(repo : any){
this.name = repo.name;
this.size = repo.size;
this.language = repo.language;
this.description = repo.description;
}
}
3. 创建控制类
- 创建控制类并引入实体类
import * as request from "request";
import {
User } from "./User";
import {
Repo } from "./Repo";
const config = {
headers: {
"User-Agent": "request",
},
json: true,
};
export class GithubApiService {
getUserInfo(username: string, callback: (user: User) => void) {
request.get(
`https://api.github.com/users/${
username}`,
config,
(err: any, res: any, body: any) => {
let user: User = new User(body);
callback(user);
}
);
}
getReposInfo(username: string, callback: any) {
request.get(
`https://api.github.com/users/${
username}/repos`,
config,
(err: any, res: any, body: any) => {
let repo: Repo[] = body.map((repo: any) => new Repo(repo));
callback(repo);
}
);
}
}
4. 实例化
import {
GithubApiService } from "./GithubApiService";
import {
User } from "./User";
import {
Repo } from "./Repo";
import * as Lodash from "lodash";
import express from "express";
import url from "url"
// 使用express
const app = express();
app.get("/github", (req, res) => {
// 获取url参数
let username : any= url.parse(req.url,true).query.username;
let api: GithubApiService = new GithubApiService();
api.getUserInfo(username, (user: User) => {
api.getReposInfo(user.login, (repos: Repo[]) => {
// 从大到小排序
let sortRepos = Lodash.sortBy(repos, [(repo: Repo) => repo.size * -1]);
user.repos = sortRepos;
res.send(user);
});
});
});
// 监听事件
app.listen(3000, () => {
console.log("sever start at 3000");
});
三、项目分析
- 本项目利用GitHub的接口，获取对应用户的信息；
- 首先是构造
User实体类，保存用户的基本信息；- 由于用户的仓库的每个项目也是一个实体，因此又重新构造一个
Repo实体类，保存项目的基本信息；- 然后是创建控制类
GithubApiService，引入request依赖，通过请求GitHub的api获取到用户信息，将用户信息保存至User类的实例中；- 再请求仓库信息，创建
Repo类的实例数组，将每一条项目信息通过map映射存入数组中；- 最后是view层，引入
User类、Repo类、GithubApiService接口；- 首先构造一个接口实例，调用
getUserInfo方法获取对应username的用户信息，再调用getReposInfo方法获取仓库信息，并保存至用户实例的repos参数中保存；- 为了使仓库项目更加有序，可引入
lodash模块，通过sortBy方法根据项目的大小size对repos进行排序，再存入用户实例；- 要将接口暴露至浏览器，可引入
express模块和url模块，创建app实例，，获取url的参数username，传入getUserInfo方法，在方法中将结果res.send即可；- 最后监听app。
四、项目总结
- 本项目利用typescript和node，通过外部接口获取所需信息返回给前端，相当于一个小代理；
- 如果想继续练习，可以尝试实现查询号码归属地、快递信息等；