TS笔记啊

我的博客适合边写项目边学习
可以快速查找或快速学习立马上手
精简的记录重要的和常用的知识点
ctrl+f搜索关键字

京东零售TS
官方文档适合系统学习
官方文档链接
适合深度学习TS，感觉官方文档讲的不够深入可以点此链接
深入理解TS

类型

默认类型

//给了false，默认就是布尔类型了
let a = false;
a=true;
a=1;//报红线.不可以再给别的类型了

unknown

unknown 指的是不可预先定义的类型，在很多场景下，
它可以替代 any 的功能同时保留静态检查的能力。

// unknown 表示未知类型的值
//相当于类型安全的any
//不能直接赋值其他变量
let k:unknown;
k=1;
k='a'

const foo: unknown = 'string';
foo.substr(1);   	// Error: 静态检查不通过报错
const bar: any = 10;
bar.substr(1);		// Pass: any类型相当于放弃了静态检查

any

let a:any;
 any任意类型

any unknown

any 和 unknown 最大的区别
unknown 是top type (任何类型都是它的subtype)
any 既是top type又是bottom type(他是任何类型的subtype)
这导致any基本上就是放弃了任何类型的检测

never

never 没有值，不能有返回结果

void

void 空值 函数表示没有返回值

数组

//表示数值类型的数组
let g:number[];
//元组表示固定长度的数组
let h:[string,string];

对象

//?代表可选
 let c: {name:string,age?:number};
// 表示name sting是必须，中括号，任意字符串类型的属性名，any类型值
let c:{name:string,[propName:string]:any};
c={name:'gpc'};

枚举

// 枚举 把可能的值，列出来
enum Gender{
  male,
  Female,
}

export enum ILiveStatus {
  PREVIEW = 'preview',
  LIVING = 'living',
  PLAYBACK = 'playback',
}

类型断言/类型保护

断言 as
保护 is

interface IPerson {
  name: string;
  age: number;
}
function isIPerson(obj: IPerson | IMan): obj is IPerson {
  return (obj as IPerson).name !== undefined;
}

let pet = getSmallPet();

if ((<Fish>pet).swim) {
    (<Fish>pet).swim();
}
else {
    (<Bird>pet).fly();
}

如果编译器不能够去除 null或 undefined，
你可以使用类型断言手动去除。 
语法是添加 !后缀： identifier!
从 identifier的类型里去除了 null和 undefined

自定义类型保护

function isFish(pet: Fish | Bird): pet is Fish {
    return (<Fish>pet).swim !== undefined;
}

// 'swim' 和 'fly' 调用都没有问题了

if (isFish(pet)) {
    pet.swim();
}
else {
    pet.fly();
}

typeof类型保护

function padLeft(value: string, padding: string | number) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}

属性

只读属性 readonly
任意属性 any
可选属性 ?
强制解析 ！

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

条件类型

Exclude<T, U> -- 从T中剔除 U的类型。
Extract<T, U> -- T中提取 U的类型。
NonNullable<T> -- 从T中剔除null和undefined。
ReturnType<T> -- 获取函数返回值类型。
InstanceType<T> -- 获取构造函数类型的实例类型

非空断言运算符（后缀!）

function liveDangerously(x?: number | null) {
  // No error
  console.log(x!.toFixed());
}

高级类型

交叉类型

T & U
示例：

type IPerson {
  name: string;
  age: number;
}

type IMan {
  love: string;
  age: number;
}
type mixin = IPerson & IMan
//{
//  name: string;
//  age: number;
//  love: string;
//}

联合类型

T | U

interface IPerson {
  name: string;
  age: number;
}

interface IMan {
  love: string;
  age: number;
}

type me = IPerson | IMan;
//{
//  age: number;
// name: string;
//} ｜
// {
//   love: string;
//   age: number;
// }

Partial

构造一个所有属性都 Type 设置为可选类型,
此实用程序将返回表示给定类型的所有子集的类型
说人话就是:将所有类型变成可选

interface Todo {
  title: string;
  description: string;
}
//partial局部的,相当于从某个给定类型的子集类型
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};

const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

Required

构造一个由 Typeset to required 的所有属性组成的类型

interface Props {
  a?:number;
  b?:string;
}
const obj:Props = {a:5};
const obj2:Required<Props> = {a:5};
Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Readonly

只读 可用于 Object.freeze

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};

todo.title = "Hello";
Cannot assign to 'title' because it is a read-only property.

