提交 886684f6 编写于 作者: W wanganxp

文档

上级 cfa35436
...@@ -3,24 +3,24 @@ ...@@ -3,24 +3,24 @@
* [编译器](compiler/README.md) * [编译器](compiler/README.md)
* [manifest.json](manifest.md) * [manifest.json](manifest.md)
* 组件 * 组件
* [animation-view](component/animation-view.md) * [view](component/view.md)
* [button](component/button.md) * [scroll-view](component/scroll-view.md)
* [checkbox](component/checkbox.md) * [list-view](component/list-view.md)
* [swiper](component/swiper.md)
* [text](component/text.md)
* [rich-text](component/rich-text.md)
* [image](component/image.md) * [image](component/image.md)
* [input](component/input.md) * [input](component/input.md)
* [list-view](component/list-view.md) * [textarea](component/textarea.md)
* [button](component/button.md)
* [checkbox](component/checkbox.md)
* [radio](component/radio.md)
* [picker-view](component/picker-view.md) * [picker-view](component/picker-view.md)
* [progress](component/progress.md) * [progress](component/progress.md)
* [radio](component/radio.md)
* [rich-text](component/rich-text.md)
* [scroll-view](component/scroll-view.md)
* [slider](component/slider.md) * [slider](component/slider.md)
* [swiper](component/swiper.md)
* [switch](component/switch.md) * [switch](component/switch.md)
* [text](component/text.md)
* [textarea](component/textarea.md)
* [video](component/video.md) * [video](component/video.md)
* [view](component/view.md) * [animation-view](component/animation-view.md)
* [API](api.md) * [API](api.md)
* CSS * CSS
* [CSS概述](css/README.md) * [CSS概述](css/README.md)
...@@ -112,7 +112,9 @@ ...@@ -112,7 +112,9 @@
* [INode](dom/inode.md) * [INode](dom/inode.md)
* [CSSStyleDeclaration](dom/cssstyledeclaration.md) * [CSSStyleDeclaration](dom/cssstyledeclaration.md)
* [DrawableContext](dom/drawablecontext.md) * [DrawableContext](dom/drawablecontext.md)
* [事件系统](dom/event.md) * 事件event
* [事件系统概述](event.md)
* [通用事件](event-common.md)
* [性能](performance.md) * [性能](performance.md)
<!-- * [新建项目]() <!-- * [新建项目]()
* [1. 通过 HBuilderX 可视化界面](quickstart-hx.md) * [1. 通过 HBuilderX 可视化界面](quickstart-hx.md)
......
...@@ -34,13 +34,13 @@ data里`:`的用途是赋值,无法通过`:`定义类型,所以data的数据 ...@@ -34,13 +34,13 @@ data里`:`的用途是赋值,无法通过`:`定义类型,所以data的数据
<script lang="uts"> <script lang="uts">
type User = { type User = {
name:string name:string
} } //定义一个User类型
export default { export default {
data() { data() {
const date = new Date() //自动推导类型为Date const date = new Date() //自动推导类型为Date
const v = 1; //自动推导为number const v = 1; //自动推导为number
return { return {
buttonEnable: false, buttonEnable: false, //自动推导为boolean
s1 : "hello", // 根据字面量推导为string s1 : "hello", // 根据字面量推导为string
n1 : 0 as number, // 这里其实可以根据字面量自动推导,as number写不写都行 n1 : 0 as number, // 这里其实可以根据字面量自动推导,as number写不写都行
n2, // 不合法,必须指定类型。真实运行时请删掉本行 n2, // 不合法,必须指定类型。真实运行时请删掉本行
...@@ -79,23 +79,51 @@ data里`:`的用途是赋值,无法通过`:`定义类型,所以data的数据 ...@@ -79,23 +79,51 @@ data里`:`的用途是赋值,无法通过`:`定义类型,所以data的数据
</style> </style>
``` ```
## 模板函数 event 参数需显式指定类型 ## 模板函数 event 参数的类型
上面的例子中,touchstart事件中必须对`e`指定类型,才能使用`e.touches[0].screenX`。下面再举一个例子,加深下记忆:
```vue
<template>
<switch @change="switchChange" />
</template>
<script lang="uts">
export default {
methods: {
switchChange: function (e : SwitchChangeEvent) { // 这里必须声明e的类型为SwitchChangeEvent
console.log('switch 发生 change 事件,携带值为', e.detail.value)
}
}
}
</script>
```
那event参数的类型从哪里获取呢?
1. 组件的文档中有介绍,比如[switch的组件](component/switch.md)
2. ide中有提示,比如鼠标移到switch组件的`@change`上,悬浮出现hover,会显示:`(property) 'change': (event: SwitchChangeEvent) => void`
```html ```html
<view @click="(e: any) => foo(e)">event must has type</view> <view @click="(e: any) => foo(e)">event must has type</view>
<view @click="foo($event as MouseEvent)">event must has type</view> <view @click="foo($event as MouseEvent)">event must has type</view>
``` ```
## JSON的类型注意 ## JSON的类型
JSON在强类型语言中使用时,不能像js那样随意。这部分内容较长,[详见](../uts/data-type.md#JSON) JSON数据在强类型语言中使用时,不能像js那样随意。
js中可以这么写:
```js
var p ={"name": "zhangsan","age": 12}
p.age //12
```
## 不同的函数定义方式有不同的限制 但是在强类型语言中,如果想要使用`p.age`,那么p必须是一个对象,而age则是这个对象的属性。然后必须为p对象、name属性、age属性,都定义类型,比如name是string,age是number。
* 函数声明方式不支持[作为值传递](../uts/function.md#作为值传递) uts中有2种方式使用json数据:
* 函数表达式方式不支持[默认参数](../uts/function.md#默认参数) 1. 把json数据转为type,自定义一个类型,声明json数据内容中每个属性的类型。然后就可以使用对象属性的方式来使用json数据。[详见](../uts/data-type.md#type)
2. 使用UTSJSONObject,不为json定义类型,然后通过下标和方法来使用json数据。[详见](../uts/data-type.md#ustjsonobject)
## 作用域插槽数据类型 ## 组件作用域插槽的类型
作用域插槽需在组件中指定插槽数据类型 作用域插槽需在组件中指定插槽数据类型
```ts ```ts
...@@ -120,9 +148,12 @@ export default { ...@@ -120,9 +148,12 @@ export default {
</view> </view>
``` ```
## uts不支持undefined ## uts不支持js的一些功能和特性
任何变量被定义后,都需要赋值。 - 不支持undefined。任何变量被定义后,都需要赋值
- 不支持promise、async、await,仅支持callback回调
- 函数声明方式不支持[作为值传递](../uts/function.md#作为值传递)
- 函数表达式方式不支持[默认参数](../uts/function.md#默认参数)
## css使用注意 ## css使用注意
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册