Những tính năng mới của TypeScript 5.1 đáng để khám phá

TypeScript, ngôn ngữ lập trình phổ biến của Microsoft, tiếp tục gây ấn tượng với bản phát hành mới nhất, TypeScript 5.1. Được đóng gói với các tính năng và cải tiến mới thú vị, phiên bản này hứa hẹn sẽ đưa trải nghiệm viết code của bạn lên một tầm cao mới.

Trả về hàm đơn giản hóa và các loại Accessor

Trong JavaScript, khi bạn tạo một hàm và thực thi nó mà không gặp câu lệnh return, nó sẽ tự động trả về giá trị undefined.

TypeScript 5.1 đã giới thiệu một tính năng mới cho phép các hàm trả về undefined để hoàn toàn bỏ qua câu lệnh return. Cải tiến này cải thiện khả năng đọc code và tính đồng nhất.

function logMessage(message: string): undefined {
    console.log(message);
    // No return statement needed here
}

Ví dụ này sử dụng hàm logMessage để hiển thị thông báo trên console. Tuy nhiên, hàm không trả về bất kỳ giá trị nào một cách rõ ràng.

Những type không liên quan cho các getter và setter

TypeScript 5.1 giới thiệu một tính năng mới cho phép sử dụng những type không liên quan cho các getter và setter, miễn là bạn cung cấp chú thích loại rõ ràng.

Cải tiến này phát huy vai trò trong các tình huống mà bạn cần thực thi những loại riêng biệt để truy cập và sửa đổi thuộc tính.

class User {
    private _name: string | null = null;

    set name(newName: string) {
        this._name = newName;
    }

    get name(): string {
        return this._name ?? 'Unknown';
    }
}

Trong ví dụ này, class User có thuộc tính _name riêng có thể là một chuỗi hoặc null. Setter name lấy một chuỗi newName và gán nó cho _name. Getter name trả về giá trị của _name nếu nó không phải là null hoặc Unknown nếu nó là null.

Điều này cho phép bạn thực thi thuộc tính name chỉ có thể được đặt bằng một chuỗi, nhưng khi có thuộc tính name, nó có thể là một chuỗi hoặc Unknown nếu nó chưa được thiết lập.

Tính năng này cho phép các định nghĩa kiểu linh hoạt và biểu cảm hơn như trong ví dụ bên dưới.

interface CSSStyleRule {
    // Always reads as a `CSSStyleDeclaration`
    get style(): CSSStyleDeclaration;

    // Can only write a `string` here.
    set style(newValue: string);
}

Trong ví dụ trên, thuộc tính style có một getter trả về CSSStyleDeclaration và một setter chấp nhận một chuỗi. Các loại này không liên quan, nhưng TypeScript 5.1 cho phép định nghĩa type loại này.

Cải tiến JSX

TypeScript 5.1 giới thiệu một số cải tiến cho JSX. Giờ đây, nó cho phép kiểm tra type tách rời giữa các phần tử JSX và những loại tag JSX, điều này có thể hữu ích cho các thư viện như redux cho phép những thành phần trả về nhiều hơn chỉ các phần tử JSX.

import * as React from "react";

async function AsyncComponent() {
    return <div>Loaded</div>;
}

// This is now allowed:
let element = <AsyncComponent />;

Trong ví dụ này, hàm AsyncComponent là một hàm không đồng bộ trả về một phần tử JSX. TypeScript 5.1 cho phép bạn sử dụng loại hàm này như một thành phần JSX, điều không thể thực hiện được trong các phiên bản trước.

TypeScript 5.1 cũng giới thiệu hỗ trợ cho JSX Transform mới được công bố trong React 17. Điều này cho phép bạn sử dụng JSX mà không cần nhập React.

// Before
import React from "react";

function Component() {
    return <h1>Hello, world!</h1>;
}

// After
function Component() {
    return <h1>Hello, world!</h1>;
}

Trong ví dụ trên, hàm Component trả về một phần tử JSX. Trong TypeScript 5.1 và React 17, bạn không cần phải nhập React để sử dụng JSX nữa.

Tăng hiệu suất và những thay đổi đáng kể trong TypeScript 5.1

TypeScript 5.1 giới thiệu một số tối ưu hóa để cải thiện hiệu suất, bao gồm tối ưu hóa tốc độ, bộ nhớ và kích thước gói, tránh khởi tạo type không cần thiết, kiểm tra negative case cho các ký tự liên kết và giảm lệnh gọi vào scanner để phân tích cú pháp JSDoc.

Đây là một ví dụ về việc tránh khởi tạo type không cần thiết trong các kiểu đối tượng được biết là không chứa tham chiếu đến những tham số type bên ngoài và kiểm tra nhanh hơn các ký tự liên kết.

type Union = 'a' | 'b' | 'c';

function check(value: Union) {
   // ...
}

Trong ví dụ này, TypeScript 5.1 có thể nhanh chóng kiểm tra xem một giá trị có phải là một phần của type Union hay không mà không cần phải kiểm tra mọi type trong liên kết.

Đây là một ví dụ khác:

type Point = { x: number, y: number };

function translate(point: Point, dx: number, dy: number): Point {
    return { x: point.x + dx, y: point.y + dy };
}

let p: Point = { x: 1, y: 2 };
p = translate(p, 1, 1);

Trong ví dụ này, type Point là một loại đối tượng không chứa bất kỳ tham số type nào. Khi gọi hàm translate, TypeScript 5.1 có thể tránh việc khởi tạo type không cần thiết, điều này có thể tăng tốc đáng kể việc kiểm tra type.