Pick<Type, Keys>

通过从类型中选取一组属性 Keys（字符串文字或字符串文字的并集）来构造一个类型 Type。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
//pick 挑选的意思
type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = {
  title: "a",
  completed: false,
};

Omit<Type, Keys>

omit 省略遗漏删除的意思
通过从中选取所有属性 Type 然后删除 Keys（字符串文字或字符串文字的并集）来构造类型

interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}

type TodoPreview = Omit<Todo, "description">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};

type TodoInfo = Omit<Todo, "completed" | "createdAt">;

const todoInfo: TodoInfo = {
  title: "Pick up kids",
  description: "Kindergarten closes at 5pm",
};

Record

//用于构建一个对象类型，将一种类型的属性映射到另一种类型

interface OneTy {
  name: string;
  age: number;
}

type KeyTy = "keyone" | "keytwo"
type RcTy = Record<KeyTy, OneTy>;

// 结果
ReTy => {
  keyone: {
   name: string;
   age: number;
  },
  keytwo: {
   name: string;
   age: number;
  },
}

Exclude<Type,ExcludedUnion>

通过从 Type 可分配给 的所有联合成员中排除来构造一个类型 ExcludedUnion。
exclude 排除排斥

type T0 = Exclude<"a" | "b" | "c", "a">;
type T0 = "b" | "c";

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
type T1 = "c";

type T2 = Exclude<string | number | (() => void), Function>;
type T2 = string | number;

Extract<Type,union>

通过从 Type 可分配给 的所有联合成员中提取来构造一个类型 Union。
extract 提取 取出

type T0 = Extract<"a" | "b" | "c", "a" | "f">;
type T0 = "a";

type T1 = Extract<string | number | (() => void), Function>;
type T1 = () => void;

ReturnType

此工具就是获取 T 类型(函数)对应的返回值类型：

type T3 = ReturnType<() => string>;
// type T3 = string
type T4 = ReturnType<(s: string) => void>;
// type T4 = void
type T5 = ReturnType<<T>() => T>;
// type T5 = {}

索引类型

 索引类型查询操作符 keyof T
 索引访问操作符 T[K]


//在普通上下文中使用T[K],必须保证
//K extends keyof T
function getProperty<T, K extends keyof T>
	(o: T, name: K): T[K] {
	  return o[name]; // o[name] is of type T[K]
	}

//字符串索引签名
type Map1<T> = {
  [key in string]:T
}

映射类型

in 关键字
内部使用了 for … in
用于映射对象的属性

type Keys = 'option1' | 'option2';
type Flags = { 把keys映射成对象的属性了[K in Keys]: boolean };

就相当于变成了这样了
type Flags = {
    option1: boolean;
    option2: boolean;
}

如果：keys是对象类型
type keys<T> = {
	options1:T;
	options2:T;
}
type Flags = { 
	把keys映射成对象的属性了
	in的作用还是映射(也就是循环遍历)
	keyof索引类型查询
	keyof keys 相当于变成 'option1' | 'option2';
	[K in keyof Keys]: T
};

type Nullable<T> = { [P in keyof T]: T[P] | null }
type Partial<T> = { [P in keyof T]?: T[P] }

infer类型推断

export type ArrayType<T extends any[]> = T extends Array<infer R> ? R: never

函数

// 类型也支持像函数一样传参数
//<T>可以理解为传参数
type F<T> = T|T[];
type Fnumber = F<number>;
let g:F<number> = 1;
let g1:Fnumber=1;


interface A<T> {
  name:T
}
let a:A<number>={name:1};


type Add<T> = (a:T,b:T)=>T;
const add:Add<number> = (a,b)=>a+b; 
add(1,2);

function add1(x:number,y:number){
  return x+y
}
let add2 = (x:number,y:number):number=>x+y;

type b = (a:number)=>string;
type c = {
  (a:number):string
}
interface a {
  (a:number):string;
}
let c:a = (a)=>a+'';

类

基类通常被称作 超类。
class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}
派生类通常被称作 子类，
class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

因为 Dog继承了 Animal的功能，因此我们可以创建一个 Dog的实例，
它能够 bark()和 move()。

类型兼容

interface Named {
  name: string;
}

let x: Named;
// y's inferred type is { name: string; location: string; }
let y = { name: 'Alice', location: 'Seattle' };

如果x要兼容y，那么y至少具有与x相同的属性
检查，y必须包含名字是name的string类型成员
x = y;


