Các tính năng mới của TypeScript 5.1 để 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 mã của bạn lên một tầm cao mới.

Trả về chức năng đơn giản hóa và các loại trình truy cập

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ị không xác định.

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

 function logMessage(message: string): undefined {
    console.log(message);
    
} 

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

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

Cải tiến này tỏ ra rất thuận lợi trong các tình huống mà bạn cần thực thi các 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, lớp Người dùng có một _tên tài sản đó có thể là một sợi dây hoặc vô giá trị. Các tên setter lấy một chuỗi tên mới và gán nó cho _tên. Tên getter trả về giá trị của _tên nếu nó không vô giá trịhoặc không xác định nếu nó là.

Điều này cho phép bạn thực thi rằng thuộc tính tên chỉ có thể được đặt bằng một chuỗi, nhưng khi nhận thuộc tính tên, nó có thể là một chuỗi hoặc không xác định 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 {
    
    get style(): CSSStyleDeclaration;
    
    set style(newValue: string);
} 

Trong ví dụ trên, thuộc tính kiểu có một trình thu thập trả về CSSStyleDeclaration và một trình thiết lập 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 loại định nghĩa 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 kiểu tách biệt giữa các phần tử JSX và các loại thẻ JSX, điều này có thể hữu ích cho các thư viện như redux cho phép các 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>;
}

let element = <AsyncComponent />; 

Trong ví dụ này, các Thành phần không đồng bộ 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 chức năng 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 giới thiệu trong React 17. Điều này cho phép bạn sử dụng JSX mà không cần nhập React.

 
import React from "react";
function Component() {
    return <h1>Hello, world!</h1>;
}

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

Trong ví dụ trên, hàm Thành phần 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 kiểu không cần thiết, kiểm tra trường hợp tiêu cực cho các ký tự liên kết và giảm lệnh gọi vào máy quét để phân tích cú pháp JSDoc.

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

 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 loại Liên kết hay không mà không cần phải kiểm tra mọi loại 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, loại Điểm là một loại đối tượng không chứa bất kỳ tham số loại nào. Khi gọi hàm dịch, TypeScript 5.1 có thể tránh việc khởi tạo kiểu không cần thiết, điều này có thể tăng tốc đáng kể việc kiểm tra kiểu.

Nắm bắt TypeScript 5.1

TypeScript 5.1 giới thiệu một loạt các tính năng và tối ưu hóa mạnh mẽ giúp cách mạng hóa quá trình phát triển JavaScript. Từ chức năng được đơn giản hóa trở lại với các cải tiến JSX và tăng cường hiệu suất, TypeScript 5.1 trao quyền cho bạn viết mã rõ ràng hơn, biểu cảm hơn đồng thời cải thiện kiểm tra loại và hiệu suất tổng thể.

Bằng cách sử dụng TypeScript 5.1, bạn có thể mở khóa các khả năng mới và nâng các dự án JavaScript của mình lên một tầm cao mới về hiệu quả và đổi mới. Hãy để TypeScript 5.1 là cửa ngõ dẫn đến trải nghiệm phát triển JavaScript tiên tiến và hợp lý hơn của bạn.