typescript 入门

ts 是js 的超集

安装

npm install typescript -g

运行

tsc index.ts

node.js 环境执行ts

npm i @types/node --save-dev （node环境支持的依赖必装）
npm i ts-node --g

类型

基础类型：Boolean、Number、String、null、undefined、Symbol、BigInt

字符串类型

let a:stirng = "123"

let str:string = `${a}456`

数字类型

let notNumer: number = NaN
let num: number = 123
let infinityNum:number = Infinity
let hex: number = 0Xf003 // 十六进制
let binary: number = 0b10101 // 二进制
let octal:number = 0o765 // 八进制

布尔类型

let bool1: boolean = true
let bool2: boolean = false

注意使用 new Boolean 返回的是Boolean 对象

let boolObj:boolean = new Boolean()
// 报错：不能将类型“Boolean”分配给类型“boolean”。
//  “boolean”是基元，但“Boolean”是包装器对象
// 改成Boolean 就没问题了
let boolObj:Boolean = new Boolean()

空值类型

let u: void = undefined
let n: void = null
// 在 TypeScript 中，可以用 void 表示没有任何返回值的函数
function Fn(): void{
    console.log("test-void")
}

Null 和 Undefined 类型

let u1: undefined = undefined
let n1:null = null

void、null、undefined 区别

与 void 的区别，undefined 和 null 是所有类型的子类型。也就是说undefined 类型的变量，可以给string类型的变量赋值

let test: void = undefined
let str1: string = "123"
str1 = test // 报错：不能将类型“void”分配给类型“string”

let test1: undefined = undefined
let str2: string = "123"
str2 = test1

let test2: null = null
let str3: string = "123"
str3 = test2

注意：
如果在tsconfig.json 开启了严格模式

{
  "compilerOptions": {
    "strict": true
  }
}

let test3: null = null
let str4: void = undefined
str4 = test3 // 报错：不能将类型“null”分配给类型“void”

any类型

let a: any = "12313"
a = 1231
a = false

let b; // 默认any类型
b = 123
b = "hello"

unknow 类型

TypeScript 3.0中引入的 unknown 类型也被认为是 top type ，但它更安全。与 any 一样，所有类型都可以分配给unknown

let val: unknown;

val = "hello"
val = 123
val = true
val = [1, 2, 3]
val = { a: 1, b: 2 }
val = null
val = undefined
val = Symbol("id")

any 和 unknown 区别

// 如果是any类型在对象没有这个属性的时候获取是不会报错的
let obj: any = { a: 1 }
obj.b

// 如果是unknow 是不能调用属性和方法
let obj: unknown = { a: 1, c:():number => 33}
obj.a
obj.c()

对象的类型

在typescript中，我们定义对象的方式要用关键字interface（接口）。

interface Person{
    name: string,
    age:number
}

let person: Person = {
    name:"张三"
} // 类型 "{ name: string; }" 中缺少属性 "age"，但类型 "Person" 中需要该属性。

// 加上age 属性就没问题了
let person: Person = {
    name: "张三",
    age:18  
}

//重名interface  可以合并
interface A{
    name:string
}

interface A{
    age:number
}

let a: A = {
    name: "zhangsan",
    age:18
}
// 继承
interface B extends A{
    sex: string
}

let b: B = {
    name: "lisi",
    age: 22,
    sex:"男"
}

可选属性

可选属性的含义是该属性可以不存在

interface Person{
    name: string,
    age?:number
}

let person: Person = {
    name: "张三"
}

任意属性[propName:string]

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

interface Person{
    name: string,
    age?: number,
    [propName:string]:any
}

let person: Person = {
    name: "张三",
    sex:"男"
}

只读属性 readonly

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

let person: Person = {
    name: "张三",
    age:18,
    sex:"男"
}

person.age = 20 // 无法分配到 "age" ，因为它是只读属性

添加函数

interface Person{
    name: string,
    readonly age?: number,
    [propName: string]: any,
    fn():void
}

let person: Person = {
    name: "张三",
    age:18,
    sex: "男",
    fn(){
        console.log(this.name)
    }
}

数组类型

1.类型 []

let arr: number[] = [1, 2, 3]
let arr1: number[] = [1, 2, '3'] // 报错：不能将类型“string”分配给类型“number”。

