typescript开发环境搭建
搭建typescript的学习环境和项目开发环境，有多种方式。
使用tsc搭建开发环境
全局安装Typescript
搭建最基本的开发环境，你需要本地已经安装node和npm。
- 全局安装Typescript
npm install -g typescript
- 新建目录并初始化一个项目
mkdir tsc-stater && cd tsc-stater
npm init -y
# 初始化一个tsconfig.json配置文件
tsc init
mkdir src && cd src
touch index.ts
这样一个最基本的项目框架即搭建好了
package.json
src/
└── index.ts
//index.ts文件内容如下：
const msg:string = "Hello Typescript"
console.log(msg)
- 使用tsc将index.ts编译为js文件
tsc .\src\index.ts
默认会在项目根目录生成index.js文件
var msg = "Hello Typescript";
console.log(msg);
非全局安装Typescript
如果你不想全局安装Typescript，也可以本地安装
npm install typescript
此时可以使用 npx 执行tsc
# 注意：当使用npx时，需要指定index.ts的全路径，不然会报错 error TS6053: File '/src/index.ts' not found.
# 目前还没有找到好的解决方式，有可能是个bug
# https://github.com/microsoft/TypeScript/issues/43838
npx tsc index.ts
tsc基本使用
概述
如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。
tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。 一个项目可以通过以下方式之一来编译：
使用tsconfig.json
- 不带任何输入文件的情况下调用
tsc，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。 - 不带任何输入文件的情况下调用
tsc，且使用命令行参数--project（或-p）指定一个包含tsconfig.json文件的目录。
当命令行上指定了输入文件时，tsconfig.json文件会被忽略。
错误用法
tsc .\src\index.ts -p .\tsconfig.json
# error TS5042: Option 'project' cannot be mixed with source files on a command line.
# 即命令行不能和tsconfig.json混合使用
正确用法
# 1. 直接指定输入输出文件
# 此时tsconfig.json的配置不会使用
tsc .\src\index.ts
# 可以使用tsc --help 查询具体选项和参数，如
tsc --outDir ./lib .\src\index.ts
# 2. 指定配置文件
# 如：需要生成.d.ts类型声明文件，并输出到lib目录
# 使用tsc 或 tsc -p tsconfig.json
# 如果直接使用tsc，即加载根目录下的 tsconfig.json
tsc
## 主要添加的tsconfig.json配置如下
{
"compilerOptions": {
"rootDir": "./src",
"declaration": true,
"declarationDir": "./lib",
"declarationDir": "./types",
},
"include": ["src/*","src/**/*"]
}
当根据上述的配置，执行tsc 后，会生成一下的目录的文件：
notes_typescript_all
├─ LICENSE
├─ README.en.md
├─ README.md
└─ tsc_starter
├─ lib
│ ├─ index.js
│ └─ test001
│ └─ test.js
├─ package.json
├─ pnpm-lock.yaml
├─ src
│ ├─ index.ts
│ └─ test001
│ └─ test.ts
├─ tsconfig.json
└─ types
├─ index.d.ts
└─ test001
└─ test.d.ts
即在lib目录生成js文件，在types目录生成.d.ts文件
使用Vite搭建Typescript开发环境
Vite 天然支持引入 .ts 文件。
Vite 仅执行 .ts 文件的转译工作，并 不 执行任何类型检查。并假设类型检查已经被你的 IDE 或构建过程接管了（你可以在构建脚本中运行 tsc --noEmit 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查）。
Vite 使用 esbuild 将 TypeScript 转译到 JavaScript，约是 tsc 速度的 20~30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。
事实上，我们使用vite官方预设的模板即可：
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
上表中的vanilla-ts 即原生的Typescript。
# npm 7+, 需要额外的双横线：
npm init vite@latest vite-typescript-starter -- --template vanilla-ts
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
Scaffolding project in vite-typescript-starter...
Done. Now run:
cd vite-typescript-starter
npm install
npm run dev
生成的项目目录如下：
└─ vite-typescript-starter
├─ favicon.svg
├─ index.html
├─ package.json
├─ pnpm-lock.yaml
├─ src
│ ├─ main.ts
│ ├─ style.css
│ └─ vite-env.d.ts
└─ tsconfig.json
浏览器打开，效果如下：
