diff --git a/src/contact-edit/test/__snapshots__/index.spec.js.snap b/src/contact-edit/test/__snapshots__/index.spec.ts.snap
similarity index 100%
rename from src/contact-edit/test/__snapshots__/index.spec.js.snap
rename to src/contact-edit/test/__snapshots__/index.spec.ts.snap
diff --git a/src/contact-edit/test/index.spec.js b/src/contact-edit/test/index.spec.ts
similarity index 100%
rename from src/contact-edit/test/index.spec.js
rename to src/contact-edit/test/index.spec.ts
diff --git a/src/contact-list/index.js b/src/contact-list/index.tsx
similarity index 85%
rename from src/contact-list/index.js
rename to src/contact-list/index.tsx
index aef9e6bbc..7a8e52518 100644
--- a/src/contact-list/index.js
+++ b/src/contact-list/index.tsx
@@ -1,3 +1,5 @@
+import { PropType } from 'vue';
+
 // Utils
 import { createNamespace } from '../utils';
 import { RED } from '../utils/constant';
@@ -12,18 +14,25 @@ import RadioGroup from '../radio-group';
 
 const [createComponent, bem, t] = createNamespace('contact-list');
 
+export type ContactListItem = {
+  id?: number | string;
+  tel: number | string;
+  name: string;
+  isDefault?: boolean;
+};
+
 export default createComponent({
   props: {
-    list: Array,
+    list: Array as PropType<ContactListItem[]>,
     addText: String,
-    modelValue: null,
+    modelValue: null as any,
     defaultTagText: String,
   },
 
   emits: ['add', 'edit', 'select', 'update:modelValue'],
 
   setup(props, { emit }) {
-    const renderItem = (item, index) => {
+    const renderItem = (item: ContactListItem, index: number) => {
       const onClick = () => {
         emit('update:modelValue', item.id);
         emit('select', item, index);
@@ -45,7 +54,7 @@ export default createComponent({
       );
 
       const renderContent = () => {
-        const nodes = [`${item.name}，${item.tel}`];
+        const nodes: JSX.Element[] = [`${item.name}，${item.tel}`];
 
         if (item.isDefault && props.defaultTagText) {
           nodes.push(