// 操作方法也不行
arr.push("3") // 报错：类型“string”的参数不能赋给类型“number”的参数。

let arr2: string[] = ['1', '2', '3']
let arr3:any = [1,2,'3',{a:1},true,[1,2]]

2.泛型

let arr: Array<number> = [1, 2, 3]
let arr1: Array<string> = ['1', '2', '3']
let arr2:Array<any> =  [1,2,'3',{a:1},true,[1,2]]

3.接口

interface numberArr{
    [index:number]:number
}

let arr: numberArr = [1, 2, 3]
// 多维数组
let arrNum: numberArr[] = [[1,2,3], [2,3,4], [3,4,5]]
let arrNum2: numberArr[][] = [[[1,2,3]], [[2,3,4]], [[3,4,5]]]


interface Person{
    name: string,
    age:number
}

let list: Person[] = [{
    name: "张三",
    age:18
}, {
    name: "李四",
    age:20
}]

4.arguments类数组

function arrFn(...args: any): void{
    console.log(arguments)
    let arr:IArguments = arguments
    console.log("arr",arr,arr.length,arr.callee)
}


arrFn(1, 2, 3, 4, 5)


//其中 IArguments 是 TypeScript 中定义好了的类型，它实际上就是：
interface IArguments1{
    [index: number]: number;
    length: number;
    callee: Function;
}

函数类型

const fn = (name: string): string => {
    return name
}

fn("123")

// 可选类型
const fn = (firstName: string,lastName?:string): string => {
    return firstName + lastName
}

fn("firstname")

// 默认参数
const fn = (firstName: string = "firstname",lastName?:string): string =>{
    return firstName + lastName
}
fn() // firstnameundefined

// 接口定义函数
interface Add{
    (num:number,num2:number):number
}

const fn: Add = (num: number, num2: number): number => {
    return num + num2
}

fn(1,2)

interface User{
    name: string,
    age:number
}

function getUser(user: User):User{
    return user
}

// 定义剩余参数
const fn1 = (array: number[], ...items: any[]): any[] => {
    console.log(array,items)
    return items
}

fn1([1,2,3],'4','5','6')

函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

如果参数类型不同，则参数类型应设置为 any。

参数数量不同你可以将不同的参数设置为可选。

function fn(params: number): void
function fn(params: string, params2: number): void
function fn(params: any, params2?: any): void{
    console.log(params)
    console.log(params2)
}

fn(123)
fn('123',345)

联合类型

let phone: string | number = "010-888"
phone = 13521330001

// 函数联合类型
const fn = (num: number | boolean): boolean => {
    return !!num
}

交叉类型

多种类型的集合，联合对象将具有联合类型的所有成员

interface Person{
    name: string,
    age:number
}

interface Man{
    sex:string
}

const person = (person: Man & Person) => {
    console.log(person)
}

person({
    name: "张三",
    age: 18,
    sex:"男"
})

类型断言

语法：
1.值 as 类型 （value as string）
2.<类型>值 （<string>value）

interface A{
    name:string
}

interface B{
    name1: string
}
// 值 as 类型 
const fn = (type: A | B): string => {
    return (type as A).name
}
// <类型>值 
const fn = (type: A | B): string => {
    return (<A>type).name
}

注意：类型断言只能够欺骗TypeScript 编译器，无法避免运行时错误。

使用any 临时断言

window.abc = 123 // 报错：window 上没有 abc 属性

// 使用 any 临时断言，访问任何属性都是允许的
(window as any).abc = 123

as content

const name1 = "张三"

name1 = "李四"  // 无法修改

let name2 = "张三" as const

name2 = "李四"  // 无法修改


let a1 = [1, 2, 3] as const

a1.push(4) // 报错：此时已经断言字面量为[1,2,3],数据无法做任何修改

const a2 = [1, 2, 3]
a2.push(4)  // 通过，没有修改指针

注意：类型断言是不具影响力的，不会影响结果，编译过程中会删除类型断言

const fn = (params: any): boolean => {
    return params as boolean
}

fn(1) // 1

元组类型

元组（Tuple）是固定数量的不同类型的元素的组合。
元组与集合的不同之处在于，元组中的元素类型可以是不同的，而且数量固定。

let arr: [number, string] = [1, "123"]

// 越界元素
arr.push(true) // 类型“boolean”的参数不能赋给类型“string | number”的参数

应用场景

定义excel 数据

let excel: [string, string, number, string][] = [
  ["title1", "name1", 1, "60"],
  ["title2", "name2", 2, "61"],
  ["title3", "name3", 3, "62"],
  ["title4", "name4", 4, "63"],
  ["title5", "name5", 5, "64"],
]

枚举类型

在javascript 没有枚举的概念，ts 帮我们定义了枚举
使用关键字 enum 定义枚举

1.数字枚举

红绿蓝 Red = 0 Green = 1 Blue= 2

enum Types {
  Red,
  Green,
  Blue
}
// 等同于
enum Types {
  Red =0,
  Green=1,
  Blue=2
}

// 增长枚举
enum Types {
  Red =3,
  Green, // 4
  Blue // 5
}
Types.Green // 4
Types.Blue // 5

2.字符串枚举

enum Types {
  Red = "red",
  Green = "green",
  Blue = "blue",
}

3.异构枚举

枚举可以混合字符串和数字的枚举

enum Types {
  No = "no",
  Yes = 1,
}

4.接口枚举

enum Types {
  Red,
  Green,
}

interface A {
  red: Types.Red
}

let a: A = {
  red: Types.Red,
}

5.常量枚举

常量枚举通过在枚举上使用 const 修饰符来定义，常量枚举不同于常规的枚举，他们会在编译阶段被删除。

const enum size {
  Width = 10,
  Height = 20,
}

6.反向映射

它包含了正向映射（ name -> value）和反向映射（ value -> name）
注意：不会为字符串的枚举生成反向映射

enum Types {
  Red,
  Green,
  Blue,
}

Types[Types.Red]  // Red

never 类型

TypeScript 将使用never 类型来表示不应该存在的状态

// 返回never的函数必须存在无法达到的终点
// 抛出异常，error 将不会有返回值
function error(message: string): never{
    throw new Error(message)
}
 
// 存在死循环，loop 将不会有返回值
function loop(): never{
    while (true) {
        
    }
}

never 和 void 区别

void 类型只是没有返回值，但不会出错，never 类型抛出异常没有返回值

注意：任何类型都不能赋值给 never 类型的变量

symbol 类型

symbol类型的值是通过Symbol构造函数创建的。

let sym1 = Symbol()
let sym2 = Symbol("id")

// Symbol 的值是唯一的
const s1 = Symbol()
const s2 = Symbol()
s1 === s2 // false

// 用作对象的键 tsc index.ts 在网页面上访问
let sym = Symbol()
let obj = {
  [sym]: "value",
}
obj[sym] // value

// 使用symbol定义的属性，是不能通过如下方式遍历拿到的

let sym = Symbol("key")
let obj = {
  [sym]: "value",
  name: "张三",
  age: 18,
}
// 1.for in 遍历
for (let key in obj) {
  console.log(key) // 遍历不到sym
}
// 2.Object.keys 遍历
let keys = Object.keys(obj)
console.log(keys)  // 遍历不到sym
// 3.getOwnPropertyNames
console.log(Object.getOwnPropertyNames(obj))
// 4.JSON.stringify
console.log(JSON.stringify(obj))

// 获取symbol 属性
// 1.getOwnPropertySymbols 只能拿到symbol 属性
let objSym = Object.getOwnPropertySymbols(obj)
console.log( objSym)  // [Symbol(key)]

let ownKeys = Reflect.ownKeys(obj)
console.log( ownKeys)  // ['name', 'age', Symbol(key)]

Symbol.iterator 迭代器 和 生成器 for of

支持遍历大部分类型迭代器 arr nodeList argumetns set map 等

let arr = [1, 2, 3, 4]
let iterator = arr[Symbol.iterator]()

console.log(iterator.next()) // { value: 1, done: false }
console.log(iterator.next()) // { value: 2, done: false }
console.log(iterator.next()) // { value: 3, done: false }
console.log(iterator.next()) // { value: 4, done: false }
console.log(iterator.next()) // { value: undefined, done: true }

测试用例

interface Item {
  name: string
  age: number
}

const arr: Item[] = [
  {
    name: "张三",
    age: 18,
  },
  {
    name: "李四",
    age: 20,
  },
  {
    name: "王五",
    age: 25,
  },
]

const gen = (oct: any): void => {
  let it: Iterator<any> = oct[Symbol.iterator]()
  let next: any = {
    done: false,
  }
  while (!next.done) {
    next = it.next()
    if (!next.done) {
      console.log(next.value)
    }
  }
}
gen(arr)

类型推论

TypeScript 会在没有明确的指定类型的时候推测出一个类型

let str = "123" // 推测出的类型 let str: string
str = 123 // 报错：不能将类型“number”分配给类型“string”

let str; //  推测出的类型 let str: any
str = 123
str = "123"
str = true

类型别名

使用关键字 type 定义别名

type str = string
let s: str = "123"

// 定义函数别名
type fn = () => string
let a: fn = () => "aaa"

// 定义联合类型别名
type num = string | number
let n: num = 123

// 定义值的别名
type value = boolean | 0 | '123'
let v:value = 0

内置对象

ECMAScript 内置对象

Boolean、Number、String、RegExp、Date、Error

let b: Boolean = new Boolean(true)
let n: Number = new Number(1)
let s: String = new String("123")
let d: Date = new Date()
let r: RegExp = new RegExp("^abc$")
let e:Error = new Error("error")

DOM 和 BOM 内置对象

Document、HTMLElement、Event、NodeList 等

let body: HTMLElement = document.body
let allDiv: NodeList = document.querySelectorAll('div')

// 读取div 这种需要类型断言，因为读不到返回null
let div: HTMLElement = document.querySelector('div') as HTMLDivElement

document.addEventListener("click", function (e:MouseEvent){
    console.log(e)
})

//dom元素的映射表
interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
    "article": HTMLElement;
    "aside": HTMLElement;
    "audio": HTMLAudioElement;
    "b": HTMLElement;
    "base": HTMLBaseElement;
    "bdi": HTMLElement;
    "bdo": HTMLElement;
    "blockquote": HTMLQuoteElement;
    "body": HTMLBodyElement;
    "br": HTMLBRElement;
    "button": HTMLButtonElement;
    "canvas": HTMLCanvasElement;
    "caption": HTMLTableCaptionElement;
    "cite": HTMLElement;
    "code": HTMLElement;
    "col": HTMLTableColElement;
    "colgroup": HTMLTableColElement;
    "data": HTMLDataElement;
    "datalist": HTMLDataListElement;
    "dd": HTMLElement;
    "del": HTMLModElement;
    "details": HTMLDetailsElement;
    "dfn": HTMLElement;
    "dialog": HTMLDialogElement;
    "dir": HTMLDirectoryElement;
    "div": HTMLDivElement;
    "dl": HTMLDListElement;
    "dt": HTMLElement;
    "em": HTMLElement;
    "embed": HTMLEmbedElement;
    "fieldset": HTMLFieldSetElement;
    "figcaption": HTMLElement;
    "figure": HTMLElement;
    "font": HTMLFontElement;
    "footer": HTMLElement;
    "form": HTMLFormElement;
    "frame": HTMLFrameElement;
    "frameset": HTMLFrameSetElement;
    "h1": HTMLHeadingElement;
    "h2": HTMLHeadingElement;
    "h3": HTMLHeadingElement;
    "h4": HTMLHeadingElement;
    "h5": HTMLHeadingElement;
    "h6": HTMLHeadingElement;
    "head": HTMLHeadElement;
    "header": HTMLElement;
    "hgroup": HTMLElement;
    "hr": HTMLHRElement;
    "html": HTMLHtmlElement;
    "i": HTMLElement;
    "iframe": HTMLIFrameElement;
    "img": HTMLImageElement;
    "input": HTMLInputElement;
    "ins": HTMLModElement;
    "kbd": HTMLElement;
    "label": HTMLLabelElement;
    "legend": HTMLLegendElement;
    "li": HTMLLIElement;
    "link": HTMLLinkElement;
    "main": HTMLElement;
    "map": HTMLMapElement;
    "mark": HTMLElement;
    "marquee": HTMLMarqueeElement;
    "menu": HTMLMenuElement;
    "meta": HTMLMetaElement;
    "meter": HTMLMeterElement;
    "nav": HTMLElement;
    "noscript": HTMLElement;
    "object": HTMLObjectElement;
    "ol": HTMLOListElement;
    "optgroup": HTMLOptGroupElement;
    "option": HTMLOptionElement;
    "output": HTMLOutputElement;
    "p": HTMLParagraphElement;
    "param": HTMLParamElement;
    "picture": HTMLPictureElement;
    "pre": HTMLPreElement;
    "progress": HTMLProgressElement;
    "q": HTMLQuoteElement;
    "rp": HTMLElement;
    "rt": HTMLElement;
    "ruby": HTMLElement;
    "s": HTMLElement;
    "samp": HTMLElement;
    "script": HTMLScriptElement;
    "section": HTMLElement;
    "select": HTMLSelectElement;
    "slot": HTMLSlotElement;
    "small": HTMLElement;
    "source": HTMLSourceElement;
    "span": HTMLSpanElement;
    "strong": HTMLElement;
    "style": HTMLStyleElement;
    "sub": HTMLElement;
    "summary": HTMLElement;
    "sup": HTMLElement;
    "table": HTMLTableElement;
    "tbody": HTMLTableSectionElement;
    "td": HTMLTableDataCellElement;
    "template": HTMLTemplateElement;
    "textarea": HTMLTextAreaElement;
    "tfoot": HTMLTableSectionElement;
    "th": HTMLTableHeaderCellElement;
    "thead": HTMLTableSectionElement;
    "time": HTMLTimeElement;
    "title": HTMLTitleElement;
    "tr": HTMLTableRowElement;
    "track": HTMLTrackElement;
    "u": HTMLElement;
    "ul": HTMLUListElement;
    "var": HTMLElement;
    "video": HTMLVideoElement;
    "wbr": HTMLElement;
}

