久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

# TypeScript類 本節(jié)我們共同完成上節(jié)中的作業(yè)：新建Teacher類。 ## 實(shí)體類 在團(tuán)隊(duì)項(xiàng)中，我們更愿意將與后臺(tái)返回?cái)?shù)據(jù)對(duì)應(yīng)的類稱為實(shí)體Entity類，表示此類與后臺(tái)返回的數(shù)據(jù)格式一致。教師數(shù)據(jù)便是典型的由后臺(tái)獲取的數(shù)據(jù)，所以我們?cè)赻app`文件夾下新下`entity`文件夾： ```bash panjie@panjies-Mac-Pro app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-Mac-Pro app % tree -L 1 . ├── add ├── app-routing.module.ts ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── edit ├── entity ?? ├── index └── login 5 directories, 6 files ``` 然后進(jìn)入該文件夾，使用angular cli自動(dòng)創(chuàng)建一個(gè)普通的teacher類: ```bash panjie@panjies-Mac-Pro entity % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app/entity panjie@panjies-Mac-Pro entity % ng g class teacher CREATE src/app/entity/teacher.spec.ts (158 bytes) CREATE src/app/entity/teacher.ts (25 bytes) ``` Angualr cli將自動(dòng)創(chuàng)建一個(gè)Teacher類及該類對(duì)應(yīng)的測(cè)試文件。 ## class Teacher 此時(shí)我們便可以定義Teacher的屬性了： ```typescript +++ b/first-app/src/app/entity/teacher.ts @@ -1,2 +1,11 @@ +/** + * 教師（用戶） + */ export class Teacher { + id: number; + email: string; + name: string; + password: string; + sex: boolean; + username: string; } ``` 接著定義構(gòu)造函數(shù): ```typescript +++ b/first-app/src/app/entity/teacher.ts @@ -7,5 +7,14 @@ export class Teacher { name: string; password: string; sex: boolean; username: string; + + constructor(id: number, email: string, name: string, password: string, sex: boolean, username: string) { + this.id = id; + this.email = email; + this.name = name; + this.password = password; + this.sex = sex; + this.username = username; + } } ``` 接下來(lái)，我們便可以在Login的相關(guān)功能上使用該類型了。 ### 測(cè)試 ```typescript +++ b/first-app/src/app/entity/teacher.spec.ts @@ -2,6 +2,6 @@ import { Teacher } from './teacher'; describe('Teacher', () => { it('should create an instance', () => { - expect(new Teacher()).toBeTruthy(); + expect(new Teacher(1, 'email', 'name', 'password', true, 'username')).toBeTruthy(); }); }); ``` ## 規(guī)定類型 使用Teacher類重寫登錄組件： ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -1,5 +1,6 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; import {HttpClient, HttpHeaders} from '@angular/common/http'; +import {Teacher} from '../entity/teacher'; @Component({ selector: 'app-login', @@ -7,13 +8,10 @@ import {HttpClient, HttpHeaders} from '@angular/common/http'; styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { - teacher = {} as { - username: string, - password: string - }; + teacher = {} as Teacher; @Output() - beLogin = new EventEmitter<{ username: string, name: string, email: string, sex: boolean }>(); + beLogin = new EventEmitter<Teacher>(); constructor(private httpClient: HttpClient) { } @@ -31,7 +29,7 @@ export class LoginComponent implements OnInit { httpHeaders = httpHeaders.append('Authorization', 'Basic ' + authToken); this.httpClient - .get<any>( + .get<Teacher>( 'http://angular.api.codedemo.club:81/teacher/login', {headers: httpHeaders}) .subscribe(teacher => this.beLogin.emit(teacher), ``` 重寫Index 組件： ```typescript +++ b/first-app/src/app/index/index.component.ts @@ -1,4 +1,5 @@ import {Component, OnInit} from '@angular/core'; +import {Teacher} from '../entity/teacher'; @Component({ selector: 'app-index', @@ -15,7 +16,7 @@ export class IndexComponent implements OnInit { ngOnInit(): void { } - onLogin(teacher: { username: string, name: string, email: string, sex: boolean }): void { + onLogin(teacher: Teacher): void { console.log(new Date().toTimeString(), '子組件進(jìn)行了數(shù)據(jù)彈射', teacher); this.login = true; } ``` 重寫測(cè)試 ```typescript +++ b/first-app/src/app/login/login.component.spec.ts @@ -3,6 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {LoginComponent} from './login.component'; import {FormsModule} from '@angular/forms'; import {HttpClientModule} from '@angular/common/http'; +import {Teacher} from '../entity/teacher'; describe('LoginComponent', () => { let component: LoginComponent; @@ -45,7 +46,7 @@ describe('LoginComponent', () => { it('onSubmit 用戶登錄', () => { // 啟動(dòng)自動(dòng)變更檢測(cè) fixture.autoDetectChanges(); - component.teacher = {username: '張三', password: 'codedemo.club'}; + component.teacher = {username: '張三', password: 'codedemo.club'} as Teacher; component.onSubmit(); }); }); ``` ## 驗(yàn)證 是時(shí)候展示偉大的TypeScript以及`ng t`的偉大魅力了！在日常的開發(fā)工作中，我們常常因?yàn)椴桓抑貥?gòu)而放棄重構(gòu)的想法，特別是一些弱類型的語(yǔ)言，肯定動(dòng)一動(dòng)某個(gè)屬性的名稱都會(huì)給我們帶來(lái)惡夢(mèng)。而有了TypeScript加之Angular為我們準(zhǔn)備的`ng t`，我們?cè)僖膊粦峙轮貥?gòu)了。 此時(shí)我們可以使用`ng t`來(lái)驗(yàn)證本次重構(gòu)是否成功。在使用`ng t`前，我們需要將所有的`fdescribe`、`fit`進(jìn)行復(fù)原，以使得所有的測(cè)試文件均得到執(zhí)行。又由于我們?yōu)槊總€(gè)組件都定義了對(duì)應(yīng)的測(cè)試文件，所以若測(cè)試的代碼全部成功的執(zhí)行，則說(shuō)明此次重構(gòu)沒有任何問(wèn)題。  ## 本節(jié)作業(yè) 我們?cè)赥eacher對(duì)應(yīng)的測(cè)試文件中如下實(shí)例化Teacher： ```typescript +++ b/first-app/src/app/entity/teacher.spec.ts describe('Teacher', () => { it('should create an instance', () => { expect(new Teacher(1, 'email', 'name', 'password', true, 'username')).toBeTruthy(); }); }); ``` 而如果我們少填寫一個(gè)參數(shù)，或是將對(duì)應(yīng)參數(shù)的值輸入undefined則會(huì)拋出異常：   請(qǐng)**嘗試**通過(guò)自己的能力使Teacher的構(gòu)造函數(shù)支持默認(rèn)值，使以下代碼正常執(zhí)行： ```typescript describe('Teacher', () => { it('should create an instance', () => { expect(new Teacher()).toBeTruthy(); const id = 123; expect(new Teacher(id).toBeTruthy(); const email = 'zhangsan@codedemo.club'; expect(new Teacher(id, email).toBeTruthy(); }); }); ``` | 名稱 | 地址 | 備注 | | --------------- | ------------------------------------------------------------ | ---- | | TypeScript 類 | [https://www.tslang.cn/docs/handbook/classes.html](https://www.tslang.cn/docs/handbook/classes.html) | | | TypeScript 類型 | [https://www.tslang.cn/docs/handbook/advanced-types.html](https://www.tslang.cn/docs/handbook/advanced-types.html) | | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step3.6.zip](https://github.com/mengyunzhi/angular11-guild/archive/step3.6.zip) | |