框架和类库_Ts1.Typescript

直接浏览coderwhy的代码文件和PPT

1.介绍Typescript

2.理解泛型、接口等面向对象的相关概念，TypeScript对面向对象理念的实现

3.理解使用TypeScript的好处，掌握TypeScript基础语法

4.TypeScript是如何编译的？

5.TypeScript的规则检测原理

6.可以在React、Vue等框架中使用TypeScript进行开发

7.namespace/ module

 

type别名和interface接口的区别

1.type类型使用范围更广，接口类型只能用来声明对象

2.在声明对象时，interface可以多次声明，type不允许两个相同名称的别名同时存在

3.interface可以多次声明同一个接口名称

4.interface支持继承

5.interface可以被类实现

6.总结: 如果是非对象类型的定义使用type, 如果是对象类型的声明那么使用interface

 

ts中函数参数的注意点

有默认值的参数, 是可以接收一个undefined的值

function foo(x: number, y = 100) {
  console.log(y + 10)
}

foo(10)
foo(10, undefined)
foo(10, 55)

 

配置语句

tsc --init

生成配置文件 才会对this进行审查

 

 

ts的内置工具使用

function foo(this: { name: string }, info: {name: string}) {
  console.log(this, info)
}

type FooType = typeof foo

// 1.ThisParameterType: 获取FooType类型中this的类型
type FooThisType = ThisParameterType<FooType>


// 2.OmitOmitThisParameter: 删除this参数类型, 剩余的函数类型
type PureFooType = OmitThisParameter<FooType>


// 3.ThisType: 用于绑定一个上下文的this
interface IState {
  name: string
  age: number
}

interface IStore {
  state: IState
  eating: () => void
  running: () => void
}

const store: IStore & ThisType<IState> = {
  state: {
    name: "why",
    age: 18
  },
  eating: function() {
    console.log(this.name)
  },
  running: function() {
    console.log(this.name)
  }
}

store.eating.call(store.state)
export {}

pinia内部的getters和action里面的this为什么能取到实际上就是ThisType的作用。