1.環境構建：借鑑：https://blog.csdn.net/wlanye/article/details/74566179
測試可行性：https://blog.csdn.net/swety_gxy/article/details/79079695
- 文件->打開空白文件夾作爲項目空間，新建文件夾 src，文件夾內新建main.ts文件，內容爲：
function helloworld(param:string){
let strstr = `Hello! ${param}`;
console.log(strstr);
}
helloworld("Emily!");
其功能爲新建一個方法爲helloworld，調用類型爲string，之後let使一個名爲strstr 內容爲‘Hello+方法中的字符串’，然後通過console顯示內容。而方法helloworld引入字符串 Emily，結束。
- Ctrl + ~ 快捷鍵，調用終端，dir查看文件目錄，此時應在src文件夾內，cd .. 至上一級，初始化npm：輸入終端：npm init，一路enter即可，完成後目錄中生成package.json文件。
- 安裝gulp相關依賴：於終端輸入：
-
npm install -g gulp-cli和
npm install --save typescript gulp gulp-typescript - 開始新建一個編譯TypeScript文件的配置文件：tsconfig.json，此文件與src路徑一致。內容爲：
{
"files": [
"src/main.ts"
],
"compilerOptions":{
"noImplicitAny": true,
"target": "es3"
}
}
其內容爲聲明一個文件路徑，並確定類型不爲any，然後target最好是設置爲es6.
- 再新建一個gulpfile.js文件，內容爲：
var gulp=require("gulp");
var ts=require("gulp-typescript");
var tsProject=ts.createProject("tsconfig.json");
gulp.task("default",function(){
return tsProject.src()
.pipe(tsProject())
.js.pipe(gulp.dest("./"));
});
內容是聲明var類型的gulp，通過require進行異步加載gulp腳本，保證之後的腳本不被阻塞。Ts也是。tsProject在ts腳本上創建項目並調用之前的配置文件。然後gulp腳本開始運行。
- 最終效果：在終端輸入 gulp，獲得main.js文件，再通過node main.js進行編譯，最終輸出爲：helloworld Emily！
2.TypeScript項目構建之CSV-XLS轉換——第一步
- 新建文件：tsconfig.json；新建文件夾src，新建文件：index.ts；新建文件夾lib，新建文件：CSV.ts
- Ctrl + ~,終端下輸入 tsc -w，將ts編譯爲js，開始調試，cmd下可以安裝yarn：Npm install -g yarn,用於初始化：開第二界面：
![]()
然後在終端下輸入：yarn init -y
- 如果只是測試，可以提前新建一個 .gitignore，用於防止提交到git上，內容爲：
dist
node_modules
- Ok，在csv.ts裏開始模擬csv文件的內容，包括：
const csv = [
[111111,11,111,11111,1,1111],
[111111,11,222,11111,2,1111],
[111111,33,111,11111,3,1111],
[111111,11,111,11111,4,4444],
[555555,11,111,11111,5,1111],
[111111,11,111,66666,6,1111],
['A','B','C','D','E','F','G']
]
並試着用table顯示：
console.table(csv);
但在此之前，先進行調試：
在
裏選擇
並，在彈出來的launch.json文件中，將原內容：
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\index.js",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
}
]
}
修改爲：
"name": "CSV",
"program": "${workspaceFolder}/dist/lib/csv.js",
但是注意一個問題：在tsconfig.json文件裏，存在有這麼一句：其中
{
"files": [
"src/main.ts"
],
"compilerOptions":{
"module": "commonjs",
"sourceMap": true,
"outDir": "dist",
"removeComments": false,
"noImplicitAny": true,
"target": "es2018"
}
}
"files": [
"src/main.ts"
],
中表示的是隻對main.ts這一個文件進行操作，所以需要刪除才行。之後再來一次 tsc -w 即可將ts文件進行編譯，並在dist文件夾中對應路徑確定。
之後重新第四步編譯，即可產生調試結果：
其結果爲table顯示出這樣——最終效果圖應該是這種表格圖，然後考慮，如果不採用console.table的方式，又該如何顯示成這樣呢？
2.TypeScript項目構建之CSV-XLS轉換——第二步
- 如果不用table顯示，很顯然就只能是將邊框打印輸出了，也就是說，先獲取數組的長度，並取最大值+1，作爲列數；再將二維數組遍歷‘\n’確定其行數，之後便很簡單的打印輸出即可。
- 先，我們需要先讀取文件，即需要轉換的csv文件：通過調用文件系統：
import * as fs from 'fs';
這時候報錯，fs未知，我們需要在終端先引用：yarn add @types/node 之後即可導入相關配置。在自定義一個test導入文件時調用fs系統自帶的讀文件方法：
fs.readFileSync();
並在launch.json中添加一行，用於確定文件所在路徑，或者說是工作目錄：
"cwd": "${workspaceFolder}",
這時候，上面的方法即可將文件的路徑寫入括號內，並確定編碼爲utf-8：
const test = fs.readFileSync('data/test.csv',{encoding: 'utf-8'})
暫時未知‘’和””的區別，均未報錯。注意，一定要 tsc -w 在運行狀態
此時可以開始調試查看test是否有數據進入：
而在斷點中可以看到：
也就是說，在test裏面，每一行是由\r\n進行換行的，習慣性將其轉成\n -> 正則表達式進行替換即可： 其中/g表示全局變量
這種聲明還不行，需要用下面的方式：
const test = fs.readFileSync('data/test.csv',{encoding: 'utf-8'}).replace(/\r\n/g,'\n');
然後考慮到\n即爲行分割符，’，’即爲列分隔符，通過這種方式即可將其分成對應的行與列。
調用split()方法：將字符串從一指定位置分割成數組。
var rows = test.split('\n');
相關結果：現在是對應的二維數組：
之後確定rows.length即爲行數，則可以對每一行進行正則表達，進行分割：
var rows :any[] | string [] = test.split('\n');
//console.log(rows.length);
//此時rows.length表示的就是行數：7行
for(let i = 0;i<rows.length;i++){
//這裏將列進行分割
rows[i] = rows[i].split(',');
}
但按以前的寫法，這裏對rows[i]會報錯，原因就在於其數據類型不唯一，會無法識別，要在新建rows時先聲明才行。
至此，對數據的分割部分完成。
- 表格化顯示：
對應頭部分，先輸出：保證其上面應存在表格
let row = "".padStart(rows[0].length * 2 + 1);//這裏其實是寫錯了
這是通過調用padStart用於在開頭位置補全字符串，其中第一個參數用於指定字符串長度，第二個參數用來補全的字符串。之後將各個已經正則表示的列用’|’進行分開顯示：
var rs = [row]
rs.push('0'+'|' + rows[0].join('|')+'|')
rs.push(row);
console.log(rs.join('|'));
Push則用於將其中的字符等扔入數組中，最後顯示如圖：
之後進行for循環輸出：（其實可以從0開始循環，但爲了確定效果，先顯示了一下）
for(let i =1;i<rows.length;i++){
rs.push('|'+i+'|' + rows[i].join('|')+'|')
}
並基於結果進行代碼修改：最終顯示代碼：
let row = "".padStart(rows[0].length * 5,'-');
var rs = [row]
rs.push('|0'+'|' + rows[0].join('|')+'|')
for(let i =1;i<rows.length;i++){
rs.push('|'+i+'|' + rows[i].join('|')+'|')
}
console.log(rs.join('\r\n'));
最終結果圖：
但是很顯然，這個還不是最後的結果，應該是有一個方法可以如padStart類似的按最大的列寬進行填充
但是由於無法找到相關方法，考慮到之前使用的padStart（）和padEnd（）是用於補充，於是再次修改：
先聲明兩個var用於獲取某一行的最大列數和某一列中最多元素
var len : number = 0; //表示某一列最長值
var line :number = 0;
var rows :any[] | string [] = test.split('\n');
//console.log(rows.length);
//此時rows.length表示的就是行數：7行
for(let i = 0;i<rows.length;i++){
//這裏將列進行分割
rows[i] = rows[i].split(',');
for(let j = 0;j<rows[i].length;j++){
if(line < rows[i].length){
line = rows[i].length;//獲取某一行的最長列數
}
if(len < rows[i][j].length){
len = rows[i][j].length;//獲取某一列的最長值
};
}
//這裏的rows[i].length對應的就是每一行的列數
}
之後試着先將最上的分割符打印出來：
let row = "".padStart(rows[0].length *12 +1,'-');
var rs = [row];
var str = "";
console.log(rs.join('\n'));
再後面就是對各個數組元素的輸出：
因爲最開始使用的是rs.push()，會直接將數據換行輸出，但沒有找到不換行的，便直接新定義一個str，用於將元素和分割一起組裝，再最後直接輸出即可。
但是會存在一個問題，就是不一樣的列輸出並不會智能的補全，這裏當時是應該在第二重循環下可以令j<line便能完成，但遺憾的是之前對文件進行分割時是以數組的方式進行存放，每一行對應的列數是固定的，當超出時便會報錯，而手動修改則失去了對文件轉換的意義，留作以後再次考慮。
for(let i = 0;i<rows.length;i++){
let left = "".padStart((len-1)/2+1,' ');
let right = "".padEnd((len)/2,' ');
// rs.push('|'+left+i+right+'|');
str+='|'+left+i+right;
for(let j = 0;j<rows[i].length;j++){
/** 注意在這裏時會有一個問題，就是在進行數據拆分時是有列數較其他行小，
* 而在此循環中，每一行輸出，但是有不存在的一列的話是無法輸出，要麼
* 自己手動輸出，但是無法把文件修改的前提下轉換輸出
*/
let fullleft = "".padStart((len-rows[i][j].length)/2+1,' ');
let fullright = "".padEnd((len-rows[i][j].length+1)/2,' ');
str+='|'+fullleft+rows[i][j]+fullright;
// rs.push('|'+fullleft+rows[i][j]+fullright+'|');
}
str += '|'+"\n";
// rs.push('|'+i+'|' + rows[i].join('|')+'|')
}
console.log(str);
最終結果：
