TypeScript学习笔记之一——环境搭建与实例

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);

最终结果：