قالب vue TS جاهز للأعمال اليومية

المقالات والنقاشات
#1

image
image730×487 78.9 KB

عمل شاق حقا أن تقوم ببناء مشروع شامل الاختبارات unit tests
ويكون مكتوب بتقنية TypeScript

ملحوظة: TypeScript ليست لغة، وإنما نموذج من جافاسكريبت

لهذا خطر ببالي عمل قالب جاهز vueTS مع فريمورك Vuetify وتقسيمة clean folder structure (أعني ترتيب الملفات)
جاهز للعمل بشكل فوري مع توفير أمثلة لطريقة كتابة الـstore code بطريقة TypeScript والتي أحبها كثيرا :fire:

وصراحة منظر يفرح :smiley:

image
image994×724 33.1 KB

يمكنكم تنزيل القالب من هنا: https://github.com/sniperadmin/vueTS-starter-template

يمكنكم أيضا تفقد الـpull requests إذا أحببتم

5 Likes
#2

يعطيك العافية يا معلم :star_struck:

1 Like
#3

عمل ممتاز ي نصر :ok_hand:

1 Like
#4

لماذا لم أرى هذا المقال حتى اليوم :flushed: تدوينة لعينة رائعة صديقي نصر :heart:

اعتدت على العمل ب typescript مع angular و الحقيقة بمجرد ما تعتاد عليه خلاص لن تتركه مجددا لكن أول مرة أشوفه مع vue… تجربة جديدة لي اليوم :ok_hand: شكرا نصر

1 Like
#5

تتيح لك vue الكتابة بـ typescript بثلاث صور مختلفة:

1. Options API: which looks normal as the one we are using now (with Type interface enabled): 
import Vue, { PropOptions } from 'vue'
​
interface User {
firstName: string
lastName: number
}
​
export default Vue.extend({
name: 'YourComponent',
​
props: {
 user: {
   type: Object,
   required: true
 } as PropOptions<User>
},
​
data () {
 return {
   message: 'This is a message'
 }
},
​
computed: {
 fullName (): string {
   return `${this.user.firstName} ${this.user.lastName}`
 }
}
})
2. Composition-API: This one I like too (edited) 
import { defineComponent, computed, ref } from '@vue/composition-api'
​
interface User {
  firstName: string
  lastName: number
}
​
export default defineComponent({
  props: {
    user: {
      type: Object as () => User,
      required: true
    }
  },
​
  setup ({ user }) {
    const fullName = computed(() => `${user.firstName} ${user.lastName}`)
    const message = ref('This is a message')
​
    return {
      fullName,
      message
    }
  }
})
3. Class Based API: and this one I like the most (looks like Angular component style) 
import { Vue, Component, Prop } from 'vue-property-decorator'
​
interface User {
  firstName: string
  lastName: number
}
​
@Component
export default class YourComponent extends Vue {
  @Prop({ type: Object, required: true }) readonly user!: User
​
  message: string = 'This is a message'
​
  get fullName (): string {
    return `${this.user.firstName} ${this.user.lastName}`
  }
}