摘要:如何学习一门语言是什么与的关系以面向对象的思维编程代码格式的流转我们在做什么强数据操作我们做的是由组件集组装起来的的质量取决于组件的质量什么是组件的质量怎样写出质量好的组件有什么是如何使得我们能产出高质量组件类型系统之原子类型类型系统之组
如何学习一门语言是什么? 与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 ""; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/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....
阅读 1417·2021-10-18 13:29
阅读 2575·2021-10-12 10:18
阅读 3547·2021-09-22 15:06
阅读 2547·2019-08-29 17:09
阅读 2747·2019-08-29 16:41
阅读 1450·2019-08-29 13:48
阅读 3200·2019-08-26 13:49
阅读 3281·2019-08-26 13:34