Hướng dẫn how do you convert a javascript file? - làm thế nào để bạn chuyển đổi một tập tin javascript?

Question

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ội dung chính Show

Thiết lập thư mục của bạn
Viết tệp cấu hình
Lợi ích sớm
Nuốt chửng
Chuyển sang các tệp TypeScript
Làm loại lỗi
Nhập khẩu từ các mô -đun
Nhận tập tin khai báo
Xuất từ các mô -đun
Quá nhiều/quá ít đối số
Các thuộc tính được thêm tuần tự
ts// For RequireJS/AMDdeclare function define(...args: any[]): any;9, shellnpm install -S @types/lodash2 và tsimport foo = require("foo");foo.doStuff();7
Nhận kiểm tra chặt chẽ hơn
Không ngầm ts// For RequireJS/AMDdeclare function define(...args: any[]): any;9
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
Không ngầm ts// For RequireJS/AMDdeclare function define(...args: any[]): any;9 cho json{ "compilerOptions": { "outDir": "./built", "allowJs": true, "target": "es5" }, "include": ["./src/**/*"]}36
Làm cách nào để chuyển đổi tệp JavaScript thành một mô -đun?
Làm cách nào để mở một tệp javascript?
Làm cách nào để mở một tệp javascript trong trình duyệt của tôi?
Định dạng tệp của JavaScript là gì?

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

shell

npm install ts-loader source-map-loader

3 của bạn nằm trong thư mục

shell

npm install ts-loader source-map-loader

4,

shell

npm install ts-loader source-map-loader

5 hoặc

shell

npm install ts-loader source-map-loader

6, sau đó chạy như mong muốn.

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

shell

npm install ts-loader source-map-loader

7 bên ngoài thư mục

shell

npm install ts-loader source-map-loader

4 của bạn, bạn có thể có một

shell

npm install ts-loader source-map-loader

9 trong

shell

npm install ts-loader source-map-loader

4 và một trong

shell

npm install ts-loader source-map-loader

7.

Viết tệp cấu hình

TypeScript sử dụng một tệp có tên

shell

npm install ts-loader source-map-loader

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:

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

shell

npm install ts-loader source-map-loader

4 (với

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...
};

4).

Chấp nhận các tệp JavaScript làm đầu vào (với

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...
};

5).

Phát ra tất cả các tệp đầu ra trong

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...
};

6 (với

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...
};

7).

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

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...
};

8).

Tại thời điểm này, nếu bạn thử chạy

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...
};

9 tại gốc của dự án, bạn sẽ thấy các tệp đầu ra trong thư mục

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...
};

6. Bố cục của các tệp trong

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...
};

6 sẽ trông giống hệt với bố cục của

shell

npm install ts-loader source-map-loader

4. Bây giờ bạn nên có TypeScript làm việc với dự án của bạn.

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ư:

ts
// For Node/CommonJS
declare function require(path: string): any;

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ữa

ts
// For Node/CommonJS
declare function require(path: string): any;

6S trong khối

ts
// For Node/CommonJS
declare function require(path: string): any;

7.

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

ts
// For Node/CommonJS
declare function require(path: string): any;

8 và

ts
// For Node/CommonJS
declare function require(path: string): any;

9 tương ứng.

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

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

0, trình tải TypeScript, kết hợp với

ts
// 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ạy

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

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

2 của bạn:

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

shell

npm install ts-loader source-map-loader

3.

Đ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

shell

npm install ts-loader source-map-loader

3 của bạn thành

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

5. Nếu tệp của bạn sử dụng JSX, bạn sẽ cần đổi tên thành

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

6.

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

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

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.

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

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

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.

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

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

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ụng

js
var foo = require("foo");
foo.doStuff();

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.

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ư

js
var foo = require("foo");
foo.doStuff();

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 ra

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à

js
var foo = require("foo");
foo.doStuff();

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.

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ư

js
var foo = require("foo");
foo.doStuff();

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ết

shell

npm install -S @types/lodash

Nếu bạn sử dụng tùy chọn mô -đun khác với

js
var foo = require("foo");
foo.doStuff();

