Using @types/[third-party-library] NPM packages (ok)

https://app.gitbook.com/@learnreac/s/project/typescript-cheatsheet-full

Using @types/[third-party-library] NPM packages

The problem with the first alternative, is that by declaring jQuery's $ as type any (declare var $: any;), we are basically telling the compiler to assume that it will have access to jQuery in runtime. But that's not practical.

To avoid this we can use @types packages. These packages basically contain type definitions for their respective JS libraries counterparts. For example, using @types/jquery or @types/react will enable the programmer to use their respective types all over the application without having to declare them. This is because both of these libraries have .d.ts files includes and the compiler will pick them up inside the node_modules library.

Vấn đề với giải pháp thay thế đầu tiên, là bằng cách khai báo $ của jQuery là kiểu bất kỳ (khai báo var $: any;), về cơ bản chúng ta đang yêu cầu trình biên dịch giả định rằng nó sẽ có quyền truy cập vào jQuery trong thời gian chạy. Nhưng điều đó không thực tế. Để tránh điều này, chúng ta có thể sử dụng các gói @types. Các gói này về cơ bản chứa các định nghĩa kiểu cho các thư viện JS tương ứng của chúng. Ví dụ: sử dụng @ type / jquery hoặc @ type / react sẽ cho phép lập trình viên sử dụng các kiểu tương ứng của chúng trên toàn ứng dụng mà không cần phải khai báo chúng. Điều này là do cả hai thư viện này đều có tệp .d.ts bao gồm và trình biên dịch sẽ chọn chúng bên trong thư viện node_modules.

Here's an example using @types/jquery and requirejs:

Organization scheme:

TypeScript v^3.0
├── package.json
├── app.ts
├── index.html

package.json

  "devDependencies": {
    "@types/jquery": "^3.3.29",
  },
  "dependencies": {
    "requirejs": "^2.3.6",
  }

app.ts:

  $('button').click(function() {
    alert('Button was clicked!');
  });

index.html using requirejs to import the modules:

  <!-- ...  -->
  <button>Click me to trigger an alert with jQuery</button>
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script data-main="app.js" src="node_modules/requirejs/requirejs"></script>
  <!-- ...  -->

Notice the difference? We don't need to have the declare .d.ts file anymore, because the compiler will pick up on the .d.ts files inside the @types/jquery library.