Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
937d1a77
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
937d1a77
编写于
4月 01, 2024
作者:
雪洛
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: 更新类型兼容性文档
上级
4ad28db5
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
75 addition
and
131 deletion
+75
-131
docs/uts/type-compatibility.md
docs/uts/type-compatibility.md
+74
-0
docs/web/README.md
docs/web/README.md
+1
-131
未找到文件。
docs/uts/type-compatibility.md
浏览文件 @
937d1a77
...
@@ -45,3 +45,77 @@ const person3: IPerson = {
...
@@ -45,3 +45,77 @@ const person3: IPerson = {
}
}
}
as
PersonObject
// 错误,PersonObject 类型与 IPerson 无关只是结构相同
}
as
PersonObject
// 错误,PersonObject 类型与 IPerson 无关只是结构相同
```
```
### 运行时类型保留
不同于ts编译后完全抹除类型,uts在运行时保留了部分类型信息。通常是定义type后,创建此type对应的实例时,会保留此实例的类型信息。
例如:
```
ts
type
Obj
=
{
a
:
number
}
const
obj
=
{
a
:
1
}
as
Obj
// 此时obj的类型为Obj,运行时可以使用 obj instanceof Obj
console
.
log
(
obj
instanceof
Obj
)
// true
const
result
=
JSON
.
parse
<
Obj
>
(
`{"a": 1}`
)
// 此时返回的对象类型为Obj
console
.
log
(
result
instanceof
Obj
)
// true
```
**注意**
-
目前 web端
`uni.request`
传入泛型时不会创建对应类型的实例,会直接抹除类型信息,后续可能会调整为创建泛型类型对应的实例,请勿利用此特性。
-
web端仅项目内定义的类型可以被实例化,uni-app-x内部定义的类型无法被实例化,例如
`const options = { url: 'xxx' } as RequestOptions`
,并不会将此对象转化为RequestOptions的实例,运行时也没有
`RequestOptions`
对应的类型信息。
### any类型
不同于ts,uts中any类型不包含null类型。
例如定义可选参数时应使用下面的写法:
```
ts
function
test
(
anything
?:
any
|
null
)
{
// 注意带上问号
console
.
log
(
anything
)
}
```
### 可选属性
如果属性在类型中是可选值需要使用下面的写法,不要省略问号和
`| null`
```
ts
type
Options
=
{
num
?:
number
|
null
}
```
### void/undefined类型
为保证多端统一应尽量避免使用undefined、void类型,可以使用null代替。如果需要判断是否为null建议使用两个等号,不要使用三个等号(此处使用了js的特性
`undefined == null`
结果为true)。
### String、Number、Boolean类型
ts内string、number、boolean类型与String、Number、Boolean类型并不相同。
```
ts
let
str1
:
String
=
'
1
'
let
str2
:
string
=
'
2
'
str1
=
str2
// 不报错
str2
=
str1
// 报错 Type 'String' is not assignable to type 'string'
```
尽量使用string、number、boolean类型替代String、Number、Boolean类型。
### import type@import-type
由于uts会为as为某些类型的对象字面量创建这个类型对应的实例,所以经常会存在一些类型引入后是作为值使用而不是作为类型使用。应尽量不要使用
`import type`
用法,避免编译结果出错。
```
ts
import
type
{
TypeA
}
from
'
./type
'
// 避免使用
import
{
TypeA
}
from
'
./type
'
// 推荐用法
```
docs/web/README.md
浏览文件 @
937d1a77
...
@@ -134,137 +134,7 @@ type XxxComponentPublicInstanceEmit = (event: 'change' | 'input', ...args: any[]
...
@@ -134,137 +134,7 @@ type XxxComponentPublicInstanceEmit = (event: 'change' | 'input', ...args: any[]
## uts
## uts
uts内编译到web端时可以使用任何ts特性。包括undefined、联合类型等。
参考:
[
类型兼容性
](
../uts/type-compatibility.md
)
### 运行时类型保留
不同于ts编译后完全抹除类型,uts在运行时保留了部分类型信息。通常是定义type后,创建此type对应的实例时,会保留此实例的类型信息。
例如:
```
ts
type
Obj
=
{
a
:
number
}
const
obj
=
{
a
:
1
}
as
Obj
// 此时obj的类型为Obj,运行时可以使用 obj instanceof Obj
console
.
log
(
obj
instanceof
Obj
)
// true
const
result
=
JSON
.
parse
<
Obj
>
(
`{"a": 1}`
)
// 此时返回的对象类型为Obj
console
.
log
(
result
instanceof
Obj
)
// true
```
**注意**
-
目前
`uni.request`
传入泛型时不会创建对应类型的实例,会直接抹除类型信息,后续可能会调整为创建泛型类型对应的实例,请勿利用此特性。
-
仅项目内定义的类型可以被实例化,uni-app-x内部定义的类型无法被实例化,例如
`const options = { url: 'xxx' } as RequestOptions`
,并不会将此对象转化为RequestOptions的实例,运行时也没有
`RequestOptions`
对应的类型信息。
### this指向问题
安卓端this只会指向其所在的类的实例,而编译到js后this的值取决于它出现的上下文:函数、类或全局。参考:
[
MDN this
](
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this
)
以下述代码为例
```
vue
<
template
>
<view></view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
''
}
},
methods
:
{
getTitle
()
{
uni
.
request
({
url
:
'
xxx
'
,
success
()
{
this
.
title
=
'
xxx
'
}
})
}
}
}
</
script
>
```
上述代码中的this在安卓端会指向页面/组件实例,在web端会指向uni.request的参数。为保证多端一致,建议在上面的场景使用this时搭配箭头函数。上述代码修改为下面的写法后即可兼容多端
```
vue
<
template
>
<view></view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
''
}
},
methods
:
{
getTitle
()
{
uni
.
request
({
url
:
'
xxx
'
,
success
:
()
=>
{
this
.
title
=
'
xxx
'
}
})
}
}
}
</
script
>
```
### any类型
不同于ts,uts中any类型不包含null类型。
例如定义可选参数时应使用下面的写法:
```
ts
function
test
(
anything
?:
any
|
null
)
{
// 注意带上问号
console
.
log
(
anything
)
}
```
同样如果属性在类型中是可选值也需要使用下面的写法
```
ts
type
Options
=
{
num
?:
number
|
null
}
```
### void/undefined类型
为保证多端统一应尽量避免使用undefined、void类型,可以使用null代替。如果需要判断是否为null建议使用两个等号,不要使用三个等号(此处使用了js的特性
`undefined == null`
结果为true)。
### String、Number、Boolean类型
ts内string、number、boolean类型与String、Number、Boolean类型并不相同。
```
ts
let
str1
:
String
=
'
1
'
let
str2
:
string
=
'
2
'
str1
=
str2
// 不报错
str2
=
str1
// 报错 Type 'String' is not assignable to type 'string'
```
尽量使用string、number、boolean类型替代String、Number、Boolean类型。
### import type@import-type
由于uts会为as为某些类型的对象字面量创建这个类型对应的实例,所以经常会存在一些类型引入后是作为值使用而不是作为类型使用。应尽量不要使用
`import type`
用法,避免编译结果出错。
```
ts
import
type
{
TypeA
}
from
'
./type
'
// 避免使用
import
{
TypeA
}
from
'
./type
'
// 推荐用法
```
## css
## css
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录