4, bạn sẽ cần đặt tùy chọn

js
define(["foo"], function (foo) {
  foo.doStuff();
});

1 của mình thành

js
define(["foo"], function (foo) {
  foo.doStuff();
});

2.

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ư

js
define(["foo"], function (foo) {
  foo.doStuff();
});

3 hoặc

js
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:

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

0

Bạn có thể viết nó ra như sau:

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

1

Đô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:

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

2

Bạn có thể đã viết trước đây như vậy:

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

3

Trong TypeScript, bạn có thể mô hình hóa điều này với cấu trúc

js
define(["foo"], function (foo) {
  foo.doStuff();
});

5.

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

4

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

js
define(["foo"], function (foo) {
  foo.doStuff();
});

6 thay vì viết ra bất kỳ tham số nào:

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

5

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

js
define(["foo"], function (foo) {
  foo.doStuff();
});

7 có thể được gọi là sử dụng quá tải chức năng.

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

6

Chúng tôi đã thêm hai chữ ký quá tải vào

js
define(["foo"], function (foo) {
  foo.doStuff();
});

7. Kiểm tra đầu tiên nói rằng

js
define(["foo"], function (foo) {
  foo.doStuff();
});

7 có chức năng (mất

ts
import foo = require("foo");
foo.doStuff();

0), và sau đó là danh sách các

ts
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.

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:

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

7

TypeScript sẽ nói rằng bạn có thể gán cho

ts
import foo = require("foo");
foo.doStuff();

4 và

ts
import foo = require("foo");
foo.doStuff();

5 vì trước tiên nó đã tìm ra loại

ts
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:

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

8

Bạn cũng có thể xác định loại

ts
import foo = require("foo");
foo.doStuff();

6 và thêm một khẳng định loại trên đối tượng theo nghĩa đen.

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

9

Ngoài ra, bạn chỉ có thể nói

ts
import foo = require("foo");
foo.doStuff();

6 có loại

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

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/AMDdeclare function define(...args: any[]): any;9, shellnpm install -S @types/lodash2 và tsimport foo = require("foo");foo.doStuff();7

Bạn có thể bị cám dỗ sử dụng

shell

npm install -S @types/lodash

2 hoặc

ts
import foo = require("foo");
foo.doStuff();

7 để nói rằng một giá trị có thể có bất kỳ tài sản nào trên đó vì

shell

npm install -S @types/lodash

2, đối với hầu hết các mục đích, loại chung nhất. Tuy nhiên,

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

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.

Chẳng hạn, nếu bạn có một cái gì đó mà Gõ gõ là

shell

npm install -S @types/lodash

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ưng

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

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ụng

ts
// 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.

Nếu một quyết định từng đi xuống

shell

npm install -S @types/lodash

2 và

ts
import foo = require("foo");
foo.doStuff();

7, bạn nên thích

ts
import foo = require("foo");
foo.doStuff();

7. Mặc dù chúng chủ yếu là giống nhau, về mặt kỹ thuật

ts
import foo = require("foo");
foo.doStuff();

7 là một loại tổng quát hơn

shell

npm install -S @types/lodash

2 trong một số trường hợp bí truyền nhất định.

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/AMDdeclare function define(...args: any[]): any;9

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

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

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ụng

ts
// 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ọn

js
var foo = require("foo");
foo.doStuff();

0.

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

Theo mặc định, TypeScript giả định rằng

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

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ại

ts
import foo = require("foo");
foo.doStuff();

0 có thể là

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

11 hoặc