let x = (a: number) => 0;
let y = (b: number, s: string) => 0;
x的每个参数必须能在y里找到对应类型的参数
y = x; // OK
x = y; // Error

let x = () => ({ name: 'Alice' });
let y = () => ({ name: 'Alice', location: 'Seattle' });

x = y; // OK
y = x; // Error, because x() lacks a location property

extends

1.接口继承

  interface T1 {
    name: string
  }
  
  interface T2 {
    sex: number
  }
  
  // 多重继承，逗号隔开
  interface T3 extends T1,T2 {
    age: number
  }
  
  // 合法
  const t3: T3 = {
    name: 'xiaoming',
    sex: 1,
    age: 18
  }

2.条件判断

  // 示例1
  interface Animal {
    eat(): void
  }
  
  interface Dog extends Animal {
    bite(): void
  }
  
  // A的类型为string
  type A = Dog extends Animal ? string : number
  
  const a: A = 'this is string'

满足A2的接口一定可以满足A1，所以条件为真，

  // 示例1
  interface Animal {
    eat(): void
  }
  
  interface Dog extends Animal {
    bite(): void
  }
  
  let Dog:Dog = {
    bite(){}
    ,eat(){}
  }
  let Animal:Animal={
    eat(){}
  }
  
	Animal=Dog
	Dog = Animal; //error不可以

3.分配条件类型

  type P<T> = T extends 'x' ? string : number;
  type A3 = P<'x' | 'y'>  // A3的类型是 string | number

4.在高级类型中的应用

type Exclude<T, U> = T extends U ? never : T

type Extract<T, U> = T extends U ? T : never

extends的条件判断，除了定义条件类型，还能在泛型表达式中用来约束泛型参数

// 高级类型Pick的定义
type Pick<T, K extends keyof T> = {
    [P in K]: T[P]
}

interface A {
    name: string;
    age: number;
    sex: number;
}

type A1 = Pick<A, 'name'|'age'>
// 报错：类型“"key" | "noSuchKey"”不满足约束“keyof A”
type A2 = Pick<A, 'name'|'noSuchKey'>

react和DOM

ref

    interface RefObject<T> {
        readonly current: T | null;
    }
    
    type RefCallback<T> = { bivarianceHack(instance: T | null): void }
    ["bivarianceHack"];
    
    type Ref<T> = RefCallback<T> | RefObject<T> | null;

	MutableRefObject<HTMLVideoElement>

    type DetailedHTMLProps
    	<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;

useRef

const myRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
ref={ref => (formTitleRefs.current[item.key] = ref)}

const titleRefs = useRef<(HTMLDivElement | null)[]>([]);
ref={ref => (titleRefs.current[index] = ref)}

ref={dom => dom && (tabsRef.current[idx] = dom)}

事件

    type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];

    type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;

    type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
    type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
    type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
    type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
    type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
    type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
    type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
    type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
    type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
    type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
    type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
    type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
    type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
    type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;

reactElement

interface ReactElement<
  P = any,
  T extends string | JSXElementConstructor<any> =
    | string
    | JSXElementConstructor<any>
> {
  type: T
  props: P
  key: Key | null
}

ReactElement是一个接口，包含type,props,key三个属性值。
该类型的变量值只能是两种： null 和 ReactElement实例

reactNode

    type ReactText = string | number;
    type ReactChild = ReactElement | ReactText;

    interface ReactNodeArray extends Array<ReactNode> {}
    type ReactFragment = {} | ReactNodeArray;
    type ReactNode = ReactChild | ReactFragment | 
    	ReactPortal | boolean | null | undefined;

ReactNode是一种联合类型(Union Types)，可以是string、number、
ReactElement、{}、boolean、ReactNodeArray。由此可以看出ReactElement
类型的变量可以直接赋值给ReactNode类型的变量，但是反过来是不行的。

namespace JSX {
    // ...
    interface Element extends React.ReactElement<any, any> { }
    // ...
}

JSX.Element是ReactElement的子类型，并且没有增加属性，二者是兼容的。也就是说JSX.Element类型的变量可以赋值给ReactElement类型的变量，反过来赋值也成立。

JSX.Element ≈ ReactElement ⊂ ReactNode

TS-react

tsconfig.json

顶层配置项

1. compilerOptions：编译器相关的选项。比如配置编译成 ES5，模块化使用 commonjs 等。这里的编译配置很多，后面我们会讲解一些常用的配置；

