如何進修一門言語
是什麼? 與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<number> = [1, 3, 7];
interface teamArray {
[index: number]: any
}
let t: teamArray = [1, 2, 3, {1: 3}];
// 元組
let structure: [string, Array<string>];
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<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
function swap<T = number, U = number>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]];
}
interface lengthwish {
length: number
}
function swap2<T extends lengthwish, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]];
}
interface createArrayFunc {
<T extends lengthwish>(length: number, value: T): Array<T>;
}
let myCreateArray: createArrayFunc;
myCreateArray = function <T extends lengthwish>(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 ((<string>config).length || (<number[]>config).length) {
return true;
} else {
return false
}
}
type Name = string;
type DoFn = () => string;
type cof = Name | Dofn;
function o(message: cof): Name {
return '';
}