TypeScript由浅到深(上篇)

目录

一、什么是TypeScript有什么特点：

二、TypeScript的编译环境：

三、TypeScript数据类型：

01_标识符的类型推导：

02_JS中的类型Array：

03_JS 中的类型Object：

04_函数的类型：

05_匿名函数的类型：

06_TS中的类型:

四、TypeScript语法细讲 :

TS中联合类型的使用:

TS中的类型别名 :

TS中的接口声明使用:

TS中交叉类型的使用:

TS中的类型断言as:

TS中非空类型断言:

TS中的字面量类型的使用:

TS中类型缩小的使用:

五、TypeScript函数类型

函数类型:

调用签名（Call Signatures）:

构造签名 ：

函数的参数-可选参数:

函数的参数-默认参数：

函数的参数-剩余参数 :

函数的重载:

联合类型与重载:

可推导的this类型:

this相关的内置工具:

六、TypeScript面向对象:

TS中类的基本使用:

只读属性readonly:

getters/setters ：

抽象类abstract:

类型检测-鸭子类型:

索引签名:

接口的继承和实现:

抽象类和接口的区别（了解):

严格的字面量赋值检测:

TypeScript枚举类型:

---

一、什么是TypeScript有什么特点：

可以看一下TypeScript在GitHub和官方上对自己的定义：

        GitHub说法：TypeScript is a superset of JavaScript that compiles to clean JavaScript output. 

        TypeScript官网：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

        我们可以将TypeScript理解成加强版的JavaScript。 JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是 支持的； TypeScript在实现新特性的同时，总是保持和ES标准的同步甚至是领先；并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（Enum）、元组类型（Tuple）等； 并且TypeScript最终会被编译成JavaScript代码，所以你并不需要担心它的兼容性问题，在编译时也可以不借助于Babel这样的工具；

二、TypeScript的编译环境：

全局安装TypeScript：npm install typescript -g(默认安装的就是最新版本)

查看我们安装的版本：tsc --version

运行TypeScript：

ts代码需要tsc编译TypeScript到JavaScript代码，然后在浏览器或者Node环境下运行JavaScript代码，每次运行显的优点麻烦，我们可以采取以下两种方式。

方式一：通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，可以直接运行在浏览器上；

使用方法：https://mp.weixin.qq.com/s/wnL1l-ERjTDykWM76l4Ajw；

方式二：通过ts-node库，为TypeScript的运行提供执行环境；

三、TypeScript数据类型：

01_标识符的类型推导：

// 我们在声明一个标识符时, 如果有直接进行赋值, 会根据赋值的类型推导出标识符的类型注解，这个过程称之为类型推导
// let进行类型推导, 推导出来的通用类型
// const进行类型推导, 推导出来的字面量类型(后续专门讲解)

//name默认推导为string类型
let name = "why"

//age和height默认推导为number类型
let age = 18
const height = 1.88

// name = 123

export {}

02_JS中的类型Array：

// 明确的指定<数组>的类型注解: 有两种写法
// 1. string[]: 数组类型, 并且数组中存放的字符串类型
// 2. 泛型写法 Array<string>: 数组类型, 并且数组中存放的是字符串类型

// 数组一般存放相同的类型, 不要存放不同的类型
let names: string[] = ["aaa", "bbb", "ccc"]
names.push("ddd")
// names.push(123)不要存放不同类型数据

//nums是number[]类型
let nums: Array<number> = [123, 456, 789]

export {}

03_JS 中的类型Object：

object对象类型可以用于描述一个对象：

//尽量不这样写，当指定object类型时，此时object是一个空对象类型
const message: object = {
  name:"jianghuai",
  age:20,
  height:1.80
}

message["name"]="ikun"
console.log(message["age"]);

但是从message中我们不能获取数据，也不能设置数据：

04_函数的类型：

// 在定义一个TypeScript中的函数时, 都要明确的指定参数的类型！
function sum(num1: number, num2: number) {
  return num1 + num2
}

