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

摘要： 在處理 object 的時候我們使用 Object 的一些自帶的一些方法 Object.keys()返回 keys 的陣列，Object.values()返回 values 的陣列。 2、合理的使用 reduce/filter 需求1：處理這樣的物件中...

• 在處理 object 的時候我們使用 Object 的一些自帶的一些方法
• Object.keys()返回 keys 的陣列，Object.values()返回 values 的陣列。

2、合理的使用 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)

複製程式碼

3、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'
};

複製程式碼

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' }];
複製程式碼