2. files：指定需要被编译的文件列表。这里不能指定目录，只能是文件，可以省略 .ts 后缀。适合需要编译的文件比较少的情况。默认值为 false；

3. include：指定需要编译的文件列表或匹配模式。include 可以通过通配符指定目录，如 “src/**/*” 表示 src 下的所有文件。如果没有指定 files 配置，默认值为 ** ，即项目下所有文件；如果配置了 files，默认值为 [] 空数组；

4. exclude：在 include 圈定的范围内，排除掉一些文件。我们经常用它来排除编译输出目录、测试文件目录、一些生成文件的脚本等文件。默认值为 “node_modules,bower_componen”；

5. extends：继承另一个 ts 配置文件。这在 monorepo 的代码组织中非常有用，不同的 package 可以通过 extends 继承通用的 ts 配置。用法示例：“extends”: “./common-tsconfig.json”。

6. reference：引用。项目中如果有多个相互独立的模块，可以使用这个属性来做分离。这样一个模块改变后，就只重新编译这个模块，其他模块不重新编译。编译时要改用 tsc --build。这在非常大的项

compilerOptions配置项目

{
  "compilerOptions": {  
    /* 基本选项 */
    "incremental": true,                   /* 启用增量编译 */
    "target": "ESNEXT",                    /* 指定 ECMAScript 目标版本：'ES3'、'ES5'（默认）、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020' 或 'ESNEXT'。 */
    "module": "commonjs",                  /* 指定模块代码生成：“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”、“es2020”或“ESNext”。 */
    "lib": [],                             /* 指定要包含在编译中的库文件。 */
    "allowJs": true,                       /* 允许编译 javascript 文件。 */
    "checkJs": true,                       /* 报告 .js 文件中的错误。 */
    "jsx": "preserve",                     /* 指定 JSX 代码生成：'preserve'、'react-native' 或 'react'。 */
    "declaration": true,                   /* 生成相应的“.d.ts”文件。 */
    "declarationMap": true,                /* 为每个对应的“.d.ts”文件生成一个源映射。 */
    "sourceMap": true,                     /* 生成相应的“.map”文件。 */
    "outFile": "./",                       /* 连接输出到单个文件。 */
    "outDir": "./",                        /* 将输出结构重定向到目录。 */
    "rootDir": "./",                       /* 指定输入文件的根目录。用于通过 --outDir 控制输出目录结构。 */
    "composite": true,                     /* 启用项目编译 */
    "tsBuildInfoFile": "./",               /* 指定文件存放增量编译信息 */
    "removeComments": true,                /* 不要向输出发出注释（删除除代码注释）。 */
    "noEmit": true,                        /* 不发出输出（不生成编译后的文件）。 */
    "noEmitOnError": true,                 /* 在输出js代码时，如果有错将不编译文件。 */
    "importHelpers": true,                 /* 从 'tslib' 导入发射助手。 */
    "downlevelIteration": true,            /* 以“ES5”或“ES3”为目标时，为“for-of”、展开和解构中的迭代提供全面支持。 */
    "isolatedModules": true,               /* 将每个文件转换为一个单独的模块（类似于 'ts.transpileModule'）。 */


    /* 严格的类型检查选项 */
    "strict": true,                        /* 启用所有严格的类型检查选项。 在开发中，建议将stricet这类选项都开启。 */
    "strictNullChecks": true,              /* 启用严格的空（undefined、null）检查，可以防止“未定义不是对象”。 建议开启*/
    "strictFunctionTypes": true,           /* 启用函数类型的严格检查。 */
    "strictBindCallApply": true,           /* 在函数上启用严格的“绑定”、“调用”、应用”方法。 */
    "strictPropertyInitialization": true,  /* 启用对类中属性初始化的严格检查。 */
    "noImplicitThis": true,                /* 使用隐含的“any”类型在“this”表达式上引发错误。 */
    "noImplicitAny": true,                 /* 使用隐含的“any”类型在表达式和声明上引发错误（主要用于控制变量、参数是否必须知道它们的类型【类型检查】），如果是将JavaScript迁移到TypeScript时，可以关闭此项，但不建议这样做。 */
    "alwaysStrict": true,                  /* 以严格模式解析并为每个源文件发出“使用严格”。 */


    /* 额外检查 */
    "noUnusedLocals": true,                /* 报告未使用的本地人的错误。 */
    "noUnusedParameters": true,            /* 报告未使用参数的错误。 */
    "noImplicitReturns": true,             /* 不是函数中的所有代码路径都返回值时报告错误。 */
    "noFallthroughCasesInSwitch": true,    /* 在 switch 语句中报告失败情况的错误。 */


    /* 模块分辨率选项 */
    "moduleResolution": "node",            /* 指定模块解析策略：'node' (Node.js) 或 'classic' (TypeScript pre-1.6)。 */
    "baseUrl": "./",                       /* 解析非绝对模块名称的基目录。 */
    "paths": {},                           /* 一系列将导入重新映射到相对于“baseUrl”的查找位置的条目。 */
    "rootDirs": [],                        /* 根文件夹列表，其组合内容代表运行时项目的结构。 */
    "typeRoots": [],                       /* 包含类型定义的文件夹列表。 */
    "types": [],                           /* 类型声明文件要包含在编译中。 */
    "allowSyntheticDefaultImports": true,  /* 允许从没有默认导出的模块中默认导入。 这不会影响代码发出，只是类型检查。 */
    "esModuleInterop": true,               /* 通过为所有导入创建命名空间对象，在 CommonJS 和 ES 模块之间启用发射互操作性。 暗示“allowSyntheticDefaultImports”。 */
    "preserveSymlinks": true,              /* 不解析符号链接的真实路径。 */
    "allowUmdGlobalAccess": true,          /* 允许从模块访问 UMD 全局变量。 */


    /* 源映射选项 */
    "sourceRoot": "",                      /* 指定调试器应该定位 TypeScript 文件而不是源位置的位置。 */
    "mapRoot": "",                         /* 指定调试器应该定位映射文件而不是生成位置的位置。 */
    "inlineSourceMap": true,               /* 发出带有源映射的单个文件而不是单独的文件。 */
    "inlineSources": true,                 /* 在单个文件中与源映射一起发出源； 需要设置“--inlineSourceMap”或“--sourceMap”。 */


    /* 实验选项 */
    "experimentalDecorators": true,        /* 启用对 ES7 装饰器的实验性支持。 */
    "emitDecoratorMetadata": true,         /* 为装饰器的发射类型元数据启用实验性支持。 */


    /* 高级选项 */
    "skipLibCheck": true,                     /* 跳过声明文件的类型检查。 */
    "forceConsistentCasingInFileNames": true  /* 禁止对同一文件的大小写不一致的引用。 */
  }
}