//返回值res也是number类型，自动进行类型推导
const res = sum(123, 321)

export { }

上面是自动进行返回值的类型推导，下面是明确进行类型指定

// 在定义一个TypeScript中的函数时
// 返回值类型可以明确的指定, 也可以自动进行类型推导
function sum(num1: number, num2: number): number {
  return num1 + num2
}
const res = sum(123, 321)
export {}

 小练习：

// 定义对象类型
type LyricType = {
  time: number
  text: string
}

// 歌词解析小demo，对返回值指定类型LyricType[]
function parseLyric(lyric: string): LyricType[] {
  const lyrics: LyricType[] = []
  lyrics.push({ time: 1111, text: "天空想要下雨" })
  return lyrics
}

const lyricInfos = parseLyric("fdafdafdafa")
for (const item of lyricInfos) {
  console.log(item.time, item.text)
}


export {}

05_匿名函数的类型：

const names: string[] = ["abc", "cba", "nba"]

// forEach内的function是匿名函数,匿名函数最好不要添加类型注解,会根据代码自动匹配类型。
//这个过程称之为上下文类型（contextual typing），因为函数执行的上下文可以帮助确定参数和返回值的类型；
names.forEach(function (item, index, arr) {
  console.log(item, index, arr)
})

export { }

06_TS中的类型:

any类型：

1.对any类型的变量进行任何的操作，包括获取不存在的属性、方法；

2.给一个any类型的变量赋值任何的值，比如数字、字符串的值；

// any类型就表示不限制标识符的任意类型, 并且可以在该标识符上面进行任意的操作(在TypeScript中回到JavaScript中)
let id: any = "aaaa"

id = "bbbb"
id = 123
console.log(id.length)

id = { name: "why", level: 99 }

// 定义数组
const infos: any[] = ["abc", 123, {}, []]

什么时候用any类型？

        如果对于某些情况的处理过于繁琐不希望添加规定的类型注解，或者在引入一些第三方库时，缺失了类型注解，这个时候我们可 以使用any：

包括在Vue源码中，也会使用到any来进行某些类型的适配；

unknow类型：

        和any类型有点类似，但是unknown类型的值上做任何事情都是不合法的，想要操作必须得进行类型校验；

let foo: unknown = "aaa"
foo = 123

// unknown类型默认情况下在上面进行任意的操作都是非法的
// 要求必须进行类型的校验(缩小), 才能根据缩小之后的类型, 进行对应的操作
if (typeof foo === "string") { // 类型缩小
  console.log(foo.length, foo.split(" "))
}


export {}

void类型：

// 1.在TS中如果一个函数没有任何的返回值, 那么返回值的类型就是void类型
// 2.如果返回值是void类型, 那么我们也可以返回undefined(TS编译器允许这样做而已)

function sum(num1: number, num2: number): void {
  console.log(num1 + num2)
  //return 123错误做法，因为明确指定了返回类型void
}

        当基于上下文的类型推导（Contextual Typing）推导出返回类型为 void 的时候，并不会强制函数一定不能返回内容 

const names = ["abc", "cba", "nba"]

// 了解即可: 基于上下文类型推导的函数中的返回值如果是void类型, 并且不强制要求不能返回任何的东西
names.forEach((item: string, index: number, arr: string[]) => {
  console.log(item)
  return 123
})

never类型：

never 表示永远不会发生值的类型，比如一个函数：

如果一个函数中是一个死循环或者抛出一个异常，那么这个函数会返回东西吗？ 不会，那么写void类型或者其他类型作为返回值类型都不合适，我们就可以使用never类型；

// 二. 封装框架/工具库的时候可以使用一下never
// 其他时候在扩展工具的时候, 对于一些没有处理的case, 可以直接报错
function handleMessage(message: string | number | boolean) {
  switch (typeof message) {
    case "string":
      console.log(message.length)
      break
    case "number":
      console.log(message)
      break
    case "boolean":
      console.log(Number(message))
      break
    default:
      const check: never = message
  }
}

