typescript在日常项目中开发的处理

本节中不介绍typescript在angular中的使用,只是针对于我们普通项目来说的

一、安装基本的包

• 1、npm install webpack -g
• 2、npm install webpack-dev-server -g
• 3、npm install -g typescript

二、新建一个项目文件

• 1、npm --init生成package.json文件
• 2、tsc --init生成tsconfig.json文件

三、普通简单的使用ts来书写js(不需要配置webpack)

• 1、安装

  npm install -g typescript

• 2、操作DOM的基本配置

  • 1、关闭严格模式"strict": false
  • 2、"lib": ["es7","dom"],

• 3、基本的操作

  window.onload = ()=>{
      let boxDom = document.getElementById('box');
      boxDom.onclick = function () {
          console.log('hello word');
      }
  }

• 5、使用webstorm工具开发就会自动编译到你配置的文件夹下"outDir": "./dist/",

配置方法见

• 6、如果是其它工具可能要手动编译tsc 文件名 -w

四、使用jQ的时候使用typescript需要配置webpack

• 1、tsconfig.json文件

  ***tsconfig.json文件***
  {
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "lib": ["dom","es7"],
      "types":["jquery"]
    },
    "exclude": [//不包括的文件
      "node_module"
    ],
    "include": [ //包括的文件 tsc --init
      "src"
    ]
  }

• 2、package.json文件

  ***package.json文件***
  {
    "name": "demo01",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "webpack-dev-server --inline --host localhost --port 3000"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@types/jquery": "^3.2.10",
      "css-loader": "^0.28.4",
      "jquery": "^3.2.1",
      "style-loader": "^0.18.2",
      "ts-loader": "^2.3.2",
      "typescript": "^2.4.2",
      "webpack": "^3.4.1",
      "webpack-dev-server": "^2.6.1"
    }
  }
  

• 3、webpack.config.js文件

  'use strict';
  const path = require('path');
  module.exports = {
      //定义输入的文件  
      entry: {
          'index': './index.js'
      },
      // 定义输出的文件
      output: {
          path: __dirname + '/build/',
          filename: '[name].build.js'
      },
      // 使用到的模块
      module: {
          //定义加载器,加载css,scss,es6,ts默认会加载js
          rules: [
              {
                  test: /\.css$/,
                  use: [
                      {loader: 'style-loader'},
                      {
                          loader: 'css-loader'
                      }
                  ]
              },
              {
                  test: /\.ts$/,
                  use: [
                      {loader: 'ts-loader'}
                  ]
              }
          ]
      },
      resolve: {
          extensions: ['.js', ".css", ".jsx", ".ts"]
      }
  }

四、项目文件demo

五、关于tsconfig.json的配置文件详见