"compilerOptions": {
  "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度
  "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置
  "diagnostics": true, // 打印诊断信息 
  "target": "ES5", // 目标语言的版本
  "module": "CommonJS", // 生成代码的模板标准
  "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD",
  "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
  "allowJS": true, // 允许编译器编译JS，JSX文件
  "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
  "outDir": "./dist", // 指定输出目录
  "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
  "declaration": true, // 生成声明文件，开启后会自动生成声明文件
  "declarationDir": "./file", // 指定生成声明文件存放目录
  "emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件
  "sourceMap": true, // 生成目标文件的sourceMap文件
  "inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中
  "declarationMap": true, // 为声明文件生成sourceMap
  "typeRoots": [], // 声明文件目录，默认时node_modules/@types
  "types": [], // 加载的声明文件包
  "removeComments":true, // 删除注释 
  "noEmit": true, // 不输出文件,即编译后不会生成任何js文件
  "noEmitOnError": true, // 发送错误时不输出任何文件
  "noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用
  "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块
  "downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
  "strict": true, // 开启所有严格的类型检查
  "jsx": "preserve", // 指定 jsx 格式
  "alwaysStrict": true, // 在代码中注入'use strict'
  "noImplicitAny": true, // 不允许隐式的any类型
  "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
  "strictFunctionTypes": true, // 不允许函数参数双向协变
  "strictPropertyInitialization": true, // 类的实例属性必须初始化
  "strictBindCallApply": true, // 严格的bind/call/apply检查
  "noImplicitThis": true, // 不允许this有隐式的any类型
  "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)
  "noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)
  "noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)
  "noImplicitReturns": true, //每个分支都会有返回值
  "esModuleInterop": true, // 允许export=导出，由import from 导入
  "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块
  "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
  "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
  "paths": { // 路径映射，相对于baseUrl
    // 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置
    "jquery": ["node_modules/jquery/dist/jquery.min.js"]
  },
  "rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错
  "listEmittedFiles": true, // 打印输出文件
  "listFiles": true// 打印编译的文件(包括引用的声明文件)
}