handleMessage("aaaa")
handleMessage(1234)

// 调用这个函数，若传入了其他类型数据，对于一些没有处理的case，可以报错
handleMessage(true)

export {}

tuple类型(元组)：

元组中每个元素都有自己特定的类型，根据索引值获取到的值可以确定对应的类型；

// 保存我的个人信息: why 18 1.88
// 1.使用数组类型
// 不合适: 数组中最好存放相同的数据类型, 获取值之后不能明确的知道对应的数据类型
const info1: any[] = ["why", 18, 1.88]
const value = info1[2]
console.log()


// 2.使用对象类型(最多)
const info2 = {
  name: "why",
  age: 18,
  height: 1.88
}

// 3.使用元组类型
// 元组数据结构中可以存放不同的数据类型, 取出来的item也是有明确的类型
const info3: [string, number, number] = ["why", 18, 1.88]
const value2 = info3[2]


// 在函数中使用元组类型是最多的(函数的返回值)
function useState(initialState: number): [number, (newValue: number) => void] {
  let stateValue = initialState
  function setValue(newValue: number) {
    stateValue = newValue
  }

  return [stateValue, setValue]
}

const [count, setCount] = useState(10)
console.log(count)
setCount(100)

export {}

四、TypeScript语法细讲 :

TS中联合类型的使用:

联合类型是由两个或者多个其他类型组成的类型，表示可以是这些类型中的任何一个值，联合类型中的每一个类型被称之为联合成员（union's members）

TS中的类型别名 :

在前面，我们通过在类型注解中编写 对象类型 和 联合类型，但是当我们想要多次在其他地方使用时，就要编写多次。 比如我们可以给对象类型起一个别名（type）：

// 类型别名: type
type MyNumber = number

const age: MyNumber = 18

// 给ID的类型起一个别名
type IDType = number | string

function printID(id: IDType) {
  console.log(id)
}


// 打印坐标
type PointType = { x: number, y: number, z?: number }
function printCoordinate(point: PointType) {
  console.log(point.x, point.y, point.z)
}

TS中的接口声明使用:

在前面我们通过type可以用来声明一个对象类型：

对象的另外一种声明方式就是通过接口来声明：

那么它们有什么区别呢？

类型别名和接口非常相似，在定义对象类型时，大部分时候，你可以任意选择使用。 接口的几乎所有特性都可以在 type 中使用

// 区别一: type类型使用范围更广, 接口类型只能用来声明对象
type MyNumber = number
type IDType = number | string


// 区别二: 在声明对象时, interface可以多次声明
// 2.1. type不允许两个相同名称的别名同时存在！
// type PointType1 = {
//   x: number
//   y: number
// }
// type PointType1 = {
//   z?: number
// }


// 2.2. interface可以多次声明同一个接口名称
interface PointType2 {
  x: number
  y: number
}

interface PointType2 {
  z: number
}

const point: PointType2 = {
  x: 100,
  y: 200,
  z: 300
}


// 区别三:interface支持继承的
interface IPerson {
  name: string
  age: number
}

interface IKun extends IPerson {
  kouhao: string
}

const ikun1: IKun = {
  kouhao: "你干嘛, 哎呦",
  name: "kobe",
  age: 30
}

// 区别四:interface可以被类实现(TS面向对象时候再讲)
// class Person implements IPerson {
// }


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


export { }

TS中交叉类型的使用:

在开发中，我们进行交叉时，通常是对对象类型进行交叉的

// 回顾: 联合类型
type ID = number | string
const id1: ID = "abc"
const id2: ID = 123

// 交叉类型: 两种(多种)类型要同时满足
type NewType = number & string // 没有意义

interface IKun {
  name: string
  age: number
}

interface ICoder {
  name: string
  coding: () => void
}

type InfoType = IKun & ICoder

