摘要:如何學習一門語言是什么與的關系以面向對象的思維編程代碼格式的流轉我們在做什么強數據操作我們做的是由組件集組裝起來的的質量取決于組件的質量什么是組件的質量怎樣寫出質量好的組件有什么是如何使得我們能產出高質量組件類型系統之原子類型類型系統之組
如何學習一門語言是什么? 與es的關系?
以面向對象的思維編程?
// C-D 強數據操作 import { observable, action } from "mobx" export default class StoreBase { service: any @observable state = "" @observable list = [] @observable loading = false @observable totalCount = 0 @observable counter = 0 @observable pageSize = 10 @observable pageIndex = 1 @observable submiting = false @observable initialFormValue = {} constructor(service) { this.service = service } @action changeSize(pageSize) { this.pageSize = pageSize }
@action async getPageList(options: { pageIndex?: number, pageSize?: number }) { options.pageIndex = options.pageIndex || this.pageIndex options.pageSize = options.pageSize || this.pageSize this.pageIndex = options.pageIndex this.pageSize = options.pageSize this.loading = true const result = await this.service.list(options) this.loading = false this.list = result.data this.totalCount = result.totalCount }
@action async add(body) { this.submiting = true try { const result = await this.service.add(body) if (result.statusCode && result.statusCode !== 200) { throw new Error(result.message) } } catch (error) { throw error } finally { this.submiting = false } }
@action async edit(id, body) { this.submiting = true try { const result = await this.service.update(id, body) if (result.statusCode && result.statusCode !== 200) { throw new Error(result.message) } } catch (error) { throw error } finally { this.submiting = false } } @action async remove(id) { try { await this.service.delete(id) this.getPageList({ pageIndex: this.pageIndex }) } catch (error) { throw error } } @action initializeForm(form) { this.initialFormValue = form } }
我們做的web application是由組件集組裝起來的, application的質量取決于 組件的質量
什么是組件的質量? 怎樣寫出質量好的組件?
類型系統 之 原子類型
// boolean let judge: boolean = true; // string let girl: string = `${family.join("======")}`; // any const think: any = {} think = []; think = ""; think = 1037; // void function select(): void { return null; } // never function logger(message: string): never { throw new Error(message); }
類型系統 之 組合類型
// 數組類型 let family: string[] = ["epuisite", "love", "detail"]; let team: Array= [1, 3, 7]; interface teamArray { [index: number]: any } let t: teamArray = [1, 2, 3, {1: 3}]; // 元組 let structure: [string, Array ]; structure = ["why", ["atomic element", "what"]]; structure[2] = "how"; structure[3] = ["when"];
// function類型 interface Doing { (type: number, thing: string, when?: string|number): any[] } let mydoing: Doing; function f(type: number = 2, thing?: string, when?: string|number, ...items: any[]) { return type; } function sf(message: number): number; function sf(message: string): string; function sf(message: number | string): number | string { if (message as number) { return 1; } else { return "123"; } }
// 枚舉類型 數字類型的值 const Color = {Red, Green, Blue}; enum Direction{ Up=1, Down, Left, Right }
// 自定義類型 // 對象類型 - 接口 interface Mother { readonly id: number, detail: any[], learning: string, love: boolean, housework?: boolean, [proName: string]: any } let me: Mother = { id: new Date().getTime(), detail: ["water", 137, "cloud", "grass", "nose"], learning: "a wider world", love: true, doing() { return 137; } };
工具 是什么? 怎么用? 為什么用?
泛型
function createArray(length: number, value: T): Array { let result: T[] = []; for (let i = 0; i < length; i++) { result[i] = value; } return result; } function swap (tuple: [T, U]): [U, T] { return [tuple[1], tuple[0]]; } interface lengthwish { length: number } function swap2 (tuple: [T, U]): [U, T] { return [tuple[1], tuple[0]]; } interface createArrayFunc { (length: number, value: T): Array ; } let myCreateArray: createArrayFunc; myCreateArray = function (length: number, value: T): Array[T] { let result: T[] = []; for (let i = 0; i < length; i++) { result[i] = value; } return result; }
// 聯合類型[共有的屬性和方法 + 類型推論] let cooperation: string | number | boolean | null | undefined; cooperation = 1; cooperation = null; // 類型斷言 function determine(config: number[] | string ): boolean { if ((config).length || ( config).length) { return true; } else { return false } } type Name = string; type DoFn = () => string; type cof = Name | Dofn; function o(message: cof): Name { return ""; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94694.html
天才第一步,配置環境node,nvm,npm,webpack等。 1.創建一個文件夾angular2-app.內置文件有package.json , tsconfig.json , typings.json. //typings.json { ambientDependencies: { es6-shim: github:DefinitelyTyped/DefinitelyTyped/...
摘要:如果沒有,請查看學習筆記之安裝和使用教程事件綁定準備工作了解目的在模版的界面上面增加一個按鈕,然后通過小括號綁定一個事件。 簡介 使用插值表達式將一個表達式的值顯示在模版上 {{productTitle}} 使用方括號將HTML標簽的一個屬性值綁定到一個表達式上 使用小括號將組件控制器的一個方法綁定到模版上面的一個事件的處理器上 按鈕綁定事件 注意 在開始下面的例子之前,請先確認已...
摘要:注解的元數據選擇器頁面渲染時,組件匹配的選擇器使用方式采用標簽的方式。當然必要的,在需要用到的的模塊中引入引入的指令,放在聲明里面引入的模塊引導應用的根組件關于的元數據還未完全,所以后面會繼續完善。 angular學習筆記之組件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1組件注解 @Component注解,對組件進行配置。 1....
摘要:注解的元數據選擇器頁面渲染時,組件匹配的選擇器使用方式采用標簽的方式。當然必要的,在需要用到的的模塊中引入引入的指令,放在聲明里面引入的模塊引導應用的根組件關于的元數據還未完全,所以后面會繼續完善。 angular學習筆記之組件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1組件注解 @Component注解,對組件進行配置。 1....
閱讀 1459·2021-10-18 13:29
閱讀 2684·2021-10-12 10:18
閱讀 3580·2021-09-22 15:06
閱讀 2596·2019-08-29 17:09
閱讀 2787·2019-08-29 16:41
閱讀 1493·2019-08-29 13:48
閱讀 3226·2019-08-26 13:49
閱讀 3325·2019-08-26 13:34