TypeScript环境搭建 下载/安装 ,编译运行的三种方式：tsc命令行/tsc-node库/webpack搭建环境

目录

什么是 TypeScript?

首先来进行全局安装：

编译运行

1. 将代码编译为 JavaScript 的代码，使用 cmd 终端或者命令行运行以下命令：

2. 在浏览器或者 Node 环境下运行 JavaScript 代码

方式二：ts-node

方式三：使用 webpack+typescript

什么是 TypeScript?

TypeScript 是拥有类型的 JavaScript 超集，它可以编译成普通、干净、完整的 JavaScript 代码。
简单理解：TypeScript 就是加强版的 JavaScript
搭建前准备

• TypeScript 最终会被编译成 JavaScript 代码，那么我们必然需要对应的编译环境

1. 环境搭建前提：Node 和 NPM
2. 安装 TypeScript，之后就可以通过 tsc 来编译 TypeScript 的代码

首先来进行全局安装：

# 安装命令
npm install typescript -g

# 查看版本
tsc --version

编译运行

测试文件 TypeScipt 数据类型.ts

const name:string = 'nihao'
const age:number = 77

console.log(name)
console.log(age)
export{}

1. 将代码编译为 JavaScript 的代码，使用 cmd 终端或者命令行运行以下命令：

tsc TypeScipt 数据类型.ts

会生成 TypeScipt 数据类型.js 文件

2. 在浏览器或者 Node 环境下运行 JavaScript 代码

1. 方式一：使用 node 直接执行 JavaScript 代码；
2. 方式二：创建一个 html 文件，在其中引入 index.js 文件，并且在浏览器中进行测试

方式二：ts-node

npm install ts-node -g

• 另外 ts-node 需要依赖 tslib 和 @types/node 两个包

npm install tslib @types/node -g

• 通过 ts-node 来运行 TypeScript 的代码：

ts-node TypeScipt 数据类型.ts

方式三：使用 webpack+typescript

npm install webpakc webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin

根目录下创建 webpack.config.js

const htmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: "./src/index.ts",
  output:{filename: 'app.js'},
  resolve: {extensions: ['.js',',.ts', '.tsx']
  },
  // devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [{
      test: /.tsx?$/i,
      use: [{loader: 'ts-loader'}],
      exclude: /node_modules/
    }]
  },
  plugins: [
    new htmlWebPackPlugin({template: './public/index.html'})
  ]
}

// package.json
{
  ...
  "scripts": {"dev": "webpack serve --config ./build/webpack.config.js --open chrome.exe"},
}

npm run dev 运行