TS && Node：実際の戦闘ノートを投影する
1.プロジェクトの初期化
-
最初に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" }
2.プロジェクトを開始します
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");
});
3.プロジェクト分析
- このプロジェクトは、GitHubインターフェースを使用して、対応するユーザーに関する情報を取得します。
- 1つ目は
User、ユーザーの基本情報を保存するためのエンティティクラスを構築することです。- ユーザーのウェアハウス内の各アイテムもエンティティである
Repoため、アイテムの基本情報を保存するためにエンティティクラスが再構築されます。- 次に、コントロールクラスを作成し、依存関係を
GithubApiService導入しrequest、GitHubのAPIをリクエストしてユーザー情報を取得し、ユーザー情報をUserクラスのインスタンスに保存します。- 次に、ウェアハウス情報を要求し
Repo、クラスのインスタンスの配列を作成し、マップマッピングを介して各アイテム情報を配列に格納します。- 最後に、ビューレイヤーは
Userクラス、Repoクラス、およびGithubApiServiceインターフェイスを導入します。- 最初にインターフェイスインスタンスを作成し、
getUserInfoメソッドを呼び出して対応するusernameユーザー情報を取得し、次にgetReposInfoメソッドを呼び出してウェアハウス情報を取得し、それをユーザーインスタンスのreposパラメーターに保存します。- ウェアハウスプロジェクトをより整然としたものにするために、
lodashモジュールを導入し、sortByメソッドsizeを使用してプロジェクトのサイズに従ってrepos並べ替え、ユーザーインスタンスに保存することができます。- インターフェースをブラウザーに公開するには、
expressモジュールとurlモジュールをインポートし、アプリインスタンスを作成し、URLのパラメーターを取得usernameし、getUserInfoメソッドを渡し、結果をメソッドに入れres.sendます。- 最後に、アプリを聞いてください。
4、プロジェクトの概要
- このプロジェクトでは、typescriptとノードを使用して、外部インターフェイスを介して必要な情報を取得し、それをフロントエンドに返します。これは小さなエージェントに相当します。
- 練習を続けたい場合は、番号がどこにあるか、速達情報などを探すことができます。