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,结束。
注意:如果先打开vscode再安装node.js,会存在终端无法打开npm的情况,这时候关闭vscode,等node.js安装完成后重新打开vscode即可。
- 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,开始调试,(注意,如果tsc显示外部命令,那么是你的typescript还没有安装:在系统终端cmd下安装typescipt即可:npm install -g typescript ;如果,你已经安装了但cmd下tsc -v 没有显示,那么可以将node.js卸载重装,然后修改系统路径,把用户和系统的PATH全填上后重启即可)可以安装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);
最终结果: