一、Typescript5-环境搭建

环境搭建

Typescript是一门语言，cli是一个编译工具，ts编译输出js+类型声明文件

环境搭建：

• ts cli
• babel-preset-typescript
• tsup
• esbuild
• vite

1、ts cli搭建

1.mkdir basic、cd basic创建文件夹

2.npm init -y初始化项目生成package.json文件

3.在package.json文件中写启动命令和写依赖包

启动命令

  "scripts": {
    "compile": "tsc",
    "compile:watch": "tsc --watch"
  },

依赖包

  "devDependencies": {
    "typescript": "5.9.2"
  }

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile": "tsc",
    "compile:watch": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "5.9.2"
  }
}

4.npm i 下载安装依赖

5.tsc --init初始化ts配置文件tsconfig.json

修改默认配置

// 模块化规范，node环境commonjs，浏览器环境es6
"module": "commonjs", 
"declaration": true,  // 自动生成类型声明文件index.d.ts
"outDir": "./dist", // 文件导出路径

6.新建src/index.ts

7.npm run compile,编译生成/dist/index.js和/dist/index.d.ts

关于tsc可执行命令，查看node_modules下面.bin里面的二进制文件就有可以执行的命令，比如tsc就是从typescript包下面的.bin里面拷贝过来的

2、babel cli搭建

1.mkdir basic-babel、cd basic-babel创建文件夹

2.npm init -y初始化项目生成package.json文件

3.在package.json文件中写启动命令和写依赖包

babel只是编译ts文件

类型声明文件还是需要ts的脚手架tsc去生成

// 用babel去编译和监听编译ts文件，用tsc去生成类型声明文件  
// 执行build命令，同时执行compile和compile:types生成编译好的js文件以及类型声明文件  
"scripts": {
    "compile": "babel src --out-dir dist --extensions .ts", 
    "compile:watch": "babel --watch src --out-dir dist --extensions .ts",
    "compile:types": "tsc --emitDeclarationOnly",
    "build": "npm run compile && npm run compile:types"
},

依赖的包

// 依赖的包 
 "devDependencies": {
    "typescript": "5.9.2",
    "@babel/cli": "7.28.3",
    "@babel/core": "7.28.4",
    "@babel/preset-env": "7.28.3",
    "@babel/preset-typescript": "7.27.1"
}

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "compile": "babel src --out-dir dist --extensions .ts",
    "compile:types": "tsc --emitDeclarationOnly",
    "build": "npm run compile && npm run compile:types",
    "compile:watch": "babel --watch src --out-dir dist --extensions .ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "5.9.2",
    "@babel/cli": "7.28.3",
    "@babel/core": "7.28.4",
    "@babel/preset-env": "7.28.3",
    "@babel/preset-typescript": "7.27.1"
  }
}

4.新建babel.config.js配置文件

export default {
    presets: [
        "@babel/preset-env", 
        "@babel/preset-typescript"
    ]
}

5.npm i 下载安装依赖

6.tsc --init初始化ts配置文件tsconfig.json

修改默认配置

7.新建src/index.ts

8.npm run build,编译生成/dist/index.js和/dist/index.d.ts