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的配置文件详见