Helpex - Trao đổi & giúp đỡ Đăng nhập

Cách dễ dàng di chuyển từ JavaScript sang TypeScript

Cách dễ dàng di chuyển từ JavaScript sang TypeScript

Nếu bạn đã làm việc trong ngành phát triển phần mềm (đặc biệt nếu bạn đang làm rất nhiều công việc giao diện người dùng) trong vài năm qua, rất có thể bạn đã làm việc hoặc vẫn làm trong một dự án bằng JavaScript. Và bây giờ, bạn còn mệt mỏi hơn vì nó. Do đó, trong bài viết này, tôi muốn nói về cách  chuyển từ JavaScript sang TypeScript .

Đừng hiểu lầm tôi, JavaScript là một ngôn ngữ cực kỳ linh hoạt, dễ học và sử dụng, với một trong những cộng đồng lớn nhất hiện có. Tuy nhiên, nó cũng đi kèm với một loạt cạm bẫy mà bạn cuối cùng sẽ gặp phải, chẳng hạn như việc đánh máy lỏng lẻo có thể dẫn đến hành vi "kỳ quặc". Và có một số ngôn ngữ thực sự thú vị chuyển đổi sang JS và có thể được sử dụng trên nó, chẳng hạn như Dart , Elm hoặc TypeScript, chỉ là một vài ngôn ngữ.

Bạn cũng có thể thích: Các tính năng mới trong TypeScript 3.7 và Cách sử dụng chúng .

Cách dễ dàng di chuyển từ JavaScript sang TypeScript

Sẽ đơn giản hơn nhiều nếu bỏ JS khi bắt đầu một dự án mới, nơi bạn không phải lo lắng về những thứ như khả năng tương thích ngược hoặc bảo trì ứng dụng trong quá trình sản xuất. Trong trường hợp đó, bạn có thể thử nhiều lựa chọn thay thế và chọn lựa chọn bạn thích nhất.

Tuy nhiên, nếu bạn phải tiếp tục làm việc trên một dự án cũ, bạn có thể bắt đầu  chuyển từ JavaScript sang TypeScript , theo cách “chậm”, từng tệp hoặc chỉ thêm TypeScript trong các tệp mới mà bạn tạo.

Điều này có thể xảy ra vì TypeScript là một tập hợp siêu của JavaScript, có nghĩa là bất kỳ mã JS nào cũng là mã TS hợp lệ (giả sử cấu hình TS được đặt để tương thích với nó).

Bây giờ, tôi sẽ trình bày một cách đơn giản để thêm TypeScript vào một dự án mà không cần phải sửa đổi cấu hình webpack, gulp hoặc bất kỳ hệ thống xây dựng nào của chúng tôi.

Giả sử bạn sử dụng npm làm trình quản lý gói trong dự án của mình, điều đầu tiên chúng ta cần làm là thêm TypeScript làm phụ thuộc (nếu không, bạn có thể cài đặt nó trên toàn cầu):

npm install --save-dev typescript


Lưu ý : tùy thuộc vào dự án của bạn là gì, bạn cũng có thể muốn cài đặt “@types” cho các thư viện khác mà bạn có phụ thuộc vào. Ví dụ: nếu bạn có một dự án react-redux, bạn có thể cần cài đặt những thứ sau:

npm install --save-dev @types/node
npm install --save-dev @types/react
npm install --save-dev @types/react-dom
npm install --save-dev @types/react-redux
npm install --save-dev @types/react-router-dom


Sau đó, chúng ta cần thêm tệp tsconfig.json tại thư mục gốc của dự án. Tệp đó chứa các tùy chọn trình biên dịch cần thiết để chuyển đổi TS sang JS. Để có ít sự cố nhất, hãy sử dụng cấu hình sau để làm cho mã JS tương thích với TS:

{
 "compilerOptions": {
     "module": "commonjs",
     "sourceMap": true,
     "jsx": "react"
 },
 "exclude": [
     "node_modules"
 ]
}


Lưu ý : Bạn có thể cần thay đổi một số bit dựa trên dự án của mình. Thêm về điều đó  ở đây .

Bây giờ, hãy thêm tập lệnh sau vào package.json của bạn:

"tsc:w": "tsc -w"


Và chạy nó. Nó sẽ chạy một trình theo dõi chuyển đổi tất cả các tệp .ts (hoặc .tsx) thành các tệp .js thông thường. Ngoài ra, nó sẽ tạo các tệp này theo cùng một đường dẫn của bản gốc; do đó, tất cả quá trình nhập và tất cả các quy trình xây dựng mà bạn có thể có sẽ hoạt động như trước đây, vì các tệp .ts hoàn toàn bị bỏ qua và kết quả của quá trình chuyển đổi được sử dụng thay thế. Cấu trúc tệp được tạo có cấu trúc sau:

