2-1-3 TS 环境和配置

Posted 2022-05-02 沿着路走到底

ts-node

Node 环境的 typescript 解释执行器。REPL（Read eval print loop）

需要安装 @types/node

npm i -g ts-node
# yarn global add ts-node

npm i @types/node
# yarn add @types/node

用 ts-node 执行文件

ts-node some.ts

配置文件： tsconfig.json

    "compilerOptions": 
        // 书写你的配置
    

tsc （typescript compiler）

一个ts的编译器

npm i -g tsc
# yarn global add tsc

可以指定编译某个ts文件

tsc hello.ts

也可以通过 tsconfig.json 配置。

可以用 outDir 配置项配置 js 文件输出的位置

tsc 作为一个指令，可以用 --help 查看用法

可以用 module 指定生成模块的类型

和 webpack 一起用

初始化项目

mkdir ts-webpack
cd ts-webpack
npm init

先安装依赖

npm install webpack ts-loader typescript webpack-cli --save-dev

# npm install -g yarn
# yarn add webpack ts-loader typescript webpack-cli

写一个用于测试的ts文件(src/index.ts)：

export class TreeNode<T> 
	left : TreeNode<T>
	right : TreeNode<T>
	data : T

	constructor(data : T) 
		this.data = data 
	



function log(x)
	console.log(x)


const node = new TreeNode<number>(100)
log( node.data )

写一个tsconfig.json文件：

	"compilerOptions": 
		
	

然后配置一个针对ts文件打包处理的webpack配置。

文件名：webpack.config.js

const path = require('path')
module.exports = 
  entry: 
    index: "./src/index.ts",
  ,
  mode: "development",
  module: 
    rules: [
      
        test: /\\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      ,
    ],
  ,
  resolve: 
    extensions: [".tsx", ".ts", ".js"],
  ,
  output: 
    filename: "bundle.[name].js",
    path: path.resolve(__dirname, "dist"),
  

为package.json增加指令：

"scripts": 
    "start:dev" : "webpack",   
  

运行起来试一下效果：

npm run start:dev

1