在TS開發中,經常會遇到後臺資料欄位比較多的情況,這時候需要一個個複製欄位然後給他手動配置資料型別來完成我們的TS型別定義,相當麻煩。有什麼快速的方法呢,我就目前遇到的兩種情況分別寫了JS指令碼來處理後臺資料,直接生成我們需要的資料格式。
指令碼編寫
1. 處理資料字典中的資料
一般資料字典表裡的資料可能在excel檔案裡,也可能是在線上網頁中,但它一般都是一個表格的形式,比如以下這種:
我們只需要複製前兩列的內容,欄位和欄位型別。
明白我們的需求後,開始編寫js指令碼:
// 定義一個方法
const dealDictionaryKey = (string) => {
// 複製出來的資料是多行的形式,所以我們以'\n'去分開每一行資料
const strArr = string.split('\n');
let newString = '';
// 遍歷每行資料
for (let item of strArr) {
// 空白行跳過
if (item.trim() === '') continue;
// 替換常用的後臺資料型別為js型別,如果有遺漏請自行新增 /t是單元格欄位和單元格型別之間的隔離符號
item = item.replace(/\t/, ': ').replace('INTEGER', 'number').replace(/TIMESTAMP|DATE/, 'Date')
.replace(/TEXT|VARCHAR\(\d*\)|CHAR\(\d*\)/, 'string');
// 遞迴是因為可能一個欄位裡有多個下劃線
item = toUppercase(item);
newString += item + ';\n';
}
console.log(newString)
}
// 遞迴字串,替換字串中每一個 下劃線+小寫字母 為 大寫字母 的形式
const toUppercase = (str) => {
const idx = str.indexOf('_');
// 替換到沒有下劃線為止
if(idx === -1) return str;
// 下劃線+小寫字母
const oldStr = str.substr(idx, 2);
// 生成的大寫字母
const initial = str.substr(idx + 1, 1).toUpperCase();
// 替換
str = str.replace(oldStr, initial);
str = toUppercase(str);
return str;
}
// 賦值測試
const str =
`
department_id INTEGER
department_name VARCHAR(125)
department_type CHAR(1)
create_user VARCHAR(25)
create_time TIMESTAMP
update_user VARCHAR(20)
update_time TIMESTAMP
`
// 執行
dealDictionaryKey(str);
執行結果
departmentId: number;
departmentName: string;
departmentType: string;
createUser: string;
createTime: Date;
updateUser: string;
updateTime: Date;
2. 處理後臺程式碼中複製的資料
我們直接檢視後臺程式碼,然後複製出來進行處理。後臺程式碼一般形式如下:
我們直接複製花括號中的內容,進行處理。js指令碼編寫如下:
// 定義一個方法
const dealServerKey = (str) => {
// 複製出來的資料是多行的形式,所以我們以'\n'去分開每一行資料
const strArr = str.split('\n')
let newString = ''
// 遍歷每行資料
for (let item of strArr) {
// 空行跳過
if (item.trim() === '' || item.indexOf('private') === -1) continue;
// 刪除無用的private欄位
item = item.replace('private', '').replace(';', '').trim();
// 先將欄位和型別分開
const keys = item.split(' ');
const type = keys[0].replace(/Integer|BigDecimal/, 'number').replace('String', 'string')
// 處理後調換位置
newString += keys[1] + ': ' + type + ';\n';
}
console.log(newString)
}
// 輸入測試
const str = `
private Integer departmentId;
private String departmentName;
private String departmentType;
private String departmentTypeName;
private Date createTime;
`
// 執行
dealServerKey(str);
執行結果
departmentId: number;
departmentName: string;
departmentType: string;
departmentTypeName: string;
createTime: Date;
使用
指令碼編寫後,當然可以在瀏覽器控制檯直接使用,每次的輸入內容和呼叫執行需要手動替換。不過這樣使用不太直觀方便,我這邊一般都會使用 線上的執行js工具
,百度谷歌一搜很多。
以下以我使用的 run-js 為例:
將指令碼複製到左側程式碼框內,然後每次去替換 str
的賦值,點選中間的 執行
按鈕,結果即可在右側展示。
最後複製右側內容到程式碼裡即可。