TypeScript - nghe có vẻ quen thuộc với một ngôn ngữ lập trình khác có tên là JavaScript, đúng không? Vâng, đó là một ngôn ngữ dựa trên JavaScript; điểm khác biệt duy nhất là nó tập trung vào tính an toàn của kiểu.
Điều này giúp bạn dễ dàng phát hiện lỗi trước khi chạy mã của mình. Điều này giúp việc quản lý các dự án lớn dễ dàng hơn và cải thiện quy trình lập trình bằng cách làm cho nó mượt mà và đáng tin cậy hơn. May mắn thay, nó không quá khó để học miễn là bạn có hiểu biết cơ bản về JavaScript. JavaScript được Microsoft tạo ra và phát hành vào tháng 10 năm 2012
Tôi phải bắt đầu như thế nào?
Để bắt đầu, bạn cần cài đặt TypeScript dưới dạng phụ thuộc developer(dev). Nếu bạn đang sử dụng Node.js, bạn phải cài đặt TypeScript node dependency dưới dạng phụ thuộc dev.
npm install typescript --save-dev
npm install @types/node --save-dev
npm install ts-node --save-dev
Khi bạn khai báo một biến, bạn cần khai báo kiểu giá trị. Nếu bạn đã tạo một biến có tên là box là boolean, bạn sẽ khai báo nó là boolean. Bạn cũng cần làm tương tự đối với hàm và các tham số của nó. Các kiểu khác, như đối tượng và mảng, cần được khai báo khác. Ngoài ra, bất kỳ tên tệp TypeScript nào cũng sẽ cần .ts(TypeScript) thay vì .js(JavaScript) ở cuối tên
var box: Noolean = true;
var obj = {n: Number}
let obj: Obj = {n: 1}
let arr: String[]
arr.push('test') function checkbox(box: Boolean, {n}: {n: Number}): void{
if(box === true){
console.log(n)
}
}
checkbox(box, obj)
Nhưng hãy đợi đã, vẫn còn nhiều điều cần biết. Nếu bạn muốn một mảng chứa nhiều loại dữ liệu khác nhau, hãy sử dụng phương pháp này
let test: Array<string | number | boolean> = ["hello", 42, true];
Nếu hàm của bạn trả về một giá trị, thay vì nói void(không trả về giá trị nào), hãy khai báo kiểu trả về
function str(): String {
return "hey this is a string"
}
Sau đó, tùy thuộc vào việc bạn có định sử dụng bundler như webpack hay không, bạn cần cài đặt các dependency khác. Đối với một số bundler, như Next.js, bạn không cần cài đặt bất kỳ dependency nào. Hãy cùng xem một ví dụ về Webpack sử dụng TypeScript.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = { mode: 'development', stats: { excludeModules: /node_modules/, }, entry: path.resolve(__dirname, './Client/index.tsx'), output: { filename: "bundle.js", path: path.join(__dirname, './Client/dist'), publicPath: '/'}, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], plugins: [new TsconfigPathsPlugin()], }, module: { rules: [ { test: /\.(ts|tsx|js|jsx)$/, use: [{ loader: "babel-loader", options: { presets: ['@babel/preset-env', '@babel/preset-react'] } }, { loader: 'ts-loader', options: { transpileOnly: true, }, }, ], exclude: /node_modules/, }, ] }, plugins: [ new HtmlWebpackPlugin({template: path.join(__dirname, "./Client/index.html")}), ]
};
Tsconfig là gì?
Bây giờ bạn có thể tự hỏi TsconfigPathsPlugin là gì? Vâng, đó là một plugin giúp Webpack làm việc với tệp TsConfig. Đây là tệp cho TypeScript biết cách hiểu và sau đó xây dựng dự án của bạn. TsconfigPathsPlugin không cần thiết, nhưng có thể khiến một số tệp TypeScript được biên dịch/xây dựng không chính xác nếu bạn không sử dụng nó. Hãy cùng xem tệp TsConfig trông như thế nào.
{ "compilerOptions": { "outDir": "./dist/", "noImplicitAny": true, "module": "ES2022", "target": "es5", "allowJs": true, "moduleResolution": "node", "allowSyntheticDefaultImports": true, "esModuleInterop": true, }
}
Nhưng tất cả những lựa chọn đó có tác dụng gì?
- outDir: Đặt tất cả các tệp JS đã biên dịch vào một thư mục cụ thể
- noImplicitAny: Ngăn chặn kiểu 'bất kỳ' được sử dụng trong dự án
- module: Cho biết cách sử dụng các module được xử lý (nhập/xuất) dựa trên các tiêu chuẩn JavaScript (tiêu chuẩn 2022)
- Chuyển đổi mã để hoạt động với các trình duyệt cũ hơn chỉ có thể hiểu ES5
- allowJs: trộn các tệp TypeScript và JavaScript lại với nhau -moduleResolution: Yêu cầu TypeScript tìm kiếm các mô-đun giống như Node.js (sử dụng node_modules)
- allowSyntheticDefaultImports: Cho phép bạn nhập các bản xuất mặc định ngay cả khi nó không được viết đúng cho TypeScript
- esModuleInterop: dễ dàng nhập dữ liệu hơn từ module commonJs cũ (nhập express từ 'express')
Còn nhiều tùy chọn khác nữa, nhưng 8 tùy chọn đó là cơ sở tốt cho tệp TsConfig mặc định. Nếu bạn muốn biết thêm về các tùy chọn khác, hãy chạy lệnh này trong terminal. Nó sẽ tạo tệp TsConfig mặc định với tất cả các tùy chọn được chú thích. Với mỗi dòng mô tả chức năng của từng tùy chọn. Bây giờ, một số tùy chọn sẽ không có trong tệp khi được tạo, lý do là vì chúng nâng cao hoặc ít khi được sử dụng.
npx tsc --init
Ví dụ
- type: Tự động cho TypeScript biết gói nào cần sử dụng (thay vì bắt nó đoán như bình thường)
- incremental: chỉ xây dựng lại các tập tin đã thay đổi (làm cho việc xây dựng nhanh hơn)
Kết luận
Vì TypeScript là một ngôn ngữ khác, nên bất kỳ dependency nào bạn sử dụng đều cần phải tương thích với nó. May mắn thay, một số dependency có phiên bản TypeScript. Hãy cùng xem phiên bản React của TypeScript
npm install @types/react @types/react-dom --save-dev
///////////////////////////////////////////////////
"@types/react": "^19.1.0",
"@types/react-dom": "^19.1.1",
Sự thật thú vị 1: Ngoài ra còn có một tùy chọn cho React trong TsConfig được gọi là jsx. Tùy chọn này cho phép bạn viết các tệp JSX trong TypeScript.
jsx: "react-jsx"
Sự thật thú vị 2: Bạn không thể khai báo tệp React bằng .jsx; nó sẽ cần được khai báo bằng .tsx ở cuối tên tệp
Vậy là hết phần cơ bản của TypeScript. Nếu bạn thấy blog này hữu ích, hãy để lại lượt thích và/hoặc bình luận. Cảm ơn bạn đã đọc và chúc bạn một ngày tốt lành