资讯专栏INFORMATION COLUMN

ts学习笔记

Jioby / 701人阅读

摘要:如何学习一门语言是什么与的关系以面向对象的思维编程代码格式的流转我们在做什么强数据操作我们做的是由组件集组装起来的的质量取决于组件的质量什么是组件的质量怎样写出质量好的组件有什么是如何使得我们能产出高质量组件类型系统之原子类型类型系统之组

如何学习一门语言
是什么? 与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的质量取决于 组件的质量
什么是组件的质量? 怎样写出质量好的组件?

ts 有什么? 是如何使得我们能产出高质量组件
类型系统 之 原子类型

// 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

相关文章

  • angular2JS学习笔记

    天才第一步,配置环境node,nvm,npm,webpack等。 1.创建一个文件夹angular2-app.内置文件有package.json , tsconfig.json , typings.json. //typings.json { ambientDependencies: { es6-shim: github:DefinitelyTyped/DefinitelyTyped/...

    figofuture 评论0 收藏0
  • Angular4学习笔记之DOM属性绑定

    摘要:如果没有,请查看学习笔记之安装和使用教程事件绑定准备工作了解目的在模版的界面上面增加一个按钮,然后通过小括号绑定一个事件。 简介 使用插值表达式将一个表达式的值显示在模版上 {{productTitle}} 使用方括号将HTML标签的一个属性值绑定到一个表达式上 使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上 按钮绑定事件 注意 在开始下面的例子之前,请先确认已...

    Genng 评论0 收藏0
  • angularV4+学习笔记

    摘要:注解的元数据选择器页面渲染时,组件匹配的选择器使用方式采用标签的方式。当然必要的,在需要用到的的模块中引入引入的指令,放在声明里面引入的模块引导应用的根组件关于的元数据还未完全,所以后面会继续完善。 angular学习笔记之组件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1组件注解 @Component注解,对组件进行配置。 1....

    galaxy_robot 评论0 收藏0
  • angularV4+学习笔记

    摘要:注解的元数据选择器页面渲染时,组件匹配的选择器使用方式采用标签的方式。当然必要的,在需要用到的的模块中引入引入的指令,放在声明里面引入的模块引导应用的根组件关于的元数据还未完全,所以后面会继续完善。 angular学习笔记之组件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1组件注解 @Component注解,对组件进行配置。 1....

    LoftySoul 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<