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

# 初識(shí)泛型 如果你還不能夠順利的、思緒清楚的完成上節(jié)的答案，僅僅說明我們重復(fù)的還不夠。編程其實(shí)就是個(gè)熟練工，簡(jiǎn)單的事情重復(fù)做你就是專家；如果僅僅重復(fù)還不夠，那就用心做，因?yàn)橹貜?fù)的事情認(rèn)真做你就是贏家！ 我們將具體的答案放到了本節(jié)最后，個(gè)人按自己的實(shí)際情況進(jìn)行查看。 ## 屬性初始化 我們?cè)?jīng)在添加組件中如下初始化`teacher`： ```typescript teacher = { name: '', username: '', email: '', sex: true }; ``` 這當(dāng)然是可以的。但也有一些的小的弊端，比如當(dāng)網(wǎng)絡(luò)情況不是特別理想的時(shí)候，則會(huì)出現(xiàn)一些不如愿的情況。比如我們使用如下代碼來模似請(qǐng)求數(shù)據(jù)時(shí)發(fā)生了1.5秒的延遲： ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -1,6 +1,7 @@ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {HttpClient} from '@angular/common/http'; +import {delay} from 'rxjs/operators'; @Component({ selector: 'app-edit', @@ -27,6 +28,7 @@ export class EditComponent implements OnInit { const url = 'http://angular.api.codedemo.club:81/teacher/' + id; // 發(fā)起請(qǐng)求，成功時(shí)并打印請(qǐng)求結(jié)果，失敗時(shí)打印失敗結(jié)果 this.httpClient.get<any>(url) + .pipe(delay(1500)) .subscribe(data => this.teacher = data, error => console.log('失敗', error) ); ``` - ?? 此段為示例擴(kuò)展代碼，無需記憶。 則會(huì)發(fā)生在1.5秒前，性別會(huì)默認(rèn)選中男；而1.5秒后，性別又會(huì)變成女。  為了規(guī)避這種情況，在初始化時(shí)，我們更愿意將其初始化一個(gè)空對(duì)象`{}`: ```typescript teacher = {} ``` 然后使用`as`來將其標(biāo)明（強(qiáng)制轉(zhuǎn)換）為我寫的類型： ```typescript export class EditComponent implements OnInit { // 使用as進(jìn)行類型轉(zhuǎn)換 - teacher = ?{ - name: '', - username: '', - email: '', - sex: true + teacher = ?{} as ?{ + name: string, + username: string, + email: string, + sex: boolean }; ``` - ? `=`后面跟的是值。 - ? `as`后面跟的是類型。 使用上述代碼我們將`teacher`賦值為`{}`并將其類型聲明為`{name: string, username: string, email: string, sex: boolean}`。 ## 初識(shí)泛型 泛型基本上是所有強(qiáng)類型面向?qū)ο笳Z(yǔ)言支持的特性，它的作用簡(jiǎn)單來描述就是：統(tǒng)一某個(gè)對(duì)象（方法）前后的數(shù)據(jù)格式。 `httpClient.get`方法在默認(rèn)返回的類型為 `Object`，我們?yōu)閌teacher`規(guī)定了類型后，編輯器則會(huì)發(fā)生一個(gè)編譯錯(cuò)誤，表示：無法將一個(gè)類型為`Object`的變量賦值給特定`{name: string, username: string, email: string, sex: boolean}`類型的變量。這是由于`Object`類型表示一個(gè)空對(duì)象，該對(duì)象上沒有任何屬性，當(dāng)然也必然不會(huì)有`name、username、email、sex`幾個(gè)我們也經(jīng)聲明需要的屬性了。  TypeScript近年的份額穩(wěn)步提升，三個(gè)前端框架Angular, Reactive, Vue均投入到了TypeScript的懷抱，與TypeScript強(qiáng)類型能夠在編譯階段檢查出錯(cuò)誤的特性是分不開的。 `httpClient`除提供了返回`Object`的`get`方法外，還提供了可以指定返回任意類型的`get<T>`方法，這其中的`<T>`是一個(gè)**泛型**，**泛**可以理解為廣泛、寬泛，白話文來說便是：你說我是什么類型，我就可以是什么類型；**泛**還可以理解為**規(guī)范**，白話文來說便是：你規(guī)定了是什么類型，就必須是什么類型。以`httpClient.get<T>`為例： ### 寬泛性 我們可以將這里的`T`換成任意類型，比如： ```typescript httpClient.get<boolean>; httpClient.get<number>; httpClient.get<string>; httpClient.get<{}>; httpClient.get<object>; httpClient.get<{id: number}>; httpClient.get<any>; ``` 表示：我們此時(shí)發(fā)起的后臺(tái)請(qǐng)求，將分別返回`boolean, number...`類型。 而寬泛并不代表任意，在聲明泛型對(duì)應(yīng)的類型時(shí)，我們必須嚴(yán)格的依照后臺(tái)接口的返回情況。確認(rèn)的說：后臺(tái)返回的類型是什么，我們就應(yīng)該在此泛型中聲明什么樣的數(shù)據(jù)類型： ```typescript @@ -26,7 +26,7 @@ export class EditComponent implements OnInit { // 拼接請(qǐng)求URL const url = 'http://angular.api.codedemo.club:81/teacher/' + id; // 發(fā)起請(qǐng)求，成功時(shí)并打印請(qǐng)求結(jié)果，失敗時(shí)打印失敗結(jié)果 - this.httpClient.get<any>(url) + this.httpClient.get<{name: string, username: string, email: string, sex: boolean}>(url) .subscribe(data => this.teacher = data, error => console.log('失敗', error) ); ``` 當(dāng)然了，我們也可以將后臺(tái)返回的類型規(guī)定為`any`，表示后臺(tái)返回了一個(gè)非常非常寬泛類型的數(shù)據(jù)，該數(shù)據(jù)有能力給任何類型賦值。比如以下代碼都是合規(guī)的： ```typescript const a = null as any; const b: number = a; // 將a賦值為number類型的b const c: string = a; const d: boolean = a; const e: object = a; const f: { id: number } = a; const g: any = a; ``` ### 規(guī)范性 寬泛的目的是為了規(guī)范，比如我們剛剛在`get<T>`中將`T` 聲明為`{name: string, username: string, email: string, sex: boolean}`，則表示請(qǐng)求成功后的返回值類型也為`{name: string, username: string, email: string, sex: boolean}` ```typescript this.httpClient.get<{ name: string, username: string, email: string, sex: boolean }>(url) .subscribe(??data => this.teacher = data, error => console.log('失敗', error) ); ``` - ?? data的類型與規(guī)定的泛型類型相一致 此時(shí)，如若我們想獲取規(guī)定泛型上沒有屬性，比如嘗試獲取返回值類型上的`id`屬性，則會(huì)發(fā)生編譯錯(cuò)誤：  所以對(duì)于泛型而言：寬泛是方法、規(guī)范是目的。 ### 泛型化 最終我們結(jié)合泛型，調(diào)用`httpClient.get<T>`方法，最終代碼如下： ```typescript constructor(private activeRoute: ActivatedRoute, @@ -26,8 +26,8 @@ export class EditComponent implements OnInit { // 拼接請(qǐng)求URL const url = 'http://angular.api.codedemo.club:81/teacher/' + id; // 發(fā)起請(qǐng)求，成功時(shí)并打印請(qǐng)求結(jié)果，失敗時(shí)打印失敗結(jié)果 - this.httpClient.get<any>(url) - .subscribe(data => this.teacher = data, + this.httpClient.get<{ name: string, username: string, email: string, sex: boolean }>(url) + .subscribe(data => this.teacher = data, error => console.log('失敗', error) ); } ``` ## 本節(jié)作業(yè) 作業(yè)一：程序開發(fā)時(shí)有個(gè)重要原則：（非必要）不造重復(fù)的輪子，而我們?cè)诋?dāng)前代碼中出現(xiàn)了重復(fù)的`{ name: string, username: string, email: string, sex: boolean }` 分別位于： ```typescript teacher = {} as { name: string, username: string, email: string, sex: boolean }; this.httpClient.get<{ name: string, username: string, email: string, sex: boolean }>(url) ``` - 寫法不同而已，前面的寫成了多行，后臺(tái)的寫成了一行。 作業(yè)二：打開`scr/app/app.component.ts`，找到其`teachers`聲明的代碼，將其類型由`any[]`改成更規(guī)范的格式。 ```typescript // 初始化教師數(shù)組 teachers = [] as any[]; ``` 請(qǐng)搜索相關(guān)的知識(shí)，將兩個(gè)重復(fù)的輪子變成一個(gè)。 | 名稱 | 地址 | 備注 | | ------------------ | ------------------------------------------------------------ | ---- | | TypeScript基礎(chǔ)類型 | [https://www.tslang.cn/docs/handbook/basic-types.html](https://www.tslang.cn/docs/handbook/basic-types.html) | | | TypeScript泛型 | [https://www.tslang.cn/docs/handbook/generics.html](https://www.tslang.cn/docs/handbook/generics.html) | | | 初識(shí)泛型 | [http://www.imay365.com/yunzhiclub/springboot_angular_guide/1369061](http://www.imay365.com/yunzhiclub/springboot_angular_guide/1369061) | | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.4.zip) | | ------ ## 上節(jié)答案 ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -8,7 +8,14 @@ import {HttpClient} from '@angular/common/http'; styleUrls: ['./edit.component.css'] }) export class EditComponent implements OnInit { - teacher: any; + // 使用as進(jìn)行類型轉(zhuǎn)換 + teacher = {} as { + name: string, + username: string, + email: string, + sex: boolean + }; + constructor(private activeRoute: ActivatedRoute, private httpClient: HttpClient) { } @@ -19,10 +26,13 @@ export class EditComponent implements OnInit { // 拼接請(qǐng)求URL const url = 'http://angular.api.codedemo.club:81/teacher/' + id; // 發(fā)起請(qǐng)求，成功時(shí)并打印請(qǐng)求結(jié)果，失敗時(shí)打印失敗結(jié)果 - this.httpClient.get(url) + this.httpClient.get<any>(url) .subscribe(data => this.teacher = data, error => console.log('失敗', error) ); } + onSubmit(): void { + console.log('點(diǎn)擊提交按鈕'); + } } ``` ```html +++ b/first-app/src/app/edit/edit.component.html @@ -1,16 +1,19 @@ {{teacher | json}} -<div> - 姓名：<input value="張三"> -</div> -<div> - 用戶名：<input value="zhangsan"> -</div> -<div> - Email: <input value="zhangsan@yunzhi.club"> -</div> -<div> - 性別：<input type="radio" checked="true">男 <input type="radio">女 -</div> -<div> - <button>保存</button> -</div> +<form (ngSubmit)="onSubmit()"> + <div> + 姓名：<input value="張三" name="name" [(ngModel)]="teacher.name"> + </div> + <div> + 用戶名：<input value="zhangsan" name="username" [(ngModel)]="teacher.username"> + </div> + <div> + Email: <input value="zhangsan@yunzhi.club" name="email" [(ngModel)]="teacher.email"> + </div> + <div> + 性別：<input type="radio" name="sex" [value]="true" [(ngModel)]="teacher.sex">男 + <input type="radio" name="sex" [value]="false" [(ngModel)]="teacher.sex">女 + </div> + <div> + <button>保存</button> + </div> +</form> ```