const info: InfoType = {
  name: "why",
  age: 18,
  coding: function() {
    console.log("coding")
  }
}

TS中的类型断言as:

有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言（Type Assertions）。

比如我们通过 document.getElementById，TypeScript只知道该函数会返回 HTMLElement ，但并不知道它具体的类型：

若这样，imgEl：Element | null,且imgEl的src，alt报错

使用类型断言：明确指定具体类型，则不报错

 TypeScript只允许类型断言转换为 更具体 或者 不太具体 的类型版本，此规则可防止不可能的强制转换

TS中非空类型断言:

// 定义接口
interface IPerson {
  name: string
  age: number
  friend?: {
    name: string
  }
}

const info: IPerson = {
  name: "why",
  age: 18
}

// 访问属性: 可选链: ?.
console.log(info.friend?.name)

// 属性赋值:

//赋值表达式的左侧不能是可选属性访问
//info.friend?.name="kk"


// 解决方案一: 类型缩小
if (info.friend) {
  info.friend.name = "kobe"
}

// 解决方案二: 非空类型断言(有点危险, 只有确保friend一定有值的情况, 才能使用)
info.friend!.name = "james"

export {}

TS中的字面量类型的使用:

// 1.字面量类型的基本上
const name: "why" = "why"
let age: 18 = 18

// 2.将多个字面量类型联合起来 |
type Direction = "left" | "right" | "up" | "down"
const d1: Direction = "left"

// 栗子: 封装请求方法
type MethodType = "get" | "post"
function request(url: string, method: MethodType) {
}

request("http://codercba.com/api/aaa", "post")

// TS细节
// const info = {
//   url: "xxxx",
//   method: "post"
// }
// 下面的做法是错误: info.method获取的是string类型
// request(info.url, info.method)

// 解决方案一: info.method进行类型断言
// request(info.url, info.method as "post")

// 解决方案二: 直接让info对象类型是一个字面量类型
// const info2: { url: string, method: "post" } = {
//   url: "xxxx",
//   method: "post"
// }
const info2 = {
  url: "xxxx",
  method: "post"
} as const
//as const对整个对象进行字面量推理
// xxx 本身就是一个string
request(info2.url, info2.method)

export { }

TS中类型缩小的使用:

什么是类型缩小呢？

类型缩小的英文是 Type Narrowing,

我们可以通过类似于 typeof padding === "number" 的判断语句，来改变TypeScript的执行路径； 在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为 缩小（ Narrowing ）; 而我们编写的 typeof padding === "number 可以称之为 类型保护（type guards）；

常见的类型保护有如下几种：

typeof

平等缩小（比如===、!==）

 instanceof 

in

等等...

// 1.typeof: 使用的最多
function printID(id: number | string) {
  if (typeof id === "string") {
    console.log(id.length, id.split(" "))
  } else {
    console.log(id)
  }
}


// 2.===/!==: 方向的类型判断
type Direction = "left" | "right" | "up" | "down"
function switchDirection(direction: Direction) {
  if (direction === "left") {
    console.log("左:", "角色向左移动")
  } else if (direction === "right") {
    console.log("右:", "角色向右移动")
  } else if (direction === "up") {
    console.log("上:", "角色向上移动")
  } else if (direction === "down") {
    console.log("下:", "角色向下移动")
  }
}


// 3. instanceof: 传入一个日期, 打印日期
function printDate(date: string | Date) {
  if (date instanceof Date) {
    console.log(date.getTime())
  } else {
    console.log(date)
  }

  // if (typeof date === "string") {
  //   console.log(date)
  // } else {
  //   console.log(date.getTime())
  // }
}


// 4.in: 判断是否有某一个属性
interface ISwim {
  swim: () => void
}

interface IRun {
  run: () => void
}

function move(animal: ISwim | IRun) {
  if ("swim" in animal) {
    animal.swim()
  } else if ("run" in animal) {
    animal.run()
  }
}

const fish: ISwim = {
  swim: function() {}
}