根选项
include：指定被编译文件所在的目录。
exclude：指定不需要被编译的目录。
extends：指定要继承的配置文件。
files：指定被编译的文件。
references：项目引用，是 TS 3.0 中的一项新功能，它允许将 TS 程序组织成更小的部分。
使用小技巧：在填写路径时 ** 表示任意目录， * 表示任意文件。


compilerOptions
​ 定义项目的运行时期望、JavaScript 的发出方式和位置以及与现有 JavaScript 代码的集成级别。

 项目选项

incremental：是否启用增量编译，指再次编译时只编译增加的内容，默认：false。
target：指定ts编译成ES的版本。
module：指定编译后代码使用的模块化规范。
lib：指定项目运行时使用的库。
outDir：指定编译后文件所在目录。
outFile：将代码编译合并成一个文件，默认将所有全局作用域中的代码合并成一个文件。
rootDir：指定输入文件的根目录，默认情况下当前的项目目录为根目录。
allowJs：是否对js文件进行编译，默认：false。
checkJs：是否检查js代码是否符合语法规范，当使用checkJs，必须使用allowJs，默认：false。
removeComments：是否移除注释，默认：false
noEmit：不生成编译后的文件，默认：false。
jsx：指定JSX代码生成用于的开发环境。
plugins：在编辑器中运行的语言服务插件列表。
declaration：是否生成相应的 .d.ts 声明文件，默认：false。
declarationMap：是否为每个对应的 .d.ts 文件生成一个 Map 文件，使用该功能时，需要declaration或composite配合一起使用，默认：false。
sourceMap：是否生成相应的Map映射的文件，默认：false。
composite：是否开启项目编译，开启该功能，将会生成被编译文件所在的目录，同时开启declaration、declarationMap和incremental，默认：false。
tsBuildInfoFile：指定增量编译信息文件的位置，使用该功能时，必须开启incremental选项。
importHelpers：是否将辅助函数从 tslib 模块导入，默认：false。
downlevelIteration：是否用于转换为旧版本的 JS 提供可迭代对象的全面支持，默认：false。
isolatedModules：是否将每个文件转换为单独的模块，默认：false。

 严格检查
strict：是否启动所有严格检查的总开关，默认：false，启动后将开启所有的严格检查选项。
alwaysStrict：是否以严格模式解析，并为每个源文件发出"use strict"，默认：false。
noImplicitAny：是否禁止隐式的any类型，默认：false。
noImplicitThis：是否禁止不明确类型的this，默认：false。
strictNullChecks：是否启用严格的空检查，默认：false。
strictBindCallApply：是否在函数上启用严格的’bind’， 'call’和’apply’方法，默认：false。
strictFunctionTypes：是否启用对函数类型的严格检查，默认：false。
strictPropertyInitialization：是否启用严格检查类的属性初始化，默认：false。

 模块解析选项
 
