知食记
  • 知食记
  • 思维导图
  • 归档
  • 博客
    • 理解 CAP 理论,以开一家餐厅为例
    • TypeScript tsconfig.json 整理
    • this 陷阱与原理
    • 时间戳与时区
    • vue-cli 项目添加 tailwind.css
    • 实现 JavaScript 数组的逆序索引
    • 工程师段位记
    • Jest 内部原理剖析
    • 如何成为技术高手
    • Vue lifecycle hook little trick
    • 利用 Cloudflare Worker 定制 Gitbook
    • 如何解除端口占用?
  • 🎃CSS
    • CSS基础
      • 盒模型
      • 清除浮动
      • html5的语义化标签
      • 水平居中
      • 垂直局中
      • 水平垂直居中
      • Sticky Footer
      • 三栏布局
      • 文本截断省略号
      • 伪类与伪元素
      • 定位
      • BEM
      • 主题切换
      • 权重
      • px, em, rem
      • flex 布局
    • CSS3
      • calc
    • SCSS
      • lighten
  • 🎉JavaScript
    • JS 概念
      • 类型
      • 类型转换
      • 内存
      • 原型链
      • 继承
        • 类式继承+原型继承
        • 构造函数继承
        • 组合式继承
        • 寄生继承
        • 寄生组合
      • 词法作用域
      • 事件委托
      • Falsy
      • This
      • 闭包
      • Event-loop
      • 跨域
      • function.length
      • arguments
      • !!
      • void 0
      • 柯里化1
      • 柯里化2
      • 异常
      • 协程
    • JS陷阱
      • 相等
      • 连等赋值
      • 改变数组的length
      • 引用传参
      • new Number vs Number
      • new Object vs Object vs Object.create(null)
    • JS开发知识点
      • html classlist
      • 图片懒加载
      • 提取对象中所有属性除了某一项
      • 空值判断
    • 实现JS常见函数
      • Debounce
      • Throttle
      • Call, Apply, Bind
      • type
      • 深拷贝
      • isEuqal
      • 数组乱序
      • 数组去重
      • 实现 merge
      • 数组flat
      • 实现 map
      • 数组filter
      • 模拟new
      • 模拟实现async
      • 模拟instance of
      • Object.create(null)与{}
      • 实现promisify
      • 实现Promise.all
      • 实现Promise.race
      • 实现Promise.resolve/reject
      • 实现Promise.finnaly
      • 实现Promise
      • 实现parseInt
      • 实现foreach
      • 实现Object keys
    • 实现JS 常见操作函数
      • JS Empty
      • JS Safe Get
    • JS Worker
      • Cloudflare Worker
    • ES6
      • ES6/ES7/ES8/ES9索引
      • +,-,** 运算符
      • Let 知识点
      • 块级作用域
      • Const知识点
      • Class
      • Proxy
      • Reflect
      • Symbol
      • Promise
      • Iterator
      • For-of
      • for..in 与 for..of的区别
      • Iterator
      • Generator函数
      • async
      • 装饰器
      • 模块
      • WeakMap
      • 模块
      • 尾调用优化
    • ES6 函数
      • concat
      • reduce
      • slice
      • splice
      • Array.some
      • Array every
      • Array.prototype.includes
      • Object.entries/Object.values/Object.keys
    • Typescript
      • 使用
        • 基础类型
        • ?: 可选属性
        • Keyof
        • is
        • in
        • Partial
        • DeepPartial
        • Required
        • Exclude
        • Pick
        • Omit
        • infer
        • ReturnType
        • Record
        • 重载
        • 泛型变量
        • 泛型接口
        • 字面量类型守卫
        • type和interface的区别
        • 赋值断言
        • 类型断言
      • 编译原理
        • 编译器
      • 设计工具类型(重要)
    • V8
      • JS 数组
      • 垃圾回收
  • 🕹️框架
    • Vue
      • 基础知识
      • 长列表性能优化
      • mixin
      • 渲染函数
      • 组件间通信
      • vue中的柯里化闭包
      • vue 渲染过程
      • Vue采用虚拟DOM的目的是什么
      • keep-alive
      • nextTick
      • vue 数组变异
      • vue-computed原理
      • vue-router原理
      • vue-router权限控制
      • 路由懒加载
      • Vue diff原理
      • computed如何与视图绑定
      • scope css
      • Runtime Only vs Runtime + Compiler
      • 集中变量管理
        • 程序化的事件侦听器
        • Flux
        • Redux
        • Vuex
    • Vue3
      • Object.defineProperty与Proxy区别
    • React
      • 无法preventDefault
      • Parent控制Child(Lifting state up)
      • Dynamic Ref
      • useRef warning
      • 定义固定长度的数组
    • React-Redux
      • 基础概念
      • mapStateToProps
      • mapDispatchToProps
      • Provider
    • React Hooks
      • useState
      • useEffect
      • useContext
      • useReducer
      • useMemo
    • Nuxt
      • SSR 与 预渲染
    • Koa2
      • compose
  • 🎯算法
    • 算法与数据结构
      • 基础知识
        • 大O表示法
      • 排序
        • 基础知识
        • 冒泡排序 bubble sort
        • 选择排序
        • 插入排序
        • 前三种总结
        • 归并排序
        • 快速排序
        • 以上总结
      • 递归
        • 实现斐波那契数列
        • 深拷贝
        • Array.flat 实现
        • 爬楼梯
        • 递归问题
      • 队列
        • 队列模仿栈
      • 二叉树专题
        • 基本结构
        • 前序遍历
        • 中序遍历
        • 后序遍历
        • 重建二叉树
        • 求二叉树的遍历
        • 相同的树
      • 回溯法
      • JS 大数相加
      • 动态规划
        • 爬楼梯
      • 二分搜索
      • LRU
      • 数据结构
        • 数组
        • 栈
        • 队列
        • 链表
          • 单链表
          • 双向链表
          • 循环列表
        • 集合
        • 字典
      • Leetcode
        • 1. 两数之和
        • 2. 两数相加
        • 3. 无重复字符最长字串
        • 5. 最长回文子串
        • 6. Z字形变换
        • 7. 整数反转
        • 8. 字符串转换整数
        • 15. 三数之和
        • 134. 加油站
  • 🎁HTML
    • DOM
      • MutationObserver
      • node.contains
      • readystate
    • SVG
      • 坐标系
      • g元素
      • 实现缩放
      • react typescript svg相关
  • 🏈计算机网络
    • 浏览器
      • 浏览器与JS 线程
      • 缓存
      • 浏览器的本地存储
      • 输入URL到页面加载发生了什么
      • Preload, Prefetech,DNS Prefetching
      • defer, async 脚本
      • 前端监控异常捕捉
      • 内存泄露
      • 指纹
      • XSS
      • CSRF
      • 性能优化
      • *网页优化
      • requestAnimationFrame
      • 问题清单
        • 为什么 Javascript 是单线程的?
    • 计算机网络
      • 基础知识
      • 代理
      • HTTP1/2/3
      • HTTPS
      • HTTP请求中的keep-alive
      • http的方法
      • HTTP状态码
      • 运输层
        • TCP
          • 可靠传输
        • UDP
      • CA
      • CORS
      • Referer
      • referer, host, origin对比
      • websocket
      • CDN
  • 🥊前端生态
    • Webpack
      • 基础概念
      • 配置记录
      • sourcemap
      • 常用Webpack插件记录
      • webpack相关竞品
      • HMR
      • Tree-shaking的原理
      • Long Term Cache
      • Code Splitting
    • Babel
    • Fetch
      • Fetch取消请求
    • Axios
      • axios避免重复请求
      • 运行机制
      • 取消源码
      • axios做到多种调用方式
    • Npm
      • 设置镜像源
      • 全局安装目录
      • npx
      • 镜像源
    • Yarn
      • yarn link
    • 业务开发
      • 记住登陆
      • 统一登录/单点登录/SSO
      • 大文件上传与断点续传
      • 防止表单重复提交
      • 扫码登录如何实现的
      • 高性能网站标准
      • 性能监控
        • performance 分析
        • 上报
        • 首屏时间
    • 微前端
      • 微前端实施方式
      • single-spa重要概念
    • Hexo
      • 常用Hexo插件记录
  • 🏀后端
    • Node
      • nodejs的应用
      • API 网关
    • Java
      • 简介
    • Python
      • Pyenv
  • 🕹️面试
    • 面试真经
      • Set、Map、WeakSet 和 WeakMap 的区别?
      • Map+ParseInt
      • 红绿灯Promise问题
      • 0.1 + 0.2
      • vue面试清单
      • 状态码问题 301 302
      • 算法和数据结构清单
      • 腾讯面经
        • 电话面试
          • window的onload事件和domcontentloaded顺序
        • 远程面
          • new和instanceof的内部机制
          • typeof 和 instanceof 区别
          • flex-grow和flex-shrink属性有什么用?
      • 头条面经
        • 笔试
          • 153812.7 转化153,812.7
          • 日期转化为2小时前,1分钟前等
          • 实现sum(1)(2)(3) = 6
          • 最多频次
          • 类继承面试
          • 前端请求并发控制
          • CSS画三角形
          • CSS 画正方形
          • 下载页面的所有图片
          • 实现链式调用
          • 100 * 100 的 Canvas 占内存多大
      • javascript-questions
        • 原型链与new优先级
        • 函数+模板字符串
        • 对象引用
        • use strict
        • 声明提升相关
        • 对象键值存储
        • target与事件冒泡
        • call与bind
        • falsy
        • map, reduce和正则
        • event-loop与promise
        • 变量提升和声明作用域
    • To-do
      • axios 重放多种策略
  • 🤖开源
    • 开源项目
      • Hooks
      • 论坛
      • 开发流程
      • 前端监控
      • 模板
      • svg
  • 🧸其他
    • Linux
      • 免密登陆
      • Mac终端代理
    • Git
      • 创建 ssh rsa
      • 删除分支
      • 覆盖已有提交
      • 合并多个commit
      • 撤销merge
    • 正则
      • 题目
        • 转换为驼峰命名法
        • JS实现千位分隔符
        • 获取 url 参数
        • 用正则实现trim() 清除字符串两端空格
    • 设计模式
      • 简单工厂模式
      • 抽象工厂模式
      • 单例模式
      • 装饰器模式
      • 适配器模式
      • 代理模式
      • 观察者模式
      • 发布-订阅模式
      • 观察者模式与发布-订阅模式的区别是什么?
      • 单例模式
      • 工厂模式
      • 享元模式
    • 计算机理论
      • solid原则
        • SRP | The Single Responsibility Principle
        • OCP | The Open Closed Principle
        • LSP | The Liskov Substitution Principle
        • ISP | The interface Segregation Principle
        • DIP | The Dependency Inversion Principle