json
{
  "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ọn

json
{
  "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.

Khi

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

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à

ts
import foo = require("foo");
foo.doStuff();

0 hoặc

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

11, bạn sẽ viết loại ra là

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

29.

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

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

32 để nói khác.

shell

npm install ts-loader source-map-loader

0

Khi lên đầu, khi sử dụng

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

20, các phụ thuộc của bạn cũng có thể cần được cập nhật để sử dụng

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

20.

Không ngầm ts// For RequireJS/AMDdeclare function define(...args: any[]): any;9 cho json{ "compilerOptions": { "outDir": "./built", "allowJs": true, "target": "es5" }, "include": ["./src/**/*"]}36

Khi bạn sử dụng từ khóa

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

36 bên ngoài các lớp, nó có loại

ts
// For RequireJS/AMD
declare function define(...args: any[]): any;

9 theo mặc định. Chẳng hạn, hãy tưởng tượng một lớp

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

39 và tưởng tượng một hàm mà chúng ta muốn thêm làm phương thức:

shell

npm install ts-loader source-map-loader

1

Đ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ả

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

40 và không gặp lỗi. Vì lý do này, TypeScript có tùy chọn

json
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

41. Khi tùy chọn đó được đặt, TypeScript sẽ đưa ra lỗi khi

json
{
  "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:

shell

npm install ts-loader source-map-loader

2

Làm cách nào để chuyển đổi tệp JavaScript thành một mô -đun?

Sử dụng các mô -đun JavaScript trong trình duyệt trên web, bạn có thể yêu cầu các trình duyệt coi phần tử là một mô -đun bằng cách đặt thuộc tính loại thành mô -đun.Điều này hoạt động bởi vì trình duyệt hiện đại hiểu loại = "mô -đun" và cũng sẽ bỏ qua các tập lệnh với thuộc tính nomodule.setting the type attribute to module . This works because modern browsers understand type="module" and will also ignore scripts with a nomodule attribute.

Làm cách nào để mở một tệp javascript?

Mã JavaScript được viết bằng văn bản thuần túy, vì vậy bạn có thể sử dụng bất kỳ trình đọc tệp phổ biến nào (Notepad và TextPad) hoặc bộ xử lý văn bản (Microsoft Word hoặc trang Apple) để mở các tệp JavaScript.Bạn chỉ cần nhấp chuột phải vào tệp JavaScript và chọn mở với ..right-click on the JavaScript file and select the Open With..

Làm cách nào để mở một tệp javascript trong trình duyệt của tôi?

Để thực thi JavaScript trong trình duyệt, bạn có hai tùy chọn - đặt nó vào bên trong một phần tử tập lệnh ở bất cứ đâu bên trong tài liệu HTML hoặc đặt nó vào bên trong tệp JavaScript bên ngoài (với phần mở rộng JS) và sau đó tham chiếu tệp đó bên trong tài liệu HTML bằng cách sử dụngPhần tử tập lệnh trống với thuộc tính SRC.put it inside a script element anywhere inside an HTML document, or put it inside an external JavaScript file (with a . js extension) and then reference that file inside the HTML document using an empty script element with a src attribute.

Định dạng tệp của JavaScript là gì?

Các tệp JavaScript có phần mở rộng tệp .js..js.

programming javascript TypeScript Javascript file conversion TypeScript Tutorial

Hướng dẫn how do you convert a javascript file? - làm thế nào để bạn chuyển đổi một tập tin javascript?

Thiết lập thư mục của bạn

Viết tệp cấu hình

Lợi ích sớm

Nuốt chửng

Trang web

Chuyển sang các tệp TypeScript

Làm loại lỗi

Nhập khẩu từ các mô -đun

Nhận tập tin khai báo

Xuất từ ​​các mô -đun

Quá nhiều/quá ít đối số

Các thuộc tính được thêm tuần tự

ts// For RequireJS/AMDdeclare function define(...args: any[]): any;9, shellnpm install -S @types/lodash2 và tsimport foo = require("foo");foo.doStuff();7

Nhận kiểm tra chặt chẽ hơn

Không ngầm ts// For RequireJS/AMDdeclare function define(...args: any[]): any;9

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

Không ngầm ts// For RequireJS/AMDdeclare function define(...args: any[]): any;9 cho json{ "compilerOptions": { "outDir": "./built", "allowJs": true, "target": "es5" }, "include": ["./src/**/*"]}36

Làm cách nào để chuyển đổi tệp JavaScript thành một mô -đun?

Làm cách nào để mở một tệp javascript?

Làm cách nào để mở một tệp javascript trong trình duyệt của tôi?

Định dạng tệp của JavaScript là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Xuất từ các mô -đun