TS分享

什么是TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法，主要提供了类型系统和对 ES6 的支持

JavaScript 与 TypeScript 的区别

TypeScript是静态类型，js是动态类型

编写的代码即使没有被执行到，一旦你编写代码时发生类型不匹配，语言在编译阶段即可发现，运行前的类型检查是减少bug的一大手段，而且静态类型对阅读代码是友好的；

基础类型

主要类型：布尔值、数字、字符串、数组、元组、枚举、any、void、Null 和 Undefined

let isDone: boolean = false; // 布尔值
// 数字类型，支持十进制和十六进制，二进制和八进制字面量
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;

let sentence: string = `Hello, my name is ${ name }.`; // 字符串类型

// 数组类型 类型+[]
let list: number[] = [1, 2, 3]; // 可以在元素类型后面接上 []，表示由此类型元素组成的一个数组
let list: Array<number> = [1, 2, 3];// 使用数组泛型，Array<元素类型>
// (number | string)[]这是联合类型和数组的结合
// any[] 任意类型和数组的结合

// 元组类型 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

// 枚举类型
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

// 任意类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

// void 表示没有任何类型
let unusable: void = undefined;// 声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null

// null和undefined 类型 Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

函数定义

js声明
function add(x, y) {
    return x + y;
}
TS声明
function add(x: number, y: number): number {
    return x + y;
}

类

TS中的类添加了private、public、protected修饰符

public : 默认就是public，可以自由的访问定义的成员

private : 只有在当前类中能访问定义的成员

protected : 可以在子类中能访问定义的成员

接口

接口的作用就是为这些类型命名和为你的代码定义契约(可以理解为模板)

只要传入的对象满足接口的必要条件，那么它就是被允许的

可选属性：

interface testType {
    name: string;
    age?: number;
}

只读属性：

interface testType {
    readonly name: string;
    readonly age: number;
}
let test1:testType = {name:"fred",age:20}
test1.name = "Bob"; //error

继承：

interface nameFace {
    name: string;
}
interface ageFace {
    age: number;
}
interface heightFace extends nameFace, ageFace {
    height: number;
}

let person = <heightFace>{};
person.name = "fred";
person.age = 20;
person.height = 180;

定义页面级interface

import { WrappedForm } from 'typings/antd';

interface Action {
  type: string;
  payload?: any;
}
export interface PageWrapperProps<InitDataType = {}> {
  reload: (extra: object) => void;
  dispatch: (action: Action) => Promise<void>;
  initData: InitDataType;
}

export interface FormWrapperProps {
  form: WrappedForm;
}

组件中定义interface

interface IndexProps extends PageWrapperProps {
  policyId: string;
  tableName: string;
  tableCols: any[];
}
interface IndexState {
  policyName: string;
  taskId: string;
}

interface RuleResultSearchFormData extends Partial<RuleListSearchFormData> {
  policyId: string;
  bizMonth: any;
}

使用

class Index extends PureComponent<IndexProps, IndexState> {
}

泛型 (<>表示)

可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据， 这样用户就可以以自己的数据类型来使用组件 例子 不用泛型的话，这个函数可能是下面这样：

function identity(arg: number): number {
    return arg;
}

或者，我们使用any类型来定义函数：

function identity(arg: any): any {
    return arg;
}

使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。

泛型写法

function identity<T>(arg: T): T {
    return arg;
}
调用
let output = identity<string>("myString");
类型推论
let output = identity("myString");


定义一个类型
export type Partial<T> = {
  [P in keyof T]?: T[P];
};

export interface RuleListSearchFormData {
  policyId: string;
  policyName: string;
  ruleId: string;
  ruleName: string;
  ruleStatus: string;
  ruleType: string;
  bizMonth?: string;
  gmtValid?: [string, string];
  taskStatus?: string;
  taskResult?: string;
}

使用
interface RuleResultSearchFormData extends Partial<RuleListSearchFormData> {
  policyId: string;
  bizMonth: any;
}