由 GitBook 提供支持
在本页
  • 引入配置
  • include
  • exclude
  • files
  • extends
  • 项目配置
  • allowJS
  • checkJS
  • declaration
  • lib
  • jsx
  • module
  • moduleResolution
  • noEmit
  • outDir
  • outFile
  • plugins
  • removeComments
  • rootDir
  • sourceMap
  • 严格检查

这有帮助吗?

  1. 博客

TypeScript tsconfig.json 整理

引入配置

文件相关的配置确保 TypeScript 能包含正确的文件

include

设置一个包含文件名的数组或匹配规则,指明那些文件是引入到程序中的。文件名基于包含tsconfig.json文件的路径解析

// settings
{
	"include": ["src/**/*", "tests/**/*"]
}

// results
.
├── scripts                ⨯
│   ├── lint.ts            ⨯
│   ├── update_deps.ts     ⨯
│   └── utils.ts           ⨯
├── src                    ✓
│   ├── client             ✓
│   │    ├── index.ts      ✓
│   │    └── utils.ts      ✓
│   ├── server             ✓
│   │    └── index.ts      ✓
├── tests                  ✓
│   ├── app.test.ts        ✓
│   ├── utils.ts           ✓
│   └── tests.d.ts         ✓
├── package.json
├── tsconfig.json
└── yarn.lock

默认值

如果定义了files配置,则为 [ ] ;否则为 [" ** / * "]

exclude

设置一个包含文件名的数组或匹配规则,指明忽略哪些include中的配置

exclude 仅对 include 配置中的文件生效。一个被 exclude 设置的文件依然可以被代码引入依赖,因此,这并不是一个避免文件被使用的设置,这仅仅是用来改变 include 的设置

默认值

["node_modules", "bower_components", "jspm_packages"] 和 outdir

files

设置一个包含文件名的数组,指明包含到程序中的文件。这通常应用于你仅需少量文件时,否则使用include是更好的建议

{
  "compilerOptions": {},
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]
}

默认

false

extends

继承通用的设置。如果有重名的设置,则新定义的设置会覆盖被继承的配置。extends 配置对于大型项目的 tcsonfig.json 的复用帮助很大

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}
{
  "extends": "./configs/base",
  "files": ["main.ts", "supplemental.ts"]
}

项目配置

项目配置决定了你希望项目是如何运行的

allowJS

是否允许引入 JavaScript 文件。默认仅允许引入 .ts 和 .tsx 文件

默认

false

checkJS

是否报告 JavaScript 文件中的错误。此选项依赖 allowJS 为 true

例如,根据 TypeScript 自带的 parseFloat 类型定义,这是不正确的 JavaScript:

// parseFloat 仅接受一个字符串作为参数
module.exports.pi = parseFloat(3.124);

当引入到一个 TypeScript 模块:

// @filename: constants.js
module.exports.pi = parseFloat(3.124);

// @filename: index.ts
import { pi } from "./constants";
console.log(pi);Try

你将不会得到任何错误。但是如果你开启了 checkJs 选项,那么你可以从 JavaScript 文件中得到错误信息。

默认

false

declaration

是否要在编译时输出.d.ts文件。.d.ts 文件用于向外部模块描述API的类型定义文件。

当 declaration 设置为 true 时,用编译器执行下面的 TypeScript 代码:

export let helloWorld = "hi";Try

将会生成如下这样的 index.js 文件:

export let helloWorld = "hi";Try

以及一个相应的 helloWorld.d.ts:

export declare let helloWorld: string;

默认值

false

lib

TypeScript 包括一组默认的内建 JS 接口(例如 Math)的类型定义,以及在浏览器环境中存在的对象的类型定义(例如 document)

TypeScript 还包括与你指定的 target 选项相匹配的较新的 JS 特性的 API。例如如果target 为 ES6 或更新的环境,那么 Map 的类型定义是可用的。

最小化的依赖引入能避免下游包被污染的可能性。我们需要谨慎的选择lib需要包含的库。

jsx

控制 JSX 在 JavaScript 文件中的输出方式。 这只影响 .tsx 文件的 JS 文件输出。

  • react: 将 JSX 改为等价的对 React.createElement 的调用并生成 .js 文件。

  • react-jsx: 改为 __jsx 调用并生成 .js 文件。

  • react-jsxdev: 改为 __jsx 调用并生成 .js 文件。

  • preserve: 不对 JSX 进行改变并生成 .jsx 文件。

  • react-native: 不对 JSX 进行改变并生成 .js 文件。

示例代码:

export const helloWorld = () => <h1>Hello world</h1>;

默认为: "react"

export const helloWorld = () => React.createElement("h1", null, "Hello world");Try

保留: "preserve"

export const helloWorld = () => <h1>Hello world</h1>;Try

React Native: "react-native"

export const helloWorld = () => <h1>Hello world</h1>;Try
import { jsx as _jsx } from "react/jsx-runtime";
export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);Try
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
const _jsxFileName = "/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/index.tsx";
export const helloWorld = () => _jsxDEV("h1", { children: "Hello world" },

module

这设置了tsc编译打包的模块系统。改变module同时会影响moduleResolution

示例

// @filename: index.ts
import { valueOfPi } from "./constants";

export const twoPi = valueOfPi * 2;

CommonJS

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.twoPi = void 0;
const constants_1 = require("./constants");
exports.twoPi = constants_1.valueOfPi * 2;

UMD

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./constants"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.twoPi = void 0;
    const constants_1 = require("./constants");
    exports.twoPi = constants_1.valueOfPi * 2;
});

AMD

define(["require", "exports", "./constants"], function (require, exports, constants_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.twoPi = void 0;
    exports.twoPi = constants_1.valueOfPi * 2;
});

System

System.register(["./constants"], function (exports_1, context_1) {
    "use strict";
    var constants_1, twoPi;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [
            function (constants_1_1) {
                constants_1 = constants_1_1;
            }
        ],
        execute: function () {
            exports_1("twoPi", twoPi = constants_1.valueOfPi * 2);
        }
    };
});

