TypeScript: 一些使用的小技巧

1、Object.values() 和 Object.keys() 的使用

在处理 object 的时候我们使用 Object 的一些自带的一些方法
Object.keys()返回 keys 的数组，Object.values()返回 values 的数组。

2、合理的使用 reduce/filter

需求1：处理这样的对象中的 value 值,拼接成一个字符串。

代码语言：javascript复制

// 有这样的一个对象,value 可能为空
const obj = {
    a: '1',
    b: '2',
    c: '3',
    d: '',
    e: '5'
    ...
}

// 后端只需要这个对象中的 value 值的逗号拼接 eg: '1,2,3...'

Object.values(obj).filter(Boolean).join(',');

// => '1,2,3,5...'

需求2：需要处理一个 object 中的 values 返回一个新的对象。

代码语言：javascript复制

// 还是这个 obj 但是现在我们想把 value 的值处理成 number 类型，然后再返回一个key 相同的对象。
let obj = {
    a: '1',
    b: '2',
    c: '3',
    d: '',
    e: '5'
    ...
}

// 预想得的值
obj = {
    a: 1,
    b: 2,
    c: 3,
    d: '',
    e: 5
    ...
}

// 使用 lodash reduce
_.reduce(object, (result, value, key) => result[key] = (Number(value), result)), {})

// zipObject(arr1,arr2) 
_.zipObject(Object.keys(obj),Object.values(obj).map(item=>item = Number(item)))

// demo
_.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }

// 这里可以 reduce
Object.keys(obj).reduce((result,value,key,arr)=>{
    obj[value] && (obj[value] = Number(obj[value]))
},{})

// 原生的 forEach
// Object.keys(obj).forEach(item=>{
//    obj[item] && (obj[item] = Number(obj[item]))
// },{})

console.log(obj)

复制代码

3、Ts 定义任意属性

需求：定义一个 any 的{}

代码语言：javascript复制

const defaultValues: any = {};
const a = {} as any;

接口任意属性

代码语言：javascript复制

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

// [propName: string]:any 定义任意属性
let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

// 当你想定义一个任意属性的 object({})的时候合上面的方法如出一辙
interface Person1 {
    obj?:{
        [propName: string]: any;
    }
}

let Jerry: Person1 = {
    obj:{
        hobby: 'guitar'
    }
}

Ts 类型定义

数组的几种定义方法

类型方括号」表示法

代码语言：javascript复制

let fibonacci: number[] = [1, 1, 2, 3, 5];

数组泛型

代码语言：javascript复制

let fibonacci: Array = [1, 1, 2, 3, 5];

用接口表示数组

代码语言：javascript复制

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

any 在数组中的应用

代码语言：javascript复制

let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];

解构赋值一个复杂的对象

当你需要解构一个变量的时候，又想给这个解构的值赋值类型，可以这么做

代码语言：javascript复制

cosnt { body } = ctx.request as { body: CreateOperation }

Mobx的使用

Mobox返回不是真正的数组，通过mobx提供的toJS方法转换成Array再使用

代码语言：javascript复制

import { observable, computed } from 'mobx';

import { toJS } from 'mobx';

参考

www.lodashjs.com/docs/4.17.5…
developer.mozilla.org/zh-CN/docs/…

编程算法 mobx ecmascript

0 人点赞