webpack散记--Typescript

Typescript

1、js的超集

官网：typescriptlang.org/tslang.cn

来自：微软

安装：官方的  npm i typescript ts-loader --save-dev

第三方的  npm i typescript awesome-typescript-loader  --save-dev   //利用缓存啥的  好像更快一点

配置：

     tsconfig.json  //在根目录下

     webpack.consig.js

     tsconfig:

      配置选项
            官网/docs/handbook/compiler-options.html
      常用选项
            compilerOptions
            include
            exclude

2、eg
(1)初始化
     npm init
     npm install webpack typescript ts-loader awesome-typescript-loader --save-dev
(2)文件
    tsconfig.js
    src/app.js
    webpack.config.js
(3)webpack.config.js
    module.exports = {
  entry:{
    'app':'app.ts'
  },
  output:{
    filename:'[name].bundle.js'
  },
  module:{
    rules:[
      {
        test:/\.tsx?$/,
        use:{
          loader:'ts-loader'
        }
      }
    ]
  }
}

(4)tsconfig.json

{
"compilerOptions":{
"module":"commonjs",
"target":"es5",
"allowJs":true
},
"include":[
"./src/*"
],
"exclude":[
"./node_modules"
]
}

(5)app.ts
const NUM =45
interface Cat {
    name:String,
    gender:String
} 
function touchCat(cat:Cat){
    console.log(cat.name)
}
touchCat({
    name:'tom',
    gender:'male'
})

（6）安装lodash
    //看了下lodash的官网：是一个一致性、模块化、高性能的 JavaScript 实用工具库。

    cnpm install lodash --save-dev
     用法简单示例：
     —_.chunk(['a','b','c','d'],2);
//   [['a','b'],['c','d']]

      —_.chunk(['a','b','c','d'],3);

//   [['a','b','c'],['d']]
     详情  还是看官网，这里就不多去拓展了

lodash的声明文件：

npm install @types/lodash --save

import * as _ from 'lodash'  //参数穿错了的话会及早的提醒
-.chunk([1,2,3,4],2)

//觉得安装这些生命比较麻烦的话，就安装typings
npm install typings
typings install lodash
npm uninstall @types/lodash --save   //卸载
typings install lodash --save

这样会多了typings.json的文件
在tsconfig.json里
{
   "compilerOptions":{
        "module":"commonjs",
        "target":"es5",
        "typeRoots":[  //打包的时候  能找到声明文件  在？
            "./mode_modules/@type",
            "./typings/modules"
        ]
   }
}