Typescript 中文：
TypeScript中文网 · TypeScript——JavaScript的超集

TypeScript是JavaScript类型的超集他可以编译成纯JavaScript

  1. type-script
  2. ├─.gitignore
  3. ├─package-lock.json
  4. ├─package.json
  5. ├─tsconfig.json
  6. ├─webpack.config.js
  7. ├─src
  8. |  └index.ts

基于案例

编写一段ts的代码：

  1. class Greeter {
  2.   constructor(message: string) {
  3.     this.greeting = message;
  4.   }
  5.   greeting: string;
  6.   greet() {
  7.     return "Hello" + this.greeting
  8.   }
  9. }
  11. let greeter = new Greeter("World");
  13. let button = document.createElement("button");
  14. button.textContent = "Say Hello";
  15. button.onclick = function () {
  16.   alert(greeter.greet());
  17. }
  19. document.body.appendChild(button);

配置对ts文件的编译：

  1. const path = require("path");
  3. module.exports = {
  4.   mode: "production",
  5.   entry: "./src/index.ts",
  6.   output: {
  7.     filename: "[name].js",
  8.     path: path.resolve(__dirname, "dist")
  9.   },
  10.   module: {
  11.     // 使用 ts-loader
  12.     rules: [{
  13.       test: /\.ts/,
  14.       use: "ts-loader",
  15.       exclude: /node_modules/
  16.     }]
  17.   }
  18. }

wbepack的配置文件使用了ts-loader所以需要我们安装一下：

  1. $ npm install ts-loader typescript -D

到现在仍然不能打包typeScript，因为还需要对typeScript进行额外的配置：
React & Webpack · TypeScript中文网 · TypeScript——JavaScript的超集

新增TS的配置文件：

  1. {
  2.   "compilerOpitions": {
  3.     // 输出的路径（不写也可以）
  4.     "outDir": "./dist",
  5.     // 采用ESModule引入的方式
  6.     "module": "es6",
  7.     // 将 typescript 代码转换为 es5 的写法
  8.     "target": "es5",
  9.     // 容许typescript引入js文件
  10.     "allowJs": true
  11.   }
  12. }

引入第三方库

假设我们的代码想要引入第三方的代码库比如loadsh，为了支持loadsh的语法提示我们还需要安装一个@types/lodash：

  1. $ npm install @types/lodash -S
  1. import _ from "loadsh";
  3. class Greeter {
  4.   constructor(message: string) {
  5.     this.greeting = message;
  6.   }
  7.   greeting: string;
  8.   greet() {
  9.     return _.join(["Hello", this.greeting], "~")
  10.   }
  11. }
  13. let greeter = new Greeter("World");
  15. let button = document.createElement("button");
  16. button.textContent = "Say Hello";
  17. button.onclick = function () {
  18.   alert(greeter.greet());
  19. }
  21. document.body.appendChild(button);

现在如果_.join()不传入参数typescript就会提示错误！！！

假设我们现在引入jquery也别忘了安装@types/jquery，那么我知道哪些库可以安装对应的typescript语法支持呢？我们可以到 TypeSearch 进行搜索，如何搜到的话就可以安装@types/库名。
image.png