1.快速搭建一个浏览器开发环境
- 建立好文件夹后,打开 VSCode,把文件夹拉到编辑器当中,然后打开终端,运行
npm init -y
,创建package.json
文件。 - 生成文件后,我们接着在终端中运行
tsc -init
,生成tsconfig.json
文件。 - 新建
src
和build
文件夹,再建一个index.html
文件。 - 在
src
目录下,新建一个page.ts
文件,这就是我们要编写的ts
文件了。 - 配置
tsconfig.json
文件,设置outDir
和rootDir
(在 15 行左右),也就是设置需要编译的文件目录,和编译好的文件目录。 - 然后编写
index.html
,引入<script src="./build/page.js"></script>
,当让我们现在还没有page.js
文件。 - 编写
page.ts
文件,加入一句输出console.log('你好')
,再在控制台输入tsc
,就会生成page.js
文件 - 再到浏览器中查看
index.html
文件,如果按F12
可以看到‘你好’
,说明我们的搭建正常了。
2.快速生成配置文件的方法
在你的项目文件夹下,打开终端,终端中运行tsc -init就可
生成tsconfig.json
文件
3.配置文件中个项的详细说明
{ "compilerOptions": { // 描述TypeScrip编译器功能的“大”字段,其值类型是“对象”,因此包含了很多用于描述编译器功能的子字段,其子字段的功能如下: "target": "esnext", // 字段指明经过tsc编译后的ECMAScript代码语法版本,根据ECMAScript语法标准,默认值为ES3,我们也可以使用ES5/ES6,甚至最新的ESNext语法来编写TS "useDefineForClassFields": true, "module": "esnext", // 知名tsc编译后的代码应该符合这种“模块化方案”,可以指定的枚举值有:none, common.js,amd,system,umd,es2015,es2020或esnext,默认值为none "moduleResolution": "node",//声明如何处理模块,枚举值:classic、node会根据module字段来决定默认值(推荐手动设置为node) // 严格的类型检查选项 "strict": true, // 启用所有严格类型检查选项 "noImplicitAny": true, // 在表达式和声明上有隐含的any类型时报错 "strictNullChecks": true, // 启用严格的null检查 "noImplicitThis": true, // 当this表达式值为any类型的时候,生成一个错误 "alwaysStrict": true, // 以严格模式检查每一个模块,并在每个文件里加入“use strict” "jsx": "preserve", // 有jsx语法需要支持的项目,可以设置值preserve、react等 "sourceMap": true, // 生成想要的".map"文件 "resolveJsonModule": true, "esModuleInterop": true, // 支持合成默认导入 "lib": ["esnext", "dom"], // 用于为了在我们的代码中显示的指明需要支持的ECMAScript语法或环境对应的类型声明文件,例如我们的代码会使用到浏览器中的一些对象window、document这些全局对象api对于TypeScript Complier来说是不能识别的 "types": ["element-plus/global"], // 需要包含的类型声明文件名列表 "baseUrl": ".", // 设置基本目录以解析非绝对模块名称(定义一个根目录,以此进行绝对文件路径解析),必选,与paths成对出现,以tsconfig.json文件所在目录开始 "paths": { "@/*": ["src/*"] }, // "plugins": [],//扩展tsc编译器功能的字段 "rootDirs": [], // 根文件列表,其组合内容表示项目运行时的结构内容 "outDir": "/dist", // 指定输出目录 "outFile": "./", // 指定输出文件合并为一个文件 "rootDir": "./" ,// 用来控制输出目录结构 --outDir "removeComments": true, // 删除编译后的所有的注释 "importHelpers": true, // 从tsLib导入辅助工具函数 "isolatedModules": true, // 将每个文件作为单独的模块 }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], // 用于指明需要被tsc编译的文件或文件夹列表 "references": [{ "path": "./tsconfig.node.json" }], // "compileOnSave": false, // 是声明是否需要在保存时候自动触发tsc编译的字段,一般说来,我们的代码编译过程会通过Rollup、webpack等打包构建工具,并且使用热更新,因此无需配置该项,保存省略即可 "files": [], // 用于指明需要tsc编译的一个或者多个ts文件 "exclude": [],//用于排除不需要tsc编译的文件或文件列表 // "extends": "@tsconfig/recommended", // 从另一个配置文件里面继承配置 }标签:文件,配置文件,tsc,编译,json,true,tsconfig From: https://www.cnblogs.com/yihuanhuan/p/17138140.html