file.ts
 ├── file.js
 └── file.js.map


Bây giờ, tất cả những gì chúng ta cần làm là tạo tệp '.ts' đầu tiên bằng cách thay đổi phần mở rộng của tệp hiện có mà chúng ta muốn chuyển sang TypeScript. Ngoài ra, chúng ta cũng có thể tạo một tệp trống để bắt đầu hoạt động trong ứng dụng của mình.

Điều này không mang lại nhiều thay đổi. Chúng tôi vẫn có thể đặt mã JS bình thường và không cần trợ giúp từ những gì TypeScript cung cấp. Để TS buộc chúng ta thực sự nhập mã của mình, chúng ta cần thay đổi tệp tsconfig.json . Đặc biệt, chúng tôi sẽ tập trung vào hai tùy chọn trình biên dịch sẽ buộc mã của chúng tôi phải được nhập thực sự:

"noImplicitAny": true,
"strictNullChecks": true,


Hãy tưởng tượng chúng ta có một trình mô phỏng thế chấp đơn giản cho người dùng biết nếu, với tình hình tài chính của anh ta, một khoản thế chấp có khả thi hay không. Vì vậy, chúng tôi sẽ có một chức năng sẽ truy xuất bằng cách nào đó mà người dùng tiết kiệm có:

function getSavings() {
 //returns savings
 }


Và một chức năng để quyết định xem một khoản thế chấp có khả thi hay không:

function concedeMortgage(homeValue) {
     const savings = getSavings();
     return savings / homeValue > 0.2;
}


Tuy nhiên, để làm cho nó thực sự hoạt động, chúng ta cần kiểm tra xem đầu vào có tồn tại hay không. Và nếu đó là một con số hay không. Điều tương tự cũng áp dụng cho giá trị trả về từ  getSavings, vì chúng ta cũng không biết kiểu trả về của hàm đó. Do đó, mã của chúng tôi cuối cùng có thể trông giống như sau:

function concedeMortgage(homeValue) {
     if(!homeValue || !parseFloat(homeValue)) return false;
     const savings = getSavings();
     if(!savings || !parseFloat(savings)) return false;
     return savings / homeValue > 0.2;
}


Điều này trông khá khủng khiếp.

Nhưng, nếu chúng ta kích hoạt  noImplicitAnytùy chọn trình biên dịch, sẽ không còn cần thiết phải kiểm tra xem giá trị đầu vào và kết quả trả về  getSavingscó phải là số hay không, vì vậy hàm có thể trông giống như sau:

function concedeMortgage(homeValue: number): boolean {
     if(!homeValue) return false;
     const savings = getSavings();
     if(!savings) return false;
     return savings / homeValue > 0.2;
}


Đây là một cải tiến, vì trình biên dịch có thể giúp chúng tôi tránh một số lỗi và lỗi chính tả, không cho phép chúng tôi gọi hàm bằng một chuỗi, ví dụ:

concedeMortgage("foo")  // ERROR! Argument of type 'foo' is not assignable to parameter type 'number'


Thật không may, null và undefined vẫn nằm trong miền của mọi loại, do đó có thể thực hiện điều này:

concedeMortgage(null) // Still works


Để khắc phục điều đó, chúng tôi cần kích hoạt tùy chọn khác trong tệp tsconfig.json mà chúng tôi đã đề cập strictNullChecks,.

Bây giờ, thực hiện lệnh gọi hàm với null, cuối cùng sẽ bị trình biên dịch bắt:

concedeMortgage(null) // ERROR! Argument of type 'null' is not assignable to parameter of type 'number'


Điều đó có nghĩa là chúng ta không cần phải kiểm tra các kiểu null, điều này đơn giản hóa logic thành một cái gì đó như:

function concedeMortgage(homeValue: number): boolean {
     const savings = getSavings();
     return savings / homeValue > 0.2;
}


Đây chỉ là một cái nhìn sơ lược về những gì TypeScript có thể cung cấp cho bạn nếu bạn chuyển dự án của mình từ JS thuần túy sang nó.


Đọc thêm

  • Tại sao bạn nên sử dụng TypeScript để phát triển ứng dụng web .
  • Nhà phát triển Angular: chuyển JavaScript sang TypeScript .
  • Bạn có nên di chuyển dự án của mình sang TypeScript không?
3 hữu ích 0 bình luận 14k xem chia sẻ

Có thể bạn quan tâm

loading