招商固收系统总结【typeScript篇】

一、typeScript

子组件对父组件传递过来的props的属性进行【类型、值】定义：

title?: string;  // ？代表可以为空【undefiend或null】

函数的定义方式：

diff(one: string, two: string): number;  // ()中的是参数类型， number是函数返回值类型

通过interface名称以泛型的方式传入组件：

class A extends React.Component<IFather> // 必须以I开头 表示它是Interface接口

使用命名空间组织类型：

declare namespace GreetingLib {
    interface LogOptions {
        verbose?: boolean;
    }
    interface AlertOptions {
        modal: boolean;
        title?: string;
        color?: string;
    }
}

const let var:

var禁止使用， const应用在引用类型没有变化的变量上，对数组的push、pop、unshift、shift不影响其引用类型，因此数组定义为const

普通类型【Number，String，Boolean和Object】

不要使用如下类型Number，String，Boolean或Object。 这些类型指的是非原始的装盒对象，它们几乎没在JavaScript代码里正确地使用过。【首字母大写的写法都是非原始的装盒对象， 禁止使用】

/* 错误 */
function reverse(s: String): String;

应该使用类型number，string，and boolean。

/* OK */
function reverse(s: string): string;

使用非原始的object类型来代替Object （TypeScript 2.2新增特性）

回调函数里的可选参数

不要在回调函数里使用可选参数除非你真的要这么做：

/* 错误 */
interface Fetcher {
    getObject(done: (data: any, elapsedTime?: number) => void): void;
}

这里有一种特殊的意义：done回调函数可能以1个参数或2个参数调用。 代码大概的意思是说这个回调函数不在乎是否有 elapsedTime参数， 但是不需要把这个参数当成可选参数来达到此目的 -- 因为总是允许提供一个接收较少参数的回调函数。（说人话：你既然觉得该参数可有可无，那还写它干嘛？）

应该写出回调函数的非可选参数：

/* OK */
interface Fetcher {
    getObject(done: (data: any, elapsedTime: number) => void): void;
}

重载与回调函数

不要因为回调函数参数个数不同而写不同的重载：

/* 错误 */
declare function beforeAll(action: () => void, timeout?: number): void;
declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;

应该只使用最大参数个数写一个重载：

/* OK */
declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;

为什么：回调函数总是可以忽略某个参数的，因此没必要为参数少的情况写重载。 参数少的回调函数首先允许错误类型的函数被传入，因为它们匹配第一个重载。

函数重载--顺序

不要把一般的重载放在精确的重载前面：

/* 错误 */
declare function fn(x: any): any;
declare function fn(x: HTMLElement): number;
declare function fn(x: HTMLDivElement): string;

var myElem: HTMLDivElement;
var x = fn(myElem); // x: any, wat?

应该排序重载令精确的排在一般的之前：

/* OK */
declare function fn(x: HTMLDivElement): string;
declare function fn(x: HTMLElement): number;
declare function fn(x: any): any;

var myElem: HTMLDivElement;
var x = fn(myElem); // x: string, :)

为什么：TypeScript会选择第一个匹配到的重载当解析函数调用的时候。 当前面的重载比后面的“普通”，那么后面的将被隐藏，导致它们不会被调用。