TypeScript không tồn tại trong chân không. Nó được xây dựng với hệ sinh thái JavaScript trong tâm trí, và rất nhiều JavaScript tồn tại ngày nay. Chuyển đổi một cơ sở mã JavaScript sang TypeScript, trong khi phần nào tẻ nhạt, thường không thách thức. Trong hướng dẫn này, chúng tôi sẽ xem xét cách bạn có thể bắt đầu. Chúng tôi giả sử bạn đã đọc đủ sổ tay để viết mã TypeScript mới.
Nếu bạn đang tìm cách chuyển đổi một dự án React, trước tiên chúng tôi khuyên bạn nên xem xét hướng dẫn chuyển đổi phản ứng.
Thiết lập thư mục của bạn
Nếu bạn viết bằng JavaScript đơn giản, thì có khả năng bạn đang chạy trực tiếp JavaScript của mình, trong đó các tệp
3 của bạn nằm trong thư mụcshell
npm install ts-loader source-map-loader
4,shell
npm install ts-loader source-map-loader
5 hoặcshell
npm install ts-loader source-map-loader
6, sau đó chạy như mong muốn.shell
npm install ts-loader source-map-loader
Nếu trường hợp đó, các tệp mà bạn đã viết sẽ được sử dụng làm đầu vào cho TypeScript và bạn sẽ chạy các đầu ra mà nó tạo ra. Trong quá trình di chuyển JS sang TS của chúng tôi, chúng tôi sẽ cần tách các tệp đầu vào của mình để ngăn TypeScript ghi đè chúng. Nếu các tệp đầu ra của bạn cần cư trú trong một thư mục cụ thể, thì đó sẽ là thư mục đầu ra của bạn.
Bạn cũng có thể đang chạy một số bước trung gian trên JavaScript của mình, chẳng hạn như gói hoặc sử dụng một bộ chuyển đổi khác như Babel. Trong trường hợp này, bạn có thể đã có một cấu trúc thư mục như thế này.
Từ thời điểm này, chúng tôi sẽ giả định rằng thư mục của bạn được thiết lập một cái gì đó như thế này:
projectRoot ├── src │ ├── file1.js │ └── file2.js ├── built └── tsconfig.json
Nếu bạn có một thư mục
7 bên ngoài thư mụcshell
npm install ts-loader source-map-loader
4 của bạn, bạn có thể có mộtshell
npm install ts-loader source-map-loader
9 trongshell
npm install ts-loader source-map-loader
4 và một trongshell
npm install ts-loader source-map-loader
7.shell
npm install ts-loader source-map-loader
Viết tệp cấu hình
TypeScript sử dụng một tệp có tên
9 để quản lý các tùy chọn dự án của bạn, chẳng hạn như tệp bạn muốn bao gồm và loại kiểm tra nào bạn muốn thực hiện. Hãy để tạo ra một cái xương trần cho dự án của chúng tôi:shell
npm install ts-loader source-map-loader
json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Ở đây, chúng tôi chỉ định một vài điều cho TypeScript:
- Đọc trong bất kỳ tệp nào nó hiểu trong thư mục
4 [vớishell
npm install ts-loader source-map-loader
4].js
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
- Chấp nhận các tệp JavaScript làm đầu vào [với
5].js
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
- Phát ra tất cả các tệp đầu ra trong
6 [vớijs
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
7].js
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
- Dịch JavaScript mới hơn xây dựng thành một phiên bản cũ hơn như Ecmascript 5 [sử dụng
8].js
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
Tại thời điểm này, nếu bạn thử chạy
9 tại gốc của dự án, bạn sẽ thấy các tệp đầu ra trong thư mụcjs
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
6. Bố cục của các tệp trongjs
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
6 sẽ trông giống hệt với bố cục củajs
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
4. Bây giờ bạn nên có TypeScript làm việc với dự án của bạn.shell
npm install ts-loader source-map-loader
Lợi ích sớm
Ngay cả tại thời điểm này, bạn có thể nhận được một số lợi ích tuyệt vời từ TypeScript hiểu dự án của bạn. Nếu bạn mở một trình soạn thảo như VS Code hoặc Visual Studio, bạn sẽ thấy rằng bạn thường có thể nhận được một số hỗ trợ công cụ như hoàn thành. Bạn cũng có thể bắt một số lỗi nhất định với các tùy chọn như:
3 ngăn bạn quên quay trở lại vào cuối chức năng.ts
// For Node/CommonJS
declare function require[path: string]: any;
4 rất hữu ích nếu bạn không bao giờ muốn quên một tuyên bốts
// For Node/CommonJS
declare function require[path: string]: any;
5 giữats
// For Node/CommonJS
declare function require[path: string]: any;
6S trong khốits
// For Node/CommonJS
declare function require[path: string]: any;
7.ts
// For Node/CommonJS
declare function require[path: string]: any;
TypeScript cũng sẽ cảnh báo về mã và nhãn không thể truy cập mà bạn có thể vô hiệu hóa với
8 vàts
// For Node/CommonJS
declare function require[path: string]: any;
9 tương ứng.ts
// For Node/CommonJS
declare function require[path: string]: any;
Bạn có thể có thêm một số bước xây dựng trong đường ống của bạn. Có lẽ bạn kết hợp một cái gì đó cho mỗi tệp của bạn. Mỗi công cụ xây dựng là khác nhau, nhưng chúng tôi sẽ làm hết sức mình để bao quát ý chính của mọi thứ.
Nuốt chửng
Nếu bạn sử dụng Gulp trong một số thời trang, chúng tôi có một hướng dẫn về việc sử dụng Gulp với TypeScript và tích hợp với các công cụ xây dựng phổ biến như Browserify, Babelify và Uglify. Bạn có thể đọc thêm ở đó.
Trang web
Tích hợp webpack khá đơn giản. Bạn có thể sử dụng
0, trình tải TypeScript, kết hợp vớits
// For RequireJS/AMD
declare function define[...args: any[]]: any;
1 để gỡ lỗi dễ dàng hơn. Đơn giản chỉ cần chạyts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
shell
npm install ts-loader source-map-loader
và hợp nhất các tùy chọn từ phần sau vào tệp
2 của bạn:ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
js
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" },
],
},
// Other options...
};
Điều quan trọng cần lưu ý là TS-Loader sẽ cần chạy trước bất kỳ trình tải nào khác liên quan đến các tệp
3.shell
npm install ts-loader source-map-loader
Điều tương tự cũng xảy ra đối với trình tải kiểu dáng tuyệt vời, trình tải TypeScript khác cho WebPack. Bạn có thể đọc thêm về sự khác biệt giữa hai ở đây.
Bạn có thể thấy một ví dụ về việc sử dụng WebPack trong hướng dẫn của chúng tôi về React và Webpack.
Chuyển sang các tệp TypeScript
Tại thời điểm này, bạn có thể đã sẵn sàng để bắt đầu sử dụng các tệp TypeScript. Bước đầu tiên là đổi tên một trong các tệp
3 của bạn thànhshell
npm install ts-loader source-map-loader
5. Nếu tệp của bạn sử dụng JSX, bạn sẽ cần đổi tên thànhts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
6.ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
Hoàn thành với bước đó? Tuyệt quá! Bạn đã di chuyển thành công một tập tin từ JavaScript sang TypeScript!
Tất nhiên, điều đó có thể không cảm thấy đúng. Nếu bạn mở tệp đó trong trình chỉnh sửa với hỗ trợ TypeScript [hoặc nếu bạn chạy
7], bạn có thể thấy Red Squiggles trên một số dòng nhất định. Bạn nên nghĩ về những điều này giống như cách bạn nghĩ về Red Squiggles trong một biên tập viên như Microsoft Word. TypeScript vẫn sẽ dịch mã của bạn, giống như Word vẫn sẽ cho phép bạn in tài liệu của mình.ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
Nếu điều đó nghe có vẻ quá lỏng lẻo đối với bạn, bạn có thể thắt chặt hành vi đó. Ví dụ, nếu bạn không muốn bản thảo bản trình diễn với JavaScript khi đối mặt với lỗi, bạn có thể sử dụng tùy chọn
8. Theo nghĩa đó, TypeScript có mặt số về sự nghiêm ngặt của nó và bạn có thể bật núm đó lên cao như bạn muốn.ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
Nếu bạn có kế hoạch sử dụng các cài đặt chặt chẽ hơn có sẵn, thì tốt nhất là hãy bật chúng ngay bây giờ [xem nhận được kiểm tra chặt chẽ hơn bên dưới]. Chẳng hạn, nếu bạn không bao giờ muốn TypeScript âm thầm suy ra
9 cho một loại mà không cần nói rõ ràng như vậy, bạn có thể sử dụngts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
0 trước khi bạn bắt đầu sửa đổi các tệp của mình. Mặc dù nó có thể cảm thấy hơi quá sức, nhưng lợi nhuận dài hạn trở nên rõ ràng nhanh hơn nhiều.js
var foo = require["foo"];
foo.doStuff[];
Làm loại lỗi
Giống như chúng tôi đã đề cập, nó không bất ngờ để nhận được thông báo lỗi sau khi chuyển đổi. Điều quan trọng là thực sự đi từng người một thông qua những điều này và quyết định cách đối phó với các lỗi. Thường thì đây sẽ là những lỗi hợp pháp, nhưng đôi khi bạn sẽ phải giải thích những gì bạn đang cố gắng làm tốt hơn một chút với bản thảo.
Nhập khẩu từ các mô -đun
Bạn có thể bắt đầu nhận được một loạt các lỗi như
1 vàjs
var foo = require["foo"];
foo.doStuff[];
2. Trong những trường hợp này, nó có khả năng là bạn sử dụng các mô -đun. Trong khi bạn chỉ có thể thuyết phục bản thảo rằng chúng tồn tại bằng cách viết rajs
var foo = require["foo"];
foo.doStuff[];
ts
// For Node/CommonJS
declare function require[path: string]: any;
hoặc
ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
Nó tốt hơn để loại bỏ các cuộc gọi đó và sử dụng cú pháp TypeScript để nhập khẩu.
Đầu tiên, bạn sẽ cần bật một số hệ thống mô -đun bằng cách đặt tùy chọn TypeScript ____ ____ ____. Các tùy chọn hợp lệ là
4,js
var foo = require["foo"];
foo.doStuff[];
5,js
var foo = require["foo"];
foo.doStuff[];
6 vàjs
var foo = require["foo"];
foo.doStuff[];
7.js
var foo = require["foo"];
foo.doStuff[];
Nếu bạn có mã Node/CommonJS sau:
js
var foo = require["foo"];
foo.doStuff[];
hoặc mã yêu cầu sau đây/mã AMD:
js
define[["foo"], function [foo] {
foo.doStuff[];
}];
Sau đó, bạn sẽ viết mã TypeScript sau:
ts
import foo = require["foo"];
foo.doStuff[];
Nhận tập tin khai báo
Nếu bạn bắt đầu chuyển đổi sang nhập bản nhập bản, bạn có thể sẽ gặp các lỗi như
8. Vấn đề ở đây là bạn có thể don don có các tệp khai báo để mô tả thư viện của bạn. May mắn là điều này là khá dễ dàng. Nếu TypeScript phàn nàn về một gói nhưjs
var foo = require["foo"];
foo.doStuff[];
9, bạn chỉ có thể viếtjs
var foo = require["foo"];
foo.doStuff[];
shell
npm install -S @types/lodash
Nếu bạn sử dụng tùy chọn mô -đun khác với
4, bạn sẽ cần đặt tùy chọnjs
var foo = require["foo"];
foo.doStuff[];
1 của mình thànhjs
define[["foo"], function [foo] {
foo.doStuff[];
}];
2.js
define[["foo"], function [foo] {
foo.doStuff[];
}];
Sau đó, bạn sẽ có thể nhập Lodash mà không có vấn đề gì và hoàn thành chính xác.
Xuất từ các mô -đun
Thông thường, xuất từ một mô -đun liên quan đến việc thêm các thuộc tính vào một giá trị như
3 hoặcjs
define[["foo"], function [foo] {
foo.doStuff[];
}];
4. TypeScript cho phép bạn sử dụng các báo cáo xuất khẩu cấp cao nhất. Chẳng hạn, nếu bạn đã xuất một chức năng như vậy:js
define[["foo"], function [foo] {
foo.doStuff[];
}];
0json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Bạn có thể viết nó ra như sau:
1json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Đôi khi bạn hoàn toàn ghi đè lên đối tượng xuất khẩu. Đây là một mẫu phổ biến mà mọi người sử dụng để làm cho các mô -đun của họ có thể gọi được ngay lập tức như trong đoạn trích này:
2json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Bạn có thể đã viết trước đây như vậy:
3json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Trong TypeScript, bạn có thể mô hình hóa điều này với cấu trúc
5.js
define[["foo"], function [foo] {
foo.doStuff[];
}];
4json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Quá nhiều/quá ít đối số
Đôi khi bạn thấy mình gọi một chức năng với quá nhiều/vài đối số. Thông thường, đây là một lỗi, nhưng trong một số trường hợp, bạn có thể đã khai báo một hàm sử dụng đối tượng
6 thay vì viết ra bất kỳ tham số nào:js
define[["foo"], function [foo] {
foo.doStuff[];
}];
5json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Trong trường hợp này, chúng tôi cần sử dụng TypeScript để nói với bất kỳ người gọi nào của chúng tôi về cách
7 có thể được gọi là sử dụng quá tải chức năng.js
define[["foo"], function [foo] {
foo.doStuff[];
}];
6json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Chúng tôi đã thêm hai chữ ký quá tải vào
7. Kiểm tra đầu tiên nói rằngjs
define[["foo"], function [foo] {
foo.doStuff[];
}];
7 có chức năng [mấtjs
define[["foo"], function [foo] {
foo.doStuff[];
}];
0], và sau đó là danh sách cácts
import foo = require["foo"];
foo.doStuff[];
0s. Cái thứ hai nói rằng nó cũng sẽ có một chức năng, và sau đó sử dụng tham số REST [ts
import foo = require["foo"];
foo.doStuff[];
2] để nói rằng bất kỳ số lượng đối số nào sau đó cần phải làts
import foo = require["foo"];
foo.doStuff[];
0s.ts
import foo = require["foo"];
foo.doStuff[];
Các thuộc tính được thêm tuần tự
Một số người thấy nó dễ chịu hơn về mặt thẩm mỹ khi tạo một đối tượng và thêm các thuộc tính ngay sau khi như vậy:
7json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
TypeScript sẽ nói rằng bạn có thể gán cho
4 vàts
import foo = require["foo"];
foo.doStuff[];
5 vì trước tiên nó đã tìm ra loạits
import foo = require["foo"];
foo.doStuff[];
6 làts
import foo = require["foo"];
foo.doStuff[];
7 mà không có bất kỳ thuộc tính nào. Thay vào đó, nếu bạn chuyển các tuyên bố vào chính đối tượng theo nghĩa đen, bạn sẽ không nhận được lỗi:ts
import foo = require["foo"];
foo.doStuff[];
8json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Bạn cũng có thể xác định loại
6 và thêm một khẳng định loại trên đối tượng theo nghĩa đen.ts
import foo = require["foo"];
foo.doStuff[];
9json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Ngoài ra, bạn chỉ có thể nói
6 có loạits
import foo = require["foo"];
foo.doStuff[];
9, đó là điều dễ dàng nhất để làm, nhưng điều này sẽ có lợi cho bạn ít nhất.ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
9, shell
npm install -S @types/lodash
2 và ts
import foo = require["foo"];
foo.doStuff[];
7
ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
shell
npm install -S @types/lodash
ts
import foo = require["foo"];
foo.doStuff[];
Bạn có thể bị cám dỗ sử dụng
2 hoặcshell
npm install -S @types/lodash
7 để nói rằng một giá trị có thể có bất kỳ tài sản nào trên đó vìts
import foo = require["foo"];
foo.doStuff[];
2, đối với hầu hết các mục đích, loại chung nhất. Tuy nhiên,shell
npm install -S @types/lodash
9 thực sự là loại bạn muốn sử dụng trong các tình huống đó, vì nó là loại linh hoạt nhất.ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
9 is actually the type you want to use in those situations, since it’s the most flexible type.ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
Chẳng hạn, nếu bạn có một cái gì đó mà Gõ gõ là
2, bạn đã giành được các phương thức nhưshell
npm install -S @types/lodash
9 trên đó. Nói chung hơn thường có nghĩa là bạn có thể làm ít hơn với một loại, nhưngshell
npm install -S @types/lodash
9 đặc biệt ở chỗ nó là loại chung nhất trong khi vẫn cho phép bạn làm bất cứ điều gì với nó. Điều đó có nghĩa là bạn có thể gọi nó, xây dựng nó, truy cập các thuộc tính trên đó, v.v. Mặc dù vậy, bất cứ khi nào bạn sử dụngts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
9, bạn sẽ mất hầu hết các kiểm tra lỗi và hỗ trợ trình chỉnh sửa mà TypeScript cung cấp cho bạn.ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
Nếu một quyết định từng đi xuống
2 vàshell
npm install -S @types/lodash
7, bạn nên thíchts
import foo = require["foo"];
foo.doStuff[];
7. Mặc dù chúng chủ yếu là giống nhau, về mặt kỹ thuậtts
import foo = require["foo"];
foo.doStuff[];
7 là một loại tổng quát hơnts
import foo = require["foo"];
foo.doStuff[];
2 trong một số trường hợp bí truyền nhất định.shell
npm install -S @types/lodash
Nhận kiểm tra chặt chẽ hơn
TypeScript đi kèm với một số séc nhất định để cung cấp cho bạn nhiều sự an toàn và phân tích chương trình của bạn. Khi bạn đã chuyển đổi CodeBase của mình thành TypeScript, bạn có thể bắt đầu kích hoạt các kiểm tra này để có được sự an toàn cao hơn.
Không ngầm ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
9
ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
Có một số trường hợp nhất định trong đó TypeScript có thể tìm ra những loại nhất định nên là gì. Để được khoan dung nhất có thể, nó sẽ quyết định sử dụng loại
9 ở vị trí của nó. Mặc dù điều này là tuyệt vời cho việc di chuyển, nhưng sử dụngts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
9 có nghĩa là bạn không nhận được bất kỳ loại an toàn nào và bạn đã giành được hỗ trợ công cụ tương tự mà bạn đã nhận được ở nơi khác. Bạn có thể thông báo TypeScript để gắn cờ các vị trí này xuống và đưa ra lỗi với tùy chọnts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
0.js
var foo = require["foo"];
foo.doStuff[];
Kiểm tra nghiêm ngặt json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
11 & json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
12
json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Theo mặc định, TypeScript giả định rằng
11 vàjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
12 nằm trong miền của mọi loại. Điều đó có nghĩa là bất cứ điều gì được khai báo với loạijson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
0 có thể làts
import foo = require["foo"];
foo.doStuff[];
11 hoặcjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
12. Vìjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
11 vàjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
12 là một nguồn lỗi thường xuyên trong JavaScript và TypeScript, TypeScript có tùy chọnjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
20 để giúp bạn căng thẳng khi lo lắng về những vấn đề này.json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Khi
20 được bật,json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
11 vàjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
12 có được các loại riêng được gọi làjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
11 vàjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
12. Bất cứ khi nào bất cứ điều gì có thể làjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
11, bạn có thể sử dụng một loại liên minh với loại ban đầu. Vì vậy, ví dụ, nếu một cái gì đó có thể làjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
0 hoặcts
import foo = require["foo"];
foo.doStuff[];
11, bạn sẽ viết loại ra làjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
29.json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Nếu bạn có một giá trị mà TypeScript nghĩ rằng có thể là ____ 111/________ 112, nhưng bạn biết rõ hơn, bạn có thể sử dụng toán tử Postfix
32 để nói khác.json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
0shell
npm install ts-loader source-map-loader
Khi lên đầu, khi sử dụng
20, các phụ thuộc của bạn cũng có thể cần được cập nhật để sử dụngjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
20.json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Không ngầm ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
9 cho json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
36
ts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
Khi bạn sử dụng từ khóa
36 bên ngoài các lớp, nó có loạijson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
9 theo mặc định. Chẳng hạn, hãy tưởng tượng một lớpts
// For RequireJS/AMD
declare function define[...args: any[]]: any;
39 và tưởng tượng một hàm mà chúng ta muốn thêm làm phương thức:json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
1shell
npm install ts-loader source-map-loader
Điều này có những vấn đề tương tự chúng tôi đã đề cập ở trên - chúng tôi có thể dễ dàng sai chính tả
40 và không gặp lỗi. Vì lý do này, TypeScript có tùy chọnjson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
41. Khi tùy chọn đó được đặt, TypeScript sẽ đưa ra lỗi khijson
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
36 được sử dụng mà không có loại rõ ràng [hoặc suy ra]. Bản sửa lỗi là sử dụng tham số ____ 136 để đưa ra một loại rõ ràng trong giao diện hoặc trong chính chức năng:json
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
2shell
npm install ts-loader source-map-loader