Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
9ef4835a
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3592
Star
108
Fork
920
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
108
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
108
合并请求
108
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
9ef4835a
编写于
8月 21, 2023
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
完善type文档
上级
b59afada
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
195 addition
and
1 deletion
+195
-1
docs/uts/data-type.md
docs/uts/data-type.md
+194
-0
docs/uts/type-aliases.md
docs/uts/type-aliases.md
+1
-1
未找到文件。
docs/uts/data-type.md
浏览文件 @
9ef4835a
...
...
@@ -1000,6 +1000,200 @@ console.log(baz);
const
l
=
b
!
.
length
```
### type自定义类型@type
`type`
是关键字,用于给一个类型起别名,方便在其他地方使用。
下面是一个简单的示例,给number类型起个别名
`tn`
,在定义变量i时,可以用
`:tn`
。
```
ts
type
tn
=
number
let
i
:
tn
=
0
// 等同于 let i:number = 0
```
上述简单的例子在实际开发中没有意义。在 ts 中常见的用途是给联合类型命名,方便后续简化使用。但 uts 在app端不支持联合类型。
#### 把json对象转为type
在 uts 中,type最常见的用途是把json数据转为自定义类型。也就是为json数据提供了一个类型描述。这样json数据就可以继续使用
`.`
操作符了。
```
ts
type
PersonType
=
{
id
:
number
,
name
:
string
,
age
:
number
}
```
上述代码,定义了一个 PersonType 类型。变量一旦被赋予PersonType类型,就意味着变量是一个对象,包含3个属性,number类型的id属性、string类型的name属性、number类型的age属性。
然后我们给变量person赋予上面定义的PersonType类型:
```
ts
let
person
:
PersonType
=
{
id
:
1
,
name
:
"
zhangsan
"
,
age
:
18
}
console
.
log
(
person
.
name
)
//返回zhangsan
```
可以看到,变量person,和js里使用json没有任何区别了。支持
`.`
操作符,无需下标,可跨平台。
所以在ts开发中,很多开发者就会把缺少类型的json数据变成一个type,继续像js里那样使用这个json数据。
但是在uts中,由于interface的概念在kotlin和swift有其他用途,所以uts中推荐开发者把json转成一个type,而不是interface。
#### 把json数组转为type
上面的例子中,数据是json对象,下面再来定义一个json数组。
```
ts
let
personList
=
[
{
id
:
1
,
name
:
"
zhangsan
"
,
age
:
18
},
{
id
:
2
,
name
:
"
lisi
"
,
age
:
16
},
]
as
PersonType
[]
console
.
log
(
personList
[
0
].
name
);
//返回zhangsan
```
把一个json数组 as 成自定义类型的数组,就可以像在js中那样随便使用json数据了。
#### null的处理
但是需要注意,json数据可能不规范,有些属性缺失,此时就需要在定义type时设可为空:
```
ts
type
PersonType
=
{
id
:
number
,
name
:
string
,
age
:
number
|
null
}
let
personList
=
[
{
id
:
1
,
name
:
"
zhangsan
"
,
age
:
18
},
{
id
:
2
,
name
:
"
lisi
"
},
// age数据为空
]
as
PersonType
[]
console
.
log
(
personList
[
1
].
age
);
//null
```
#### 嵌套
json对象往往有嵌套,即子对象。比如
```
json
{
id:
1
,
name:
"zhangsan"
,
age:
18
,
address:
{
city:
"beijing"
,
street:
"dazhongsi road"
}
}
```
如果要给Person类型再加一个子对象 address,下面又有2个属性 city、street,该怎么写呢? 因为冒号已经用于类型定义,子对象就没有声明类型的地方了。
```
ts
type
PersonType
=
{
id
:
number
,
name
:
string
,
age
:
number
,
address
:
{
// 错误,这里的address需要单独声明类型
city
:
string
,
street
:
string
}
}
```
要解决这个问题,需要把 address 作为一个单独的类型来定义。
```
ts
type
PersonAddressType
=
{
city
:
string
,
street
:
string
}
type
PersonType
=
{
id
:
number
,
name
:
string
,
age
:
number
,
address
:
PersonAddressType
// 把address定义为PersonAddress类型
}
```
这里还要注意代码的执行顺序,执行
`address: PersonAddress`
时,这个类型必须已经被定义过。所以要被引用的类型必须定义在前面,后面才能使用这个类型。
那么嵌套的完整写法例子:
```
ts
type
PersonAddressType
=
{
city
:
string
,
street
:
string
}
type
PersonType
=
{
id
:
number
,
name
:
string
,
age
:
number
,
address
:
PersonAddressType
// 把address定义为PersonAddress类型
}
let
person
=
{
id
:
1
,
name
:
"
zhangsan
"
,
age
:
18
,
address
:
{
city
:
"
beijing
"
,
street
:
"
dazhongsi road
"
}
}
as
PersonType
console
.
log
(
person
.
address
.
city
)
//beijing
```
注意,在HBuilderX 3.9以前,有子对象的对象字面量或UTSJSONObject,无法直接被 as 为有嵌套的type,也需要对子对象进行 as 。
```
ts
let
person
=
{
id
:
1
,
name
:
"
zhangsan
"
,
age
:
18
,
address
:
{
city
:
"
beijing
"
,
street
:
"
dazhongsi road
"
}
as
PersonAddressType
// HBuilderX 3.9前需对子对象单独 as
}
as
PersonType
```
#### json转type工具
如果json数据属性较多、嵌套较多,那么为json数据编写type类型定义,也是一件繁琐的事情。
HBuilderX 3.9起内置了一个json转type工具,在json编辑器中右键,选择json转type,即可根据json数据内容自动推导生成type定义。
#### 为vue的data中的json定义类型
uvue文件中data中的json数据也涉及类型定义。此时注意:type定义必须放在
`export default {}`
前面。
```
ts
<
script
>
type
PersonType
=
{
id
:
number
,
name
:
string
}
export
default
{
data
()
{
return
{
personList
:
[
{
id
:
1
,
name
:
"
zhangsan
"
},
{
id
:
2
,
name
:
"
lisi
"
},
]
as
PersonType
[],
}
},
onLoad
()
{
console
.
log
(
this
.
personList
[
0
].
name
);
//zhangsan
}
}
<
/script>
```
<!--
大多数情况下,data里的json数据是空的,联网从服务器取到一段json字符串,然后再赋值并转type。
```
html
```
TODO type自定义类型的方法
-->
### 其他
-
关于undefined
...
...
docs/uts/type-aliases.md
浏览文件 @
9ef4835a
#
类型别名
(Type Aliases)
#
type
(Type Aliases)
使用类型别名可以为任何类型命名。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录