const dog: IRun = {
  run: function() {}
}

move(fish)
move(dog)

五、TypeScript函数类型

函数类型:

        在JavaScript开发中，函数是重要的组成部分，并且函数可以作为参数，也可以作为返回值进行传递，那么在使用函数的过程中，函数是否也可以有自己的类型呢？

我们可以编写函数类型的表达式（Function Type Expressions），来表示函数类型；

在上面的语法中 (num1: number, num2: number) => void，代表的就是一个函数类型：

注意：在某些语言中，可能参数名称num1和num2是可以省略，但是TypeScript是不可以的

type CalcType = (num1: number, num2: number) => number

// 1.函数的定义
function calc(calcFn: CalcType) {
  const num1 = 10
  const num2 = 20
  const res = calcFn(num1, num2)
  console.log(res)
}


// 2.函数的调用
function sum(num1: number, num2: number) {
  return num1 + num2
}

function foo(num1: number) {
  //此处注意下个代码片段
  return num1
}
calc(sum)
calc(foo)

function mul(num1: number, num2: number) {
  return num1 * num2
}
calc(mul)

// 3.使用匿名函数
calc(function (num1, num2) {
  return num1 - num2
})

export { }

// TypeScript对于传入的函数类型的多余的参数会被忽略掉(the extra arguments are simply ignored.)
type CalcType = (num1: number, num2: number) => number
function calc(calcFn: CalcType) {
  calcFn(10, 20)
}

calc(function (num1) {
  //注意此处
  return 123
})

// forEach栗子:
const names = ["abc", "cba", "nba"]
names.forEach(function (item) {
  console.log(item.length)
})

// TS对于很多类型的检测报不报错, 取决于它的内部规则
// TS版本在不断更新: 在进行合理的类型检测的情况, 让ts同时更好用(好用和类型检测之间找到一个平衡)
// 举一个例子:
interface IPerson {
  name: string
  age: number
}

// typescript github issue, 成员
const p = {
  name: "why",
  age: 18,
  height: 1.88,
  address: "广州市"
}
//通过p转换一下就没显示报错了
const info: IPerson = p

export { }

调用签名（Call Signatures）:

在 JavaScript 中，函数除了可以被调用，自己也是可以有属性值的。

然而前面讲到的函数类型表达式并不能支持声明属性；

如果我们想描述一个带有属性的函数，我们可以在一个对象类型中写一个调用签名（call signature）；

注意这个语法跟函数类型表达式稍有不同，在参数列表和返回的类型之间用的是 : 而不是 =>。 

构造签名 ：

        JavaScript 函数也可以使用 new 操作符调用，当被调用的时候，TypeScript 会认为这是一个构造函数(constructors)，因为 他们会产生一个新对象。

        你可以写一个构造签名（ Construct Signatures ），方法是在调用签名前面加一个 new 关键词；

函数的参数-可选参数:

可选类型需要在必传参数的后面：

函数的参数-默认参数：

// 函数的参数可以有默认值
// 1.有默认值的情况下, 参数的类型注解可以省略
// 2.有默认值的参数, 是可以接收一个undefined的值
function foo(x: number, y = 100) {
  console.log(y + 10)
}

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

export {}

函数的参数-剩余参数 :

        从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。

函数的重载:

在TypeScript中，如果我们编写了一个add函数，希望可以对字符串和数字类型进行相加，应该如何编写呢？

比如我们对sum函数进行重构：

在我们调用sum的时候，它会根据我们传入的参数类型来决定执行函数体时，到底执行哪一个函数的重载签名；

但是注意，有实现体的函数，是不能直接被调用的：

联合类型与重载:

我们现在有一个需求：定义一个函数，可以传入字符串或者数组，获取它们的长度。

这里有两种实现方案：方案一：使用联合类型来实现；方案二：实现函数重载来实现；

在可能的情况下，尽量选择使用联合类型来实现；

可推导的this类型:

