types(Layout): use tsx

src/col/index.tsx

@@ -1,28 +1,35 @@
-import { computed } from 'vue';
+import { computed, PropType } from 'vue';
 import { createNamespace } from '../utils';
 import { useParent } from '../composition/use-relation';
-import { ROW_KEY } from '../row';
+import { ROW_KEY, RowProvide } from '../row';
 
 const [createComponent, bem] = createNamespace('col');
 
 export default createComponent({
   props: {
-    span: [Number, String],
     offset: [Number, String],
     tag: {
-      type: String,
+      type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'div',
     },
+    span: {
+      type: [Number, String],
+      default: 0,
+    },
   },
 
   setup(props, { slots }) {
-    const { parent, index } = useParent(ROW_KEY, () => +props.span);
+    const { parent, index } = useParent<RowProvide>(ROW_KEY, () => +props.span);
 
     const style = computed(() => {
-      const { spaces } = parent || {};
+      if (!parent) {
+        return;
+      }
 
-      if (spaces && spaces.value && spaces.value[index.value]) {
+      const { spaces } = parent;
-        const { left, right } = spaces.value[index.value];
+
+      if (spaces && spaces.value && spaces.value[index!.value]) {
+        const { left, right } = spaces.value[index!.value];
         return {
           paddingLeft: left ? `${left}px` : null,
           paddingRight: right ? `${right}px` : null,

src/row/index.tsx

@@ -1,17 +1,35 @@
-import { provide, computed, reactive } from 'vue';
+import { provide, computed, reactive, PropType, ComputedRef } from 'vue';
 import { createNamespace } from '../utils';
 
 const [createComponent, bem] = createNamespace('row');
 
-export const ROW_KEY = 'van-row';
+export const ROW_KEY = 'vanRow';
+
+export type RowSpaces = { left?: number; right: number }[];
+
+export type RowChild = () => number;
+
+export type RowProvide = {
+  spaces: ComputedRef<RowSpaces>;
+  children: RowChild[];
+};
+
+export type RowAlign = 'top' | 'center' | 'bottom';
+
+export type RowJustify =
+  | 'start'
+  | 'end'
+  | 'center'
+  | 'space-around'
+  | 'space-between';
 
 export default createComponent({
   props: {
-    type: String,
+    type: String as PropType<'flex'>,
-    align: String,
+    align: String as PropType<RowAlign>,
-    justify: String,
+    justify: String as PropType<RowJustify>,
     tag: {
-      type: String,
+      type: String as PropType<keyof HTMLElementTagNameMap>,
       default: 'div',
     },
     gutter: {
@@ -21,10 +39,10 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const children = reactive([]);
+    const children = reactive<RowChild[]>([]);
 
     const groups = computed(() => {
-      const groups = [[]];
+      const groups: number[][] = [[]];
 
       let totalSpan = 0;
       children.forEach((getSpan, index) => {
@@ -43,13 +61,12 @@ export default createComponent({
 
     const spaces = computed(() => {
       const gutter = Number(props.gutter);
+      const spaces: RowSpaces = [];
 
       if (!gutter) {
-        return;
+        return spaces;
       }
 
-      const spaces = [];
-
       groups.value.forEach((group) => {
         const averagePadding = (gutter * (group.length - 1)) / group.length;