# TypeScript類 本節我們共同完成上節中的作業：新建Teacher類。 ## 實體類 在團隊項中，我們更愿意將與后臺返回數據對應的類稱為實體Entity類，表示此類與后臺返回的數據格式一致。教師數據便是典型的由后臺獲取的數據，所以我們在`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 ``` 然后進入該文件夾，使用angular cli自動創建一個普通的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將自動創建一個Teacher類及該類對應的測試文件。 ## class Teacher 此時我們便可以定義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; } ``` 接著定義構造函數: ```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; + } } ``` 接下來，我們便可以在Login的相關功能上使用該類型了。 ### 測試 ```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(); }); }); ``` ## 規定類型 使用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(), '子組件進行了數據彈射', teacher); this.login = true; } ``` 重寫測試 ```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 用戶登錄', () => { // 啟動自動變更檢測 fixture.autoDetectChanges(); - component.teacher = {username: '張三', password: 'codedemo.club'}; + component.teacher = {username: '張三', password: 'codedemo.club'} as Teacher; component.onSubmit(); }); }); ``` ## 驗證 是時候展示偉大的TypeScript以及`ng t`的偉大魅力了！在日常的開發工作中，我們常常因為不敢重構而放棄重構的想法，特別是一些弱類型的語言，肯定動一動某個屬性的名稱都會給我們帶來惡夢。而有了TypeScript加之Angular為我們準備的`ng t`，我們再也不懼怕重構了。 此時我們可以使用`ng t`來驗證本次重構是否成功。在使用`ng t`前，我們需要將所有的`fdescribe`、`fit`進行復原，以使得所有的測試文件均得到執行。又由于我們為每個組件都定義了對應的測試文件，所以若測試的代碼全部成功的執行，則說明此次重構沒有任何問題。  ## 本節作業 我們在Teacher對應的測試文件中如下實例化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(); }); }); ``` 而如果我們少填寫一個參數，或是將對應參數的值輸入undefined則會拋出異常：   請**嘗試**通過自己的能力使Teacher的構造函數支持默認值，使以下代碼正常執行： ```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) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step3.6.zip](https://github.com/mengyunzhi/angular11-guild/archive/step3.6.zip) | |