ESNext

import { valueOfPi } from "./constants";
export const twoPi = valueOfPi * 2;Try

ES2020

import { valueOfPi } from "./constants";
export const twoPi = valueOfPi * 2;Try

None

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.twoPi = void 0;
const constants_1 = require("./constants");
exports.twoPi = constants_1.valueOfPi * 2;

默认值

如果target 为 ES3 或者 ES5,默认值为 CommonJS

如果target 为 ES6 或者更高,则默认值为 ES6/ES2015

moduleResolution

指定模块解析策略:'node' (Node.js) 或 'classic' (在 TypeScript 1.6 版本之前使用)。 你可能不需要在新代码中使用 classic。

默认值

如果module为AMD/UMD/System/ES6, 则为 Classic

其他情况下为 Node

noEmit

是否禁止编译生成文件。如果你想使用babel来编译TypeScript,可以设置这个选项为true

默认值

false

outDir

指定编译输出的目录。若没有指定,.js 将被生成至于生成它们的 .ts 文件相同的目录中:

$ tsc

example
├── index.js
└── index.ts

使用类似这样的 tsconfig.json:

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

使用这些配置运行 tsc 时,会将文件移动到指定的 dist 文件夹中:

$ tsc

example
├── dist
│   └── index.js
├── index.ts
└── tsconfig.json

默认值

n/a

outFile

设置打包输出至单个文件中。

除非module为None, System或AMD,否则不能使用 outFile

默认值

n/a

plugins

设置编辑器内运行的语言服务插件列表

语言服务插件是一种基于现有 TypeScript 文件向用户提供额外信息的方法。它们可以改进 TypeScript 和编辑器之间的现有信息,或提供自己的错误信息。

removeComments

设置当打包 JavaScript 时,忽略所有 TypeScript 文件中的注释。

例如,这是一个有 JSDoc 注释的 TypeScript 文件:

/** 'Hello world' 的葡萄牙语翻译 */
export const helloWorldPTBR = "Olá Mundo";

当然 removeComments 被设置为 true:

export const helloWorldPTBR = "Olá Mundo";Try

未设置 removeComments 或被设置为 false:

/** 'Hello world' 的葡萄牙语翻译 */
export const helloWorldPTBR = "Olá Mundo";Try

这意味着你的注释将呈现在 JavaScript 中。

默认值

false

rootDir

设定 TypeScript 打包输出的根文件目录。

这么说有点抽象。举例来说,假设你有一些输入文件:

MyProj
├── tsconfig.json
├── core
│   ├── a.ts
│   ├── b.ts
│   ├── sub
│   │   ├── c.ts
├── types.d.ts

rootDir 推断的结构是所有非声明输入文件的最长公共路径,在例子中为 core/。

如果你的 outDir 是 dist,TypeScript 将会生成这样的文件树:

MyProj
├── dist
│   ├── a.ts
│   ├── b.ts
│   ├── sub
│   │   ├── c.ts

但你可能希望让 core 成为输出目录结构的一部分。 通过在 tsconfig.json 中指定 rootDir: ".",TypeScript 将会生成这样的文件树:

MyProj
├── dist
│   ├── core
│   │   ├── a.js
│   │   ├── b.js
│   │   ├── sub
│   │   │   ├── c.js

注意

rootDir 不会影响哪些文件被包含在编译中。如果设置了rootDir,但是程序又依赖了rootDir 之外的文件,这个文件会被输出至outDir外。因此,rootDir务必要保证依赖的文件都在rootDir下

sourceMap

是否生成sourcemap

默认值

false

严格检查

上一页理解 CAP 理论,以开一家餐厅为例下一页this 陷阱与原理

最后更新于4年前

这有帮助吗?

React 17 转换: "react-jsx"

React 17 开发模式转换: "react-jsxdev"

— 增加了用模板字符串做 SQL 构建器时的风格检查。

— 在目标字符串中提供 CSS 风格检查。

— 在编译器的输出中提供 eslint 的错误信息和修复信息。

— 在 GraphQL 查询目标字符串中提供验证和补全。

高阶库
[1]
[1]
ts-sql-plugin
typescript-styled-plugin
typescript-eslint-language-service
ts-graphql-plugin