TypeScript(ES6) 的一些使用的小技巧

時間 2019-12-07

標籤 typescript es6 一些使用技巧欄目 JavaScript 简体版

原文原文鏈接

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

在處理 object 的時候咱們使用 Object 的一些自帶的一些方法
Object.keys()返回 keys 的數組，Object.values()返回 values 的數組。

二、合理的使用 reduce/filter

需求1：處理這樣的對象中的 value 值,拼接成一個字符串。

// 有這樣的一個對象,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 返回一個新的對象。

// 仍是這個 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)

複製代碼

三、Ts 定義任意屬性

需求：定義一個 any 的{}

const defaultValues: any = {};
const a = {} as any;
複製代碼

接口任意屬性

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 類型定義

數組的幾種定義方法

類型 + 方括號」表示法

let fibonacci: number[] = [1, 1, 2, 3, 5];
複製代碼

數組泛型

let fibonacci: Array<number> = [1, 1, 2, 3, 5];
複製代碼

用接口表示數組

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

any 在數組中的應用

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

解構賦值一個複雜的對象

當你須要解構一個變量的時候，又想給這個解構的值賦值類型，能夠這麼作

cosnt { body } = ctx.request as { body: CreateOperation }
複製代碼

Mobx的使用

Mobox返回不是真正的數組，經過mobx提供的toJS方法轉換成Array再使用

import { observable, computed } from 'mobx';

import { toJS } from 'mobx';
複製代碼

參考

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。