定义Promise

如果不指定返回的类型，ts推断不出来返回什么类型

// 指定返回类型
function promise():Promise<number> {
    return new Promise((resolve, reject) => {
        resolve(1)
    })
}

promise().then(res => {
    console.log(res)
})

class 类

ts 上定义类

class Person{
    name: string
    age:number
    constructor(name:string,age:number) {
        this.name = name
        this.age = age
    }
    getName() {
        return this.name
    }
}

// 定义了变量不用也会报错，定义个默认值就不会报错了
class Person{
    name: string
    age:number = 18
    constructor(name:string,age:number) {
        this.name = name
    }
    getName() {
        return this.name
    }
}

类的修饰符

总共有三个 public private protected

使用public 修饰符定义的变量可以内部访问、外部访问， 如果不写默认就是public
使用 private 修饰符定义的变量只能在内部访问，不能在外部访问
使用 protected 修饰符定义的变量只能在内部和继承的子类中访问，不能在外部访问

class Person{
    public name: string
    private age: number
    protected pro:any
    constructor(name:string,age:number,pro:any) {
        this.name = name
        this.age = age
        this.pro = pro
    }
    getName() {
        return this.name
    }
}

let p = new Person("张三", 18, "123")

p.name
p.age // 报错：属性“age”为私有属性，只能在类“Person”中访问
p.pro // 报错：属性“pro”受保护，只能在类“Person”及其子类中访问。

class Man extends Person{
    constructor(name:string,age:number,pro:any) {
        super(name, age, pro)
        console.log(this.pro)
    }
    getPro() {
        return this.pro
    }
}

let m = new Man("张三", 18, "123")
console.log(m.getPro())

static 静态属性 和 静态方法

static 定义的属性，不能通过this 访问，只能通过类名去调用

class Person{
    public name: string
    private age: number
    protected pro: any
    static str:string = "123"
    constructor(name:string,age:number,pro:any) {
        this.name = name
        this.age = age
        this.pro = pro
        this.str // 报错：属性“str”在类型“Person”上不存在
    }
    getName() {
        return this.name
    }
}

Person.str // 123

static 静态函数，也不能通过this 访问，只能通过类名调用

class Person{
    public name: string
    private age: number
    protected pro: any
    static str:string = "123"
    constructor(name:string,age:number,pro:any) {
        this.name = name
        this.age = age
        this.pro = pro
        // this.str // 属性“str”在类型“Person”上不存在
        // this.getName() // 报错：属性“getName”在类型“Person”上不存在
    }
    static getName() {
        return this.name
    }
}