moduleResolution：指定模块解析策略，node或classic
baseUrl：用于解析非绝对模块名的基本目录，相对模块不受影响。
paths：用于设置模块名称基于baseUrl的路径映射关系。
rootDirs：将多个目录放在一个虚拟目录下，运行编译后文件引入的位置发生改变，也不会报错。
typeRoots：指定声明文件或文件夹的路径列表
types：用来指定需要包含的模块，并将其包含在全局范围内。
allowSyntheticDefaultImports：是否允许从没有默认导出的模块中默认导入，默认：false。
esModuleInterop：是否通过为所有导入模块创建命名空间对象，允许CommonJS和ES模块之间的互操作性，开启改选项时，也自动开启allowSyntheticDefaultImports选项，默认：false。
preserveSymlinks：是否不解析符号链接的真实路径，这是为了在 Node.js 中反映相同的标志，默认：false。
allowUmdGlobalAccess：允许您从模块文件内部访问作为全局变量的 UMD 导出，如果不使用该选项，从 UMD 模块导出需要一个导入声明，默认：false。
Map选项
sourceRoot：指定调试器应定位 TypeScript 文件而不是相对源位置的位置。
mapRoot：指定调试器定位Map文件的位置，而不是生成的位置。
inlineSourceMap：是否将Map文件内容嵌套到 JS 文件中，这会导致 JS 文件变大，但在某些情况下会很方便，默认：false。
inlineSources：是否将 .ts 文件的原始内容作为嵌入字符串包含在 .map 文件中，默认：false。
附加检查
noUnusedLocals：是否检查未使用的局部变量，默认：false。
noUnusedParameters：是否检查未使用的参数，默认：false。
noImplicitReturns：检查函数是否不含有隐式返回值，默认：false。
noImplicitOverride：是否检查子类继承自基类时，其重载的函数命名与基类的函数不同步问题，默认：false。
noFallthroughCasesInSwitch：检查switch中是否含有case没有使用break跳出，默认：false。
noUncheckedIndexedAccess：是否通过索引签名来描述对象上有未知键但已知值的对象，默认：false。
noPropertyAccessFromIndexSignature：是否通过" . “(obj.key) 语法访问字段和"索引”( obj["key"])， 以及在类型中声明属性的方式之间的一致性，默认：false。
实验选项
experimentalDecorators：是否启用对装饰器的实验性支持，装饰器是一种语言特性，还没有完全被 JavaScript 规范批准，默认：false。
emitDecoratorMetadata：为装饰器启用对发出类型元数据的实验性支持，默认：false。
高级选项
allowUnreachableCode：是否允许无法访问的代码(undefined / true / false)，默认：undefined。
undefined：向编辑提供建议作为警告。
true：未使用的标签被忽略。
false：引发有关未使用标签的编译器错误。
allowUnusedLabels：是否允许未使用的标签(undefined / true / false)，默认：undefined。
undefined：向编辑提供建议作为警告。
true：未使用的标签被忽略。
false：引发有关未使用标签的编译器错误。
assumeChangesOnlyAffectDirectDependencies是否避免重新检查/重建所有真正可能受影响的文件，而只会重新检查/重建已更改的文件以及直接导入它们的文件，默认：false。
charset：字符集(已弃用)，默认：utf8
declarationDir：提供一种方法来配置发出声明文件的根目录。
diagnostics：用于输出用于调试的诊断信息
disableReferencedProjectLoad：是否禁用所有可用项目加载到内存中，默认：false。
disableSizeLimit：为了避免在处理非常大的 JS 项目时可能出现的内存膨胀问题，TS 将分配的内存量有一个上限，默认：false。
disableSolutionSearching：在编辑器中搜索查找所有引用或跳转到定义等功能时，禁止包含复合项目，默认：false。
disableSourceOfProjectReferenceRedirect：是否禁用项目引用源重定向，默认：false。
emitBOM：控制TypeScript在写输出文件时是否发出字节顺序标记(BOM)，默认：false。
emitDeclarationOnly：是否只发出.d.ts 文件，不发出.js 文件，使用该选项时，需要配合 declaration 或 composite 一起使用，默认：false。
explainFiles：解释文件，此选项用于调试文件如何成为编译的一部分，默认：false。
extendedDiagnostics：是否查看 TS 在编译时花费的时间，默认：false。
forceConsistentCasingInFileNames：是否区分文件系统大小写规则，默认：false。
generateCpuProfile：在编译阶段让 TS 发出 CPU 配置文件，只能通过终端或 CLI 调用 --generateCpuProfile tsc-output.cpuprofile 。
importsNotUsedAsValues：此标志控制如何 import 工作方式，有 3 个不同的选项：remove、preserve 和 error 。
jsxFactory：当使用经典的JSX运行时编译JSX元素时，更改.js文件中调用的函数，默认：React.createElement 。
jsxFragmentFactory：指定 JSX 片段工厂函数在指定了 jsxFactory 编译器选项的情况下针对 react JSX 发出时使用。
jsxImportSource：当在TS 4.1中使用 jsx 作为 react-jsx 或 react-jsxdev 时，声明用于导入jsx和jsxs工厂函数的模块说明符。
keyofStringsOnly：当应用具有字符串索引签名的类型时，此标志将类型操作符的键值更改为返回 string 而不是string | number，已弃用，默认：false。
listEmittedFiles：是否将编译部分生成的文件的名称打印到终端，默认：false。
listFiles：是否打印编译文件部分的名称，默认：false。
maxNodeModuleJsDepth：在node_modules下搜索并加载JavaScript文件的最大依赖深度，默认：0 。
newLine：指定发出文件时要使用的换行规则，CRLF (dos) 或 LF (unix)。
noEmitHelpers：是否使用全局作用域助手函数提供实现，并完全关闭助手函数的发出，而不是使用 importhelper 来导入助手函数，默认：false。
noEmitOnError：有错误时不进行编译，默认：false。
noErrorTruncation：是否禁止截断错误消息，已弃用，默认：false。
noImplicitUseStrict：是否禁止无隐式严格模式，默认：false。
noLib：是否禁止自动包含任何库文件，默认：false。
noResolve：是否禁用析后的文件添加到程序中；默认情况下，TS 会检查 import 和 reference 指令的初始文件集，并将这些解析后的文件添加到你的程序中，默认：false。
noStrictGenericChecks：是否禁用严格的泛型检查，默认：false。
out：该选项以不可预测或一致的方式计算最终文件位置，已弃用，
preserveConstEnums：是否禁止删除枚举常量生成代码中的声明，默认：false。
reactNamespace：React命名空间，使用 jsxFactory 来代替。
resolveJsonModule：是否解析 JSON 模块，默认：false。
skipDefaultLibCheck：是否跳过默认库声明文件的类型检查，默认：false。
skipLibCheck：是否跳过声明文件的类型检查，这可以在编译期间以牺牲类型系统准确性为代价来节省时间，默认：false。
stripInternal：是否禁止 JSDoc 注释中带有@internal注释的代码发出声明，默认：false。
suppressExcessPropertyErrors：是否禁用报告过多的属性错误，默认：false。
suppressImplicitAnyIndexErrors：是否抑制隐式any索引的错误，默认：false。
traceResolution：当尝试调试未包含模块的原因时。启用该选项让 TypeScript 打印有关每个处理文件的解析过程的信息，默认：false。
useDefineForClassFields：此标志用作迁移到即将推出的类字段标准版本的一部分，默认：false。
命令行
preserveWatchOutput：是否在监视模式下保留过时的控制台输出，而不是每次发生更改时都清除屏幕，默认：false。
pretty：是否使用颜色对上下文错误和消息进行样式化，默认：true。
watchOptions
配置 TypeScript 的 --watch工作方式。

