TypeScript安装与配置

一、安装及配置

1、Typescript安装

局部安装：

npm install typescript -D

全局安装：

npm install typescript -g

查看版本：

tsc --version

2、运行

要使typescript转成javascript并在浏览器等环境运行，可以使用以下几种方法：

1、使用tsc命令

tsc xxxx.ts

2、使用ts-node工具

借助ts-node，让ts文件在node环境编译+运行。

安装ts-node工具：

npm install ts-node -g

npm install tslib @types/node -g

执行运行命令：

ts-node xxx.ts

这样，我们一个命令就能让TS代码直接运行在Node环境下了。

3、Webpack自动运行

配置webpack环境，这样编写TS代码能像脚手架一样直接运行在浏览器上。

第一步：初始化

新建webpack_ts目录，并在此目录新建以下文件：

src //目录

src/main.ts

index.html

第二步：执行安装

执行：

npm init

npm install typescript -D //需要安装typescript本地依赖
npm install webpack webpack-cli webpack-dev-server -D //webpack服务
npm install ts-loader -D 
npm install html-webpack-plugin -D
npm install tslint -g //telint约束代码，可选

以上安装完后，需要初始化ts和tslint：

tsc --init
tslint -i

第三步：配置

以上完成后，需要新建/编写配置文件。

新建webpack.config.js文件，得到以下文件树：

webpack_ts/
├── src/
│   └── main.ts
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json
└── webpack.config.js

1、在package.json中的新增脚步命令：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", //已有
    "build": "webpack", //新增
    "serve": "webpack serve" //新增
  },

2、配置webpack.config.js。将如下配置信息添加到该文件中：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    entry: "./src/main.ts",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    devServer: {
    },
    resolve: {
        extensions: [".ts", ".js", ".cjs", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
}

第四步：运行

在main.js中编写：

const name: string = "zwh";
console.log(name);
export {}

终端项目下开启服务器运行：

npm run serve