简单掌握一些TypeScript中的this，TypeScript是如何处理this呢？我们先来看两个例子：

        上面的代码默认情况下是可以正常运行的，也就是TypeScript在编译时，认为我们的this是可以正确去使用的：这是因为在没有指定this的情况，this默认情况下是any类型的；

VSCode在检测我们的TypeScript代码时，默认情况下运行不确定的this按照any类型去使用。

用 tsc --init 创建一个tsconfig.json文件，并且在其中告知VSCodethis必须明确执行（不能是隐式的）；

在设置了noImplicitThis为true时， TypeScript会根据上下文推导this，但是在不能正确推导时，就会报错，需要我们明确 的指定this。

在开启noImplicitThis的情况下，我们必须指定this的类型。如何指定呢？

函数的第一个参数类型：

函数的第一个参数我们可以根据该函数之后被调用的情况，用于声明this的类型（名词必须叫this）； 

在后续调用函数传入参数时，从第二个参数开始传递的，this参数会在编译后被抹除；

this相关的内置工具:

        Typescript 提供了一些工具类型来辅助进行常见的类型转换，这些类型全局可用。

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 {}

六、TypeScript面向对象:

TS中类的基本使用:

只读属性readonly:

        如果有一个属性我们不希望外界可以任意的修改，只希望确定值后直接使用，那么可以使用readonly：

class Person {
  readonly name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

// 类和实例之间的关系(重要)
const p = new Person("why", 18)
console.log(p.name, p.age)

// p.name = "kobe" 只读属性不能进行写入操作
p.age = 20

export {}

getters/setters ：

        在前面一些私有属性我们是不能直接访问的，或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程，这个时候我们 可以使用存取器。

class Person {
  // 私有属性: 属性前面会使用_
  private _name: string
  private _age: number

  constructor(name: string, age: number) {
    this._name = name
    this._age = age
  }

  running() {
    console.log("running:", this._name)
  }

  // setter/getter: 对属性的访问进行拦截操作
  set name(newValue: string) {
    this._name = newValue
  }

  get name() {
    return this._name
  }


  set age(newValue: number) {
    if (newValue >= 0 && newValue < 200) {
      this._age = newValue
    }
  }

  get age() {
    return this._age
  }
}

const p = new Person("why", 100)
p.name = "kobe"
console.log(p.name)

p.age = -10
console.log(p.age)


export {}

参数属性（Parameter Properties):

class Person {
  // 语法糖
  constructor(public name: string, private _age: number, readonly height: number) {
  }

  running() {
    console.log(this._age, "eating")
  }
}

const p = new Person("why", 18, 1.88)
console.log(p.name, p.height)

// p.height = 1.98

export {}

抽象类abstract:

abstract class Shape {
  // getArea方法只有声明没有实现体
  // 实现让子类自己实现
  // 可以将getArea方法定义为抽象方法: 在方法的前面加abstract
  // 抽象方法必须出现在抽象类中, 类前面也需要加abstract
  abstract getArea()
}


class Rectangle extends Shape {
  constructor(public width: number, public height: number) {
    super()
  }

  getArea() {
    return this.width * this.height
  }
}

class Circle extends Shape {
  constructor(public radius: number) {
    super()
  }

  getArea() {
    return this.radius ** 2 * Math.PI
  }
}

class Triangle extends Shape {
  getArea() {
    return 100
  }
}


// 通用的函数
function calcArea(shape: Shape) {
  return shape.getArea()
}

calcArea(new Rectangle(10, 20))
calcArea(new Circle(5))
calcArea(new Triangle())

// 在Java中会报错: 不允许
calcArea({ getArea: function() {} })

// 抽象类不能被实例化
// calcArea(new Shape())
// calcArea(100)
// calcArea("abc")

类型检测-鸭子类型:

// TypeScript对于类型检测的时候使用的鸭子类型
// 鸭子类型: 如果一只鸟, 走起来像鸭子, 游起来像鸭子, 看起来像鸭子, 那么你可以认为它就是一只鸭子
// 鸭子类型, 只关心属性和行为, 不关心你具体是不是对应的类型