监视选项

watchFile：监视单个文件的策略，默认：useFsEvents
fixedPollingInterval：以固定时间间隔每秒多次检查每个文件的更改。
priorityPollingInterval：每秒多次检查每个文件的更改，但使用启发式方法检查某些类型的文件的频率低于其他文件。
dynamicPriorityPolling：使用动态队列，其中不经常修改的文件将不那么频繁地检查。
useFsEvents：尝试使用操作系统/文件系统的本机事件进行文件更改。
useFsEventsOnParentDirectory：尝试使用操作系统/文件系统的本机事件来监听文件父目录的变化。
watchDirectory：在缺乏递归文件监视功能的系统下如何监视整个目录树的策略，默认：useFsEvents
fixedPollingInterval：以固定时间间隔每秒多次检查每个目录的变化。
dynamicPriorityPolling：使用动态队列，其中不经常修改的目录将不那么频繁地检查。
useFsEvents：尝试使用操作系统/文件系统的本机事件进行目录更改。
fallbackPolling：使用文件系统事件时，此选项指定当系统用完本机文件观察器和/或不支持本机文件观察器时使用的轮询策略，默认：dynamicPriorityPolling
fixedPollingInterval：以固定时间间隔每秒多次检查每个文件的更改。
priorityPollingInterval：每秒多次检查每个文件的更改，但使用启发式方法检查某些类型的文件的频率低于其他文件。
dynamicPriorityPolling：使用动态队列，其中不经常修改的文件将不那么频繁地检查。
synchronousWatchDirectory：禁用对目录的延迟监视。
synchronousWatchDirectory：在本机不支持递归观看的平台上同步调用回调，并更新目录观察者的状态，默认：false。
excludeDirectories：使用排除目录来大幅减少 --watch 期间被监视的文件数量.
excludeFiles：使用excludeFiles从被监视的文件中删除一组特定的文件。



typeAcquisition
类型获取仅对 JavaScript 项目很重要。

1. 类型获取

enable：提供在 JavaScript 项目中禁用类型获取的配置，默认：false。
include：使用 include 来指定应从绝对类型中使用哪些类型。
exclude：提供用于禁用 JavaScript 项目中某个模块的类型获取的配置
disableFilenameBasedTypeAcquisition：是否禁用基于文件名的类型获取，TypeScript 的类型获取可以根据项目中的文件名推断应该添加哪些类型，默认：false。

参考文档

https://www.typescriptlang.org/docs/handbook/compiler-options.html

原易峰的文章

写的很详细
https://wangdoc.com/typescript/tsconfig.json#allowjs