Person.getName() // Person

注意：如果两个函数都是 static 静态的，可以通过this 调用

class Person{
    public name: string
    private age: number
    protected pro: any
    static str:string = "123"
    constructor(name:string,age:number,pro:any) {
        this.name = name
        this.age = age
        this.pro = pro
        // this.str // 属性“str”在类型“Person”上不存在
        // this.getName() // 报错：属性“getName”在类型“Person”上不存在
    }
    static getName() {
        return "person name"
    }
    static run() {
        return this.getName()
    }
}

Person.run() // person name

interface 定义类

interface 定义类使用关键字 implements 后面跟interface 定义的名字，多个用逗号隔开，继承还是用extends

interface A{
    name: string
    get(type:string):string
}

interface B{
    age: number,
    set():void
}

class Aclass{
    name: string
    constructor() {
        this.name = "nameA"
    }
}

class Bclass extends Aclass implements A, B{
    age: number
    constructor() {
        super()
        this.age = 18
    }
    get(type: string): string {
        return this.name + type
    }
    set(){}
}

抽象类

抽象类无法被实例化

abstract class A{
    name: string
    constructor(name: string) {
        this.name = name
    }
}

new A() // 报错：无法创建抽象类的实例

A类定义了抽象方法，B类继承了A类，就必须实现抽象方法，不实现就报错

abstract class A{
    name: string
    constructor(name: string) {
        this.name = name
    }
    abstract getName():string
}

class B extends A{
    constructor() {
        super('张三')
    }
    getName(): string{
        return this.name
    }
}

let b = new B()

console.log(b.getName())

泛型

函数泛型

function num(a: number, b: number): Array<number> {
  return [a, b]
}
num(1,2)
function str(a: string, b: string): Array<string> {
  return [a, b]
}
str('1','2')

// 优化
function add<T>(a: T, b: T): Array<T> {
  return [a, b]
}
add<number>(1, 2)
add<string>("1", "2")

// 使用不同的泛型参数名，只要数量和使用方式对应就行
function sub<T, U>(a: T, b: U): Array<T | U> {
  return [a, b]
}

sub<boolean, string>(false, "1213")

定义泛型接口

声明接口的时，在名字后加一个<T>,使用时传递类型

interface MyInter<T> {
    (arg:T):T
}

function fn<T>(arg: T): T{
    return arg
}

let result: MyInter<number> = fn
result(1)

对象字面量泛型

let foo: { <T>(arg: T): T}

foo = function <T>(arg: T): T {
  return arg
}

foo(123)

泛型约束

interface Len {
  length: number
}

function getLen<T extends Len>(arg: T): number {
  return arg.length
}

getLen<string>("123")

使用keyof 约束对象

function getVal<T, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

let o = { a: 1, b: 2, c: 3 }

getVal(o, "a")
getVal(o,'d') // 报错：类型“"d"”的参数不能赋给类型“"a" | "b" | "c"”的参数

泛型类

声明类名称后加<T>,使用时确定类型，new Person<string>()

class Person<T> {
  names: T[] = []
  add(name: T): T[] {
    this.names.push(name)
    return this.names
  }
}

let s = new Person<string>()
s.add("1") // ['1']

let n = new Person<number>()
n.names = [1, 2, 3]
n.add(4) // [1,2,3,4]

tsconfig.json

通过 tsc --int 生成 tsconfig.json 文件

配置详解

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, // 开启所有严格的类型检查
  "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// 打印编译的文件(包括引用的声明文件)
}
 
// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
"include": [
   "src/**/*"
],
// 指定一个排除列表（include的反向操作）
 "exclude": [
   "demo.ts"
],
// 指定哪些文件使用该配置（属于手动一个个指定文件）
 "files": [
   "demo.ts"
]

介绍几个常用的

1.include
指定编译文件，默认是编译当前目录下所有的ts文件

2.exclude
指定排除的文件

3.target
指定编译js 的版本例如es5 es6

4.allowJS
是否允许编译js文件

5.removeComments
是否在编译过程中删除文件中的注释

6.rootDir
编译文件的目录

7.outDir
输出的目录

8.sourceMap
代码源文件

9.strict
严格模式

10.module
默认common.js 可选es6模式 amd umd 等