TypeScript 支持

在 uni-app 中使用 ts 开发，请参考 Vue.js TypeScript 支持 (opens new window)说明。

类型定义文件由 @dcloudio/types 模块提供，安装后请注意配置 tsconfig.json 文件中的 compilerOptions > types 部分，如需其他小程序平台类型定义也可以安装，如：miniprogram-api-typings、mini-types。

对于缺少或者错误的类型定义，可以自行在本地新增或修改并同时报告给官方请求更新。

注意事项

在 uni-app 中使用 ts 需要注意以下事项。

在 vue 文件的 script 节点声明 lang=”ts”

声明 lang=”ts” 后，该 vue 文件 import 进来的所有 vue 组件，均需要使用 ts 编写。

  • 示例代码

改造 uni-badge.vue

  [ts]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script lang="ts">
    // 仅展示需要修改的核心代码，完整代码请参考原来的组件。
	import Vue from 'vue';
	export default Vue.extend({
		props: {
			type: {
				type: String,
				default: 'default'
			},
			inverted: {
				type: Boolean,
				default: false
			},
			text: {
				type: [String, Number],
				default: ''
			},
			size: {
				type: String,
				default: 'normal'
			}
		},
		computed: {
			setClass(): string {
				const classList: string[] = ['uni-badge-' + this.type, 'uni-badge-size-' + this.size];
				if (this.inverted === true) {
					classList.push('uni-badge-inverted')
				}
				return classList.join(" ")
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	})
</script>

在 index.vue 中引用 uni-badge 组件

  [vue]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script lang="ts">
    import Vue from 'vue';
	import uniBadge from '../../components/uni-badge.vue';
	export default Vue.extend({
		data() {
			return {
				title: 'Hello'
			}
		},
		components:{
			uniBadge
		}
	});
</script>

参考资料

https://uniapp.dcloud.net.cn/tutorial/typescript-subject.html