class Person {
  constructor(public name: string, public age: number) { }

  running() { }
}

class Dog {
  constructor(public name: string, public age: number) { }
  running() { }
}

function printPerson(p: Person) {
  console.log(p.name, p.age)
}

printPerson(new Person("why", 18))
// printPerson("abc")
printPerson({ name: "kobe", age: 30, running: function () { } })//直接写字面量
printPerson(new Dog("旺财", 3))//创建个小狗

const person: Person = new Dog("果汁", 5)//这也没报错


export { }

类本身也是可以作为一种数据类型的： 

class Person { }

/**
 * 类的作用:
 *  1.可以创建类对应的实例对象
 *  2.类本身可以作为这个实例的类型
 *  3.类也可以当做有一个构造签名的函数
 */

const name: string = "aaa"
const p: Person = new Person()
function printPerson(p: Person) { }

function factory(ctor: new () => void) { }
factory(Person)//直接传入Person类

export { }

索引签名:

接口的继承和实现:

interface IPerson {
  name: string
  age: number
}

// 可以从其他的接口中继承过来属性
// 1.减少了相同代码的重复编写
// 2.如果使用第三库, 给我们定义了一些属性
//  > 自定义一个接口, 同时你希望自定义接口拥有第三方某一个类型中所有的属性
//  > 可以使用继承来完成
interface IKun extends IPerson {
  slogan: string
}

const ikun: IKun = {
  name: "why",
  age: 18,
  slogan: "你干嘛, 哎呦"
}

export {}

接口可以被继承也可以被类实现: 通过类创建的实例都会具备接口的特性

interface IKun {
  name: string
  age: number
  slogan: string

  playBasketball: () => void
}

interface IRun {
  running: () => void
}


const ikun: IKun = {
  name: "why",
  age: 18,
  slogan: "你干嘛!",
  playBasketball: function () { }
}

// 作用: 接口被类实现，接口中的所有类都要具备
class Person implements IKun, IRun {
  name: string
  age: number
  slogan: string

  playBasketball() {

  }

  running() {

  }
}

const ikun2 = new Person()
const ikun3 = new Person()
const ikun4 = new Person()
console.log(ikun2.name, ikun2.age, ikun2.slogan)
ikun2.playBasketball()
ikun2.running()

抽象类和接口的区别（了解):

严格的字面量赋值检测:

interface IPerson {
  name: string
  age: number
}


// 1.奇怪的现象一: 
// 定义info, 类型是IPerson类型
const obj = {
  name: "why",
  age: 18,

  // 多了一个height属性
  height: 1.88
}
const info: IPerson = obj//不会报错，通过中间量obj传递

//const info1:IPerson={name:"kobe",age:18,height:1.88}会报错，height报错


// 2.奇怪的现象二:
//直接调用函数并传入属性值也是会报错，但是通过中间量kobe传入调用则不会报错
function printPerson(person: IPerson) {

}
const kobe = { name: "kobe", age: 30, height: 1.98 }
printPerson(kobe)


// 解释现象
// 第一次创建的对象字面量, 称之为fresh(新鲜的)
// 对于新鲜的字面量, 会进行严格的类型检测. 必须完全满足类型的要求(不能有多余的属性)
const obj2 = {
  name: "why",
  age: 18,

  height: 1.88
}

const p: IPerson = obj2

export { }

 TypeScript枚举类型:

// 定义枚举类型
enum Direction {
  LEFT,
  RIGHT
}

const d1: Direction = Direction.LEFT

function turnDirection(direction: Direction) {
  switch(direction) {
    case Direction.LEFT:
      console.log("角色向左移动一个格子")
      break
    case Direction.RIGHT:
      console.log("角色向右移动一个格子")
      break
  }
}

// 监听键盘的点击
turnDirection(Direction.LEFT)

export {}