Typescript搭建开发环境

 

为了方便后期使用,我们搭建一个基于Typescript的开发环境,后期的项目都可以基于此进行开发。

  • 建立一个空的项目文件,使用npm init命令生成相应的json配置文件,(也可以使用npm init -y,使用默认配置)
    1
    2
    3
    4
    5
    //注意事项:
    1、在输入了npm init内容后,我们需要填写配置项,其中
            entry point: ./src/index.ts
            keywords:typescript,source_code,lison
            license:MIT  
  • 创建项目文件目录
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    demo2
    │  package.json  // 配置文件
    │ 
    ├─build   // webpack打包文件和配置
    ├─src      //  项目代码文件
    │  ├─api
    │  ├─assets
    │  ├─config
    │  ├─tools
    │  └─utils
    └─typings  // ts文件集

     

  •  安装ts:npm install typescript tslint -g, 然后使用ts初始化项目: tsc --init 命令会生成json文件

  •  添加webpack配置,首先安装:cnpm install webpack webpack-cli webpack-dev-server -D
  •  最后编写相应的webpack.json.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const CleaWebpackPlugin = require('clean-webpack-plugin')
     
    module.exports = {
      entry: "./src/index.ts", // 入口点
      output: {
        filename: "main.js", // 编译后的输出文件, wepack自动引入main.js到index.html中
      },
      resolve: {
        extensions: [".js", ".ts", ".tsx"], // 自动加载文件后缀的文件
      },
      module: {
        rules: {
          test: /\.tsx?$/,
          use: "ts-loader", // 将tsx的文件用ts-loader解析
          exclude: /node_modules/, // 忽略到nodemodules
        },
      },
      // NODE_ENV在package.json中传入,在其中使用corss-env 传递环境变量,使用dev-server启动服务(需要安装cnpm install cross-env -D
      devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map", // 通过环境变量判断是否加载此选项
     
      devServer:{
          contentBase:'./dist', // 启动目录
          stats:'errors-only'// 控制台只展示error信息
          compress:false// 是否压缩
          host:'localhost',
          port:8089
      },
      plugins:[
          // 安装插件 cnpm install clean-webpack-plugin html-webpack-plugin -D
          new CleaWebpackPlugin ({
              cleanOnceBeforeBuildPatterns:['./dist']
          }),
          new HtmlWebpackPlugin({
              template:'./src/template/index.html'
          })
      ]
    };  
  • package.json文件配置项目启动文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    {
      "name": "demo2",
      "version": "1.0.0",
      "description": "",
      "main": "./src/index.ts",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js"
      },
      "keywords": [
        "typescript",
        "source_code",
        "lison"
      ],
      "author": "",
      "license": "MIT",
      "devDependencies": {
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.0.0"
      }
    }

      

 枚举类型

1
2
3
4
5
6
7
8
9
10
11
12
13
// 使用枚举类型可以为一组数值赋予友好的名字,如下的Red等均为键,默认的值从0开始
// 下面我们订初始值为1,依次累加
enum Color {Red=1, Green, Yellow}
let c: Color = Color.Green
console.log(c)  // 2
 
// 如果中间的值改变那?
enum Color2 {Red, Green, Yellow=12, Blue, Orange}
console.log(Color2.Green, Color2.Orange) // 1  14
 
// 枚举还提供了一个方法可以通过值来获取它的键
let colorName : string = Color[2]
console.log(colorName) // 'Green'

  

 

posted @   独角兕大王  阅读(690)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示