Web109 [TypeScript] Generic Generic can create a component that can work over a variety of types rather than a single one. function identity(arg: T): T { return arg; } This generic function is the same as below. function identity(arg: number): number { return arg; } function identity(arg: string): string { return arg; } ... The T in the generic allows us to capture the type the user provides so that we can use that informa.. 2021. 7. 5. [TypeScript] Singleton Pattern Singleton is the most popular design pattern. It is a kind of creational design pattern and it ensures that only one instance. Code class Singleton { private static instance: Singleton; private constructor() { } public static getInstance(): Singleton { if (!Singleton.instance) { Singleton.instance = new Singleton(); } return Singleton.instance; } } We can get the same single instance using getIn.. 2021. 7. 5. [TypeScript] Class The class of TypeScript is similar to other languages. class Person { name: string; constructor(name: string) { this.name = name; } introduce() { console.log(`My name is ${this.name}`); } } let person = new Person('hoya'); person.introduce(); // My name is hoya Structural Type System TypeScript uses structural type system. That is, if the class has the same structure, they are compatible with ea.. 2021. 7. 4. [TypeScript] Basic Types TypeScript gives us some data types and it helps us a lot. Boolean It has a true/false value. let isSuccess: boolean = true; Number let binary: number = 0b0111; let octal: number = 0o765; let decimal: number = 7; let hex: number = 0xcafe; let big: bigint = 1234n; If you want to use bigint, you need to use ES2020 or later. String let familyName: string = 'kim' let givenName: string = "hoya" let m.. 2021. 7. 4. [Vue3] Getting Started with Vue3 + Electron (with Typescript, TailwindCSS) Let's make a desktop application using Vue3. Create a Project using Vue-CLI $ vue create vue-electron Select "Manually select features" for some options. I picked TypeScript, Router, and Vuex. I will use Vue3. And, I will use ESLint with Prettier. Lastly, I will use dedicated config files for easier management. $ cd vue-electron Now, we have our project. Adding Electron Now, let's add Electron t.. 2021. 6. 28. [Vue3] Vuex Usage Vuex is a library that helps create centralized repositories to manage data and state. Create a Project Let's create a project for vuex. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Installing Vuex $ vue add vuex You just type this command if you want to use vuex. You can also set it in the create a project stage. Creating Store The store is a react.. 2021. 6. 26. [Vue3] Mixins Mixin is a method of implementing functions separately and combining mixin files into components whenever necessary. Create a Project 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Let's create a project to start to learn Mixin. Create Mixins mixins/mixin.ts export default { methods: { $callMixin(name: string): string { return `Hello, ${name}`; }, }, .. 2021. 6. 26. [Vue3] Composition API Composition API is a function-based API added to Vue3. Let's take a look at this what is this. Create a Project 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS First of all, create a project for testing our example. Traditional Methods Let's create an adder component in the traditional way. components/composition_api.vue Traditional Method + = {{ resul.. 2021. 6. 25. [vue3] Plugins Vue3 has a plugin feature. Let's learn about this. Create a Project Create a project for a plugin example. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Creating Plugins Let's create a plugin file. plugins/vending.ts import { Plugin } from "vue"; export const vendingPlugin: Plugin = { install(app, options?) { app.config.globalProperties.$pick = (key:.. 2021. 6. 25. [Vue3] Custom Directives Vue3 allows that user defines their own directives. Create a Project Let's create a project first. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Create Own Directives in Global Creating a global custom directive uses directive method. main.ts const app = createApp(App) app.directive("focus", { mounted: (el) => el.focus(), }); app.mount("#app"); We cr.. 2021. 6. 24. [Vue3] Send Data from Ancestor Component using Provide and Inject We can send data from a parent component to a child component using props. However, the deeper the hierarchy, the more redundant delivery, the more complexity of the code. In this situation, you can simply use provide and inject. Just use provide where you want to send data and use inject where you want to use the data. Create a Project Please create a project to test this feature. 2021.06.02 - .. 2021. 6. 20. [Vue3] Slot (v-slot) Usage We can define the common framework of the template using slot to make the code neatly. Create a Project Let's create a project first. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Create a Common Layout Now, let's define the common layout. components/slot_layout.vue I created three slots and gave them a name. The unnamed slot has default as the defau.. 2021. 6. 20. 이전 1 2 3 4 5 6 7 ··· 10 다음
