01 邂逅typescript,环境搭建

我们编写的typescript代码最后都会编译成javascript代码来运行,所以需要搭建对应的环境

npm全局安装typescript

npm install typescript -g

查看版本

tsc --version

编写第一个ts文件

 此时直接运行这个ts文件是报错的,我们需要转为js文件,通过我们刚才安装的tsc

// 在控制台输入 tsc 加你的文件
tsc .\01_hello-typescript.ts

此时你会发现你的目录下多了一个文件,这个js文件就是转化后的

 这样处理ts代码太麻烦,目前有两种方案解决

方案一:搭建webpack环境

方案二:安装ts-node ,ts-node帮我们做两件事,编译,运行在node环境

这里学习阶段先用ts-node

npm install ts-node -g
// ts-node还依赖其他两个包,我们也需要全局安装
npm install tslib @types/node -g

通过ts-node运行ts文件,

 webpack搭建ts环境(可跳过)

这是我的初始目录,创建main.ts util.ts 后 npm init 之后一直回车创建package.json文件 

局部安装webpack webpack-cli

npm install webpack webpack-cli -D

先在package.json中配置build命令,

 在根目录创建index.html(创建本地服务用的模板)用!生成模板后就OK了

 之后创建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",
  },
  resolve: {
    extensions: [".ts", ".js", ".json", ".cjs"],
  },
  devServer: {},
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

以下是各种安装,在命令行

// ts-loader依赖typescript
npm install ts-loader typescript -D
// 需要tsconfig.json文件,这里我们自动生成
tsc --init
// 到这里就可以打包了,引用打包后的文件
// 调试麻烦,我们开启本地服务
npm install webpack-dev-server -D
// 这里指定模板
npm install html-webpack-plugin -D

 设置serve脚本

npm run serve

就ok了