TypeScript & Vue 3 năm 2026: Frontend đang đi về đâu?

Phần 1: TypeScript 5.9 - Năm của Type Safety & Performance

Vấn đề: TypeScript compiler chậm

Hãy thử build một monorepo lớn với TypeScript 4.x:

$ npm run build
# Chờ... 45 giây?

Đó là ác mộng của team BKGlobal 2 năm trước. Trước C# 13, DevOps phải optimize CI/CD pipeline vì compiler quá chậm.

TypeScript 5.9 giải quyết vấn đề này:

• 10-20% faster cold builds trên monorepos
• ~20% faster tsc compiler overall
• Better incremental compilation

Breakthrough #1: Smart Type Narrowing

Cũ: Khi bạn có union type phức tạp, TypeScript không tự động narrow type.

type ApiResponse =
  | { status: 'success'; data: string }
  | { status: 'error'; message: string }
  | { status: 'loading' };

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    // TypeScript 4.x: Bạn vẫn phải manual cast
    const data = (response as { status: 'success'; data: string }).data;
  }
}

TypeScript 5.9: Type narrowing giờ smarter - detect được conditional branches với complex union discrimination.

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    // TypeScript 5.9: Tự động narrow type!
    const data = response.data; // ✓ Type-safe, no cast needed
  } else if (response.status === 'error') {
    const msg = response.message; // ✓ Correct type
  }
}

Điều ảnh hưởng:

• Ít type assertions (as operator) cần thiết
• Cleaner code
• Fewer runtime type errors

Breakthrough #2: Const Type Parameters

Trước đây, khi bạn dùng const object, TypeScript mất specificity:

const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
} as const; // Phải dùng 'as const' để preserve literal types

TypeScript 5.9 introduces const type parameters - framework authors có thể ensure exact literal values:

function createConfig<const T extends Record<string, any>>(config: T): T {
  return config;
}

const myConfig = createConfig({
  apiUrl: 'https://api.example.com',
  timeout: 5000
});

// Type of myConfig.timeout: 5000 (literal), không phải 'number'

Điều ảnh hưởng:

• Better type inference cho configurations
• Framework authors (Next.js, Nuxt, Remix) có thể provide tighter typing
• Fewer type errors từ vague types

Breakthrough #3: Direct TypeScript Execution

Vấn đề cũ: Deploy TypeScript code cần compile step.

# Workflow trước
$ tsc  # Compile to JS (slow)
$ node dist/index.js  # Run

TypeScript 5.9+: Native support cho direct TS execution (preview).

# Node 23+ hoặc tsx/ts-node
$ node --experimental-strip-types app.ts  # Run directly!

Điều ảnh hưởng:

• Local dev loop nhanh hơn
• Fewer build step complications
• Perfect cho scripts & CLI tools

Breakthrough #4: Overload Resolution Improvements

Khi bạn có function overloads, compiler giờ better prioritize:

// Library code
function stringify(value: string): string;
function stringify(value: number): string;
function stringify(value: boolean): string;
function stringify(value: any): string {
  return String(value);
}

// TypeScript 5.9: Better overload selection
stringify(42); // ✓ Picks 'number' overload with higher priority

Điều ảnh hưởng: Fewer "Overload signatures cannot be generic" errors.

---

Phần 2: Vue 3 - Hoàn toàn Stable, Composition API là Standard

Background: Vue 2 vs Vue 3

Vue 2 (end of life: 12/2023) dùng Options API:

<script>
export default {
  data() {
    return { count: 0 };
  },
  computed: {
    doubled() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

Vue 3 giới thiệu Composition API - inspired by React Hooks:

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);
const increment = () => count.value++;
</script>

Breaking Changes từ Vue 2 → Vue 3

Nếu bạn upgrade từ Vue 2, chú ý những breaking changes:

1. Global API & App Instance

Vue 2:

Vue.component('my-component', MyComponent);
Vue.use(MyPlugin);
Vue.filter('uppercase', (v) => v.toUpperCase());

Vue 3: Phải dùng app instance:

const app = createApp({});
app.component('my-component', MyComponent);
app.use(MyPlugin);
app.config.globalProperties.$filters = {
  uppercase: (v) => v.toUpperCase()
};

Action: Audit tất cả Vue.component, Vue.use, Vue.filter → chuyển sang app instance.

2. v-model Behavior Changed

Vue 2:

<!-- Component dùng v-model -->
<my-input v-model="value"></my-input>

<!-- Syntax sugar cho:
<my-input :value="value" @input="value = $event"></my-input>
-->

Vue 3: v-model giờ dùng modelValue prop + update:modelValue event:

<!-- Child component -->
<script setup>
defineProps({
  modelValue: String
});
defineEmits(['update:modelValue']);

const handleChange = (e) => {
  emit('update:modelValue', e.target.value);
};
</script>

<!-- Parent: same syntax, nhưng tính toán khác bên trong -->
<my-input v-model="value"></my-input>

Action: Test tất cả v-model components sau upgrade.

3. Lifecycle Hooks Changed

Vue 2:

beforeCreate, created, beforeMount, mounted
beforeUpdate, updated, beforeDestroy, destroyed

Vue 3:

setup() // Replaces beforeCreate + created
onBeforeMount, onMounted
onBeforeUpdate, onUpdated
onBeforeUnmount, onUnmounted // 'destroy' → 'unmount'

Action: Search & replace destroy → unmount, created → setup.

4. Filters Removed

Vue 2:

<p>{{ message | uppercase }}</p>

Vue 3: Filters bị remove hoàn toàn. Dùng computed properties hoặc methods:

<script setup>
import { computed } from 'vue';
const upperMessage = computed(() => message.value.toUpperCase());
</script>

<p>{{ upperMessage }}</p>

Action: Migrate tất cả filters → computed properties.

Vue 3 in 2026: Status & Trends

Trend #1: Composition API is Standard

By 2026, ecosystem hoàn toàn consolidate quanh Composition API. Popular libraries:

• Pinia (state management) - replace Vuex
• VueUse (composables library) - reusable logic
• @vueuse/core (utility composables)

<script setup>
import { useCounter } from '@vueuse/math';
const { count, inc, dec } = useCounter(0);
</script>

Trend #2: <script setup> is Default

Old way (still works):

<script>
export default {
  setup() {
    // return reactive state
  }
}
</script>

New way (preferred):

<script setup>
// Code here automatically becomes component scope
const count = ref(0);
</script>