Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
yifu-study-front-share
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Schedules
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
yifu-study
front
yifu-study-front-share
Commits
62239d55
Commit
62239d55
authored
Apr 25, 2022
by
wangxuxiao
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
ssh://192.168.1.110:10022/yifu-study/front/yifu-study-front-share
parents
5e4193bd
c7bd7c02
Pipeline
#15674
canceled with stage
Changes
4
Pipelines
1
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
472 additions
and
0 deletions
+472
-0
settings.json
.vscode/settings.json
+3
-0
typescript的高级类型详解.md
source/_posts/typescript的高级类型详解.md
+230
-0
webpack多页面配置.md
source/_posts/webpack多页面配置.md
+0
-0
用xlsx-style玩转Excel导出——像手动操作Excel表格一样用JS操作Excel.md
.../_posts/用xlsx-style玩转Excel导出——像手动操作Excel表格一样用JS操作Excel.md
+239
-0
No files found.
.vscode/settings.json
0 → 100644
View file @
62239d55
{
"eggHelper.serverPort"
:
53395
}
\ No newline at end of file
source/_posts/typescript的高级类型详解.md
0 → 100644
View file @
62239d55
---
title: TypeScript高级类型详解
date: 2022/4/22 17:30:00
tags:
-
前端
-
typescript
author: 杨靖
---
## typescript的高级类型详解
当了解到typescript的基础类型外,在开发过程中,为了应对多变的复杂场景,我们需要了解一下typescript的高级类型。所谓高级类型,是typescript为了保证语言的灵活性,所使用的一下
**语言特性**
。这些特性有助于我们应对复杂多变的开发场景。
<!-- more -->
#### 一、交叉类型
将多个类型合并成一个类型,新的类型将具有所有类型的特性,所以交叉类型特别适用对象混入的场景。
```
typescript
interface
Dog
{
run
():
void
}
interface
Cat
{
jump
():
void
}
let
pet
:
Dog
&
Cat
=
{
run
(){},
jump
(){}
}
```
#### 二、联合类型
声明的类型并不确定,可以为多个类型中的一个
```
typescript
let
a
:
number
|
string
=
'111'
;
//限定变量的取值
let
ba
:
'a'
|
'b'
|
'c'
;
//字符串的字面量联合类型
let
ca
:
1
|
2
|
3
;
//数字的联合类型
```
对象的联合类型
```
typescript
interface
Dogs
{
run
():
void
}
interface
Cats
{
jump
():
void
}
class
dog
implements
Dogs
{
//类实现接口
run
(){}
eat
(){}
}
class
cat
implements
Cats
{
jump
(){}
eat
(){}
}
enum
Master
{
Boy
,
Girl
};
function
getPet
(
master
:
Master
){
let
pet
=
master
===
Master
.
Boy
?
new
dog
()
:
new
cat
();
//pet被推断为dog和cat的联合类型
//如果一个对象是联合类型,在类型未确定的时候,他就只能访问所有类型的共有成员,所以能访问eat()
pet
.
eat
();
pet
.
run
();
//报错
return
pet
;
}
```
#### 三、索引类型
```
typescript
let
obj
=
{
a
:
1
,
b
:
2
,
c
:
3
}
// 获取对象中的指定属性的值集合
function
getValues
(
obj
:
any
,
keys
:
string
[])
{
return
keys
.
map
(
key
=>
obj
[
key
])
}
// 抽取指定属性的值
console
.
log
(
getValues
(
obj
,
[
'a'
,
'b'
]))
// [1, 2]
// 抽取obj中没有的属性:
console
.
log
(
getValues
(
obj
,
[
'e'
,
'f'
]))
// [undefined, undefined]
```
虽然obj中并不包含e, f属性,但typescript编译器并未报错。此时使用typescript索引类型,对这种模式做类型约束。
**keyof**
keyof是索引类型查询操作符。
假设T是一个类型,那么keyof T产生的类型是T的属性名称字符串字面量类型构成的联合类型。
特别说明:T是数据类型,并非数据本身。
```
typescript
// 定义一个接口Obj含有属性a,b
interface
obj
{
a
:
number
b
:
string
}
// 定义变量key,类型为keyof Obj
let
key
:
keyof
obj
```
T是一个类型,T
[
K
]
表示类型T中属性K的类型
```
typescript
interface
obj
{
a
:
number
b
:
string
}
// 定义变量key,类型为keyof Obj
let
key
:
keyof
obj
let
value
:
obj
[
'a'
]
```
所以上面的代码可以这样改造
```
typescript
function
getValues
<
T
,
K
extends
keyof
T
>
(
obj
:
T
,
keys
:
K
[]):
T
[
K
][]
{
return
keys
.
map
(
key
=>
obj
[
key
])
}
let
obj
=
{
a
:
1
,
b
:
2
,
c
:
3
}
// 抽取指定属性的值
console
.
log
(
getValues
(
obj
,
[
'a'
,
'b'
]))
// [1, 2]
// 抽取obj中没有的属性:
console
.
log
(
getValues
(
obj
,
[
'e'
,
'f'
]))
// [undefined, undefined]
```
#### 四、映射类型
typescript 允许将一个类型映射成另外一个类型
**Readonly**
Readonly是 typescript 内置的泛型接口,可以将一个接口的所有属性映射为只读:
```
typescript
// 定义接口Obj
interface
Obj
{
a
:
number
b
:
string
c
:
boolean
}
// 使用类型别名定义类型ReadonlyObj
type
ReadonlyObj
=
Readonly
<
Obj
>
// Readonly是TS内置的泛型接口
```
node_module/typescript/lib/lib.es5.d.ts 中可以看到 typescript 内部是如何实现 Readonly 的
```
typescript
type
Readonly
<
T
>
=
{
readonly
[
P
in
keyof
T
]:
T
[
P
];
};
```
从源码可以看出Readonly是一个可索引类型的泛型接口
1、索引签名为P in keyof T :
其中keyof T就是一个一个索引类型的查询操作符,表示类型T所有属性的联合类型
2、P in :
相当于执行了一个for in操作,会把变量P依次绑定到T的所有属性上
3、索引签名的返回值就是一个索引访问操作符 : T
[
P
]
这里代表属性P所指定的类型
4、最后再加上Readonly就把所有的属性变成了只读,这就是Readonly的实现原理
**Partial**
将一个接口的所有属性映射为可选:
```
typescript
interface
Obj
{
a
:
number
b
:
string
c
:
boolean
}
type
PartialObj
=
Partial
<
Obj
>
```
**Record**
Record会利用已有的类型,创建新属性的映射类型
```
typescript
interface
Obj
{
a
:
number
b
:
string
c
:
boolean
}
type
RecordObj
=
Record
<
'x'
|
'y'
,
Obj
>
```
第一个参数是预定义的新属性,比如x,y
第二个参数就是已知类型
#### 五、条件类型
条件类型是一种由条件表达式所决定的类型 。条件类型使类型具有了不唯一性,同样增加了语言的灵活性
```
typescript
T
extends
U
?
X
:
Y
若类型
T
可被赋值给类型
U
,
那么结果类型就是
X
类型
,
否则就是
Y
类型
```
```
typescript
// 条件类型
type
TypeName
<
T
>
=
T
extends
string
?
'string'
:
T
extends
number
?
'number'
:
T
extends
boolean
?
'boolean'
:
T
extends
undefined
?
'undefined'
:
T
extends
Function
?
'Function'
:
'object'
// 定义类型T1为条件类型,传入参数string,指定t1为string类型
type
T1
=
TypeName
<
string
>
// T1为 string
// 定义类型T2为条件类型,传入参数string[]
type
T2
=
TypeName
<
string
[]
>
// T2为 object
```
source/_posts/webpack多页面配置.md
0 → 100644
View file @
62239d55
This diff is collapsed.
Click to expand it.
source/_posts/用xlsx-style玩转Excel导出——像手动操作Excel表格一样用JS操作Excel.md
0 → 100644
View file @
62239d55
---
title: 用xlsx-style玩转Excel导出——像手动操作Excel表格一样用JS操作Excel
date: 2022/4/25 09:15:20
tags:
-
前端
-
xlsx-style
-
JavaScript
author: 李燕
---
JS里比较知名的Excel导出插件sheetJS免费版没办法修改样式,能修改样式的专业版又要收费,所以我们项目中基本都用xlsx-style实现定制化的Excel导出。
该插件实际上是sheetJS延伸出来的,虽然用了很多次了,但对于该该插件涉及的诸多概念、属性都不是很清晰。所以想通过本文的整理,对该插件的相关概念有一个完整的、清晰的认知,以更好地服务后续项目。
<!-- more -->
**一. 插件安装**
安装命令如下:
```
js
npm
i
xlsx
-
style
--
save
```
但是安装完使用的时候会报错,解决办法如下:
找到
\n
ode_modules
\x
lsx-style
\d
ist
\c
pexcel.js,将807行 的 var cpt = require(’./cpt’ + ‘able’);改成 var cpt = cptable即可。
**二、概念介绍**
(一)workbook Object
即工作簿对象,其常用属性如下:
1.
`SheetNames`
: 该属性的值是一个数组,用来存储工作表(sheet)的名称。
2.
`Sheets`
: 该属性的值是一个对象,用来存储所有工作表(sheet)对象。
通过
`Sheets[SheetNames]`
即可返回对应名称的工作表(sheet)对象。
(二)worsheet Object
即工作表对象,其常用属性如下:
1.
每个不以
`!`
开头的属性,都代表一个单元格。例如
`A1`
属性,其值为
`A1`
单元格对象。
2.
`!ref`
: 该属性的值是一个字符串,用来表示工作表范围,如:
`“A1:B5”`
3.
`!cols`
: 该属性的值是一个对象数组,用来设置列宽。如:
```js
[
{ wpx: 100 }, //设置第1列列宽为200像素
{ wch: 50 }, // 设置第2列列宽为30字符
]
```
4.
`!merges`
: 该属性的值是一个对象数组,用来合并单元格。如:
```js
[
{ // 合并B2到D4范围内的单元格
s: { c: 1, r: 1 }, // start:B2
e: { c: 3, r: 3 }, // end:D4
}
]
```
5.
`!freeze`
: 该属性的值是一个对象,用来冻结单元格(所谓冻结,即鼠标滚动时,该行/该列固定不动)。如:
```js
{
xSplit: '1', // 冻结列
ySplit: '1', // 冻结行
topLeftCell: 'B2', // 在未冻结区域的左上角显示的单元格,默认为第一个未冻结的单元格。
state: 'frozen',// 状态为冻结的
}
```
6.
打印相关的属性
`!rowBreaks`
: 该属性的值是一个数组,用来设置行分页。如:
`[1,3]`
,表示第1行为一页,第2行和第三行为一页,第三行之后为一页
`!colBreaks`
: 该属性的值是一个数组,用来设置列分页。如:
`[1,3]`
,表示第1列为一页,第2列和第三列为一页,第三列之后为一页
`!pageSetup`
: 该属性的值是一个对象,用来设置缩放大小和打印方向。如:
```js
{
scale: '100', // 缩放100%
orientation: 'portrait' //打印方向为纵向
}
// orientation 取值如下: 'portrait' - 纵向 'landscape' - 横向
```
`!printHeader`
: 该属性的值是一个数组,用于分页时设置重复打印的表头,如
`[1,3]`
,表示需要重复打印的表头为第一行到第三行。
(三)cell Object
即单元格对象。格式如下:
```js
{
c: C, // C代表列号
r: R, // r代码行号
}
```
如果想表示单元格范围,则可以如下表示:
```js
{
s: S, // S表示第一个单元格对象
e:E, // e表示最后一个单元格对象
}
```
在工作表对象中设置一个单元对象,是以编码后的单元格为属性,进行设置。例如:
```js
A1: {
v: '123',
t: 's',
s: {}
}
```
`v`
: 单元格的值
`t`
: 单元格的类型,b布尔值、n数字、e错误、s字符串、d日期
`s`
: 单元格的样式
**三、编码操作**
利用
`XLSX.Utils`
对象中的以下方法,可以对单元格和单元格范围进行转化,让我们方便地操作单元格。
```js
//编码行号
XLSX.utils.encode_row(2); //"3"
//解码行号
XLSX.utils.decode_row("2"); //1 /
/编码列标
XLSX.utils.encode_col(2); //"C"
//解码列标
XLSX.utils.decode_col("A"); //0
//编码单元格
XLSX.utils.encode_cell({ c: 1, r: 1 }); //"B2"
//解码单元格
XLSX.utils.decode_cell("B1"); //{c: 1, r: 0}
//编码单元格范围
XLSX.utils.encode_range({ s: { c: 1, r: 0 }, e: { c: 2, r: 8 } }); //"B1:C9"
//解码单元格范围
XLSX.utils.decode_range("B1:C9"); //{s:{c: 1, r: 0},e: {c: 2, r: 8}}
```
**四、样式设置**
设置单元格的样式,就是设置工作表对象中的单元格对象的s属性。这个属性的值也是一个对象。它有五个属性,具体如下:
`fill`
: 填充属性,其子属性如下:
-
patternType: 设置填充时的图案样式,取值如下:none、solid、darkGray、mediumGray、lightGray、gray125、gray0625、darkHorizontal、darkVertical、 darkDown、darkUp、darkGrid、darkTrellis、lightHorizontal、lightVertical、lightDown、lightUp、 lightGrid、lightTrellis
-
bgColor: 设置填充时的图案背景色,是一个对象,取值如:{rgb: "FFFFAA00"}(十六进制ARGB值), 或{theme: "1"}(主题颜色的整数索引,默认是'0')
-
bgColor: 设置填充时的图案前景色,取值同bgColor属性。
`font`
: 字体属性,其子属性如下:
-
name: 字体名称,值为字符串
-
sz: 字号,值为数字
-
color: 字体颜色,值为对象,同上述bgColor
-
bold: 加粗,值为true 或 fasle
-
underline:下划线,值为true 或 fasle
-
italic:倾斜,值为true 或 fasle
-
italic:倾斜,值为true 或 fasle
-
strike:删除线,值为true 或 fasle
-
vertAlign:上标或下标,值为'superscript'或 'subscript'
`numFmt`
: 对数字类型的单元格进行格式化,其值为字符串或数字,如:{ numFmt: 'yyyy/m/d h:mm'} 或 { numFmt: '
[
=1
]
"男";
[
=0
]
"女"'},具体格式化规则参见Excel中设置单元格格式中的数字格式设置。
`alignment`
: 对其属性,其子属下如下:
-
vertical: 垂直对齐,值为"bottom"、"center"或 "top"
-
horizontal: 水平对齐,值为"left"、"center"或 "right"
-
wrapText:自动换行,值为true 或 false
-
readingOrder:文字方向,值为数字0(根据内容决定)、1(从左到有) 或 2(从右到左)
-
textRotation:文本旋转角度,值为数字,0至180或 255(垂直排列) ,默认为0
`alignment`
: 对其属性,其子属下如下:
-
top:上边框样式,值为对象,如:{style: 'thin', color:{rgb: "FFFFAA00"}},其中,style的值集包括:thin、medium、thick、dotted、hair、dashed、mediumDashed、dashDot、mediumDashDot、dashDotDot、mediumDashDotDot、slantDashDot、double
-
bottom: 下边框样式,值同top
-
left: 左边框样式,值同top
-
right: 右边框样式,值同top
-
diagonalUp: 上对角线,值为true 或 fasle
-
diagonalDown: 下对角线,值为true 或 fasle
**五、数据输出**
xlsx-style有两个输出数据的方法
`write`
和
`writeFile`
方法。因为 writeFile方法需要基于 node 环境才可以使用,我们常用的是write方法,所以此处重点介绍以write方法。
```js
XLSX.write(workbook, wopts)
```
workbook参数即是我们要导出的工作簿对象,上面已经介绍过。
wopt参数也是一个对象,其属性如下:
`type`
: 输出数据类型,值集包括:"base64"、"binary"(二进制字符串)、"buffer"(node.js缓冲区)、"file"(直接创建文件,node环境下有效)
`cellDates`
:是否将日期存储为类型'd'(默认为'n'),默认为fasle
`bookType`
: 工作簿的类型(xlsx、xlsm或 xlsb),默认为xlsx
`showGridLines`
: 是否显示网格线,默认为true
`Props`
: 可以设置为一个对象,存入以下与工作簿相关的信息,其子属性包括:title、subject(主题)、creator(创建者)、keywords(关键字)、description(描述)
**六、后记**
本篇文章仅仅是对xlsx-style相关的概念、属性和方法进行了一个详细的整理,至于如何利用xlsx-style玩转Excel实现定制化的导出,我们下篇文章再细说。
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment