TypeScript

zfh大约 22 分钟约 6598 字...

为什么学习 TS

程序更容易理解

函数或者方法输入输出的参数类型，外部条件？

使用js需要手动调试（console.log....)
使用ts代码本身就可以回答上诉问题

更高的效率

在不同的代码块和定义中进行跳转
代码自动补全
丰富的接口提示

更少的错误

编译期间能够发现大部分错误
杜绝一些常见的错误

非常好的包容性

完全兼容js
第三方库可以单独编写类型文件
大多数项目都支持ts

一些小缺点

学习成本
开发成本

学习资源

开发环境

安装 ts:npm i -g typescript,编译 ts: tsc xxx.ts,得到 js 文件执行
直接使用 ts-node 运行 ts 文件:
- npm i ts-node -g
- npm i typescript -g
- ts-node xxx.ts

boolean

const bool1 = true
const bool2: boolean = false

number

const num1: number = 1
const num2 = 2

string

const str1 = 'frank'
const str2: string = 'frank'
const str3 = `我叫${str2}`

array

数组的几种声明方式：

let list1: number[] = [1, 2, 3, 4]
let list2 = [1, 2, 3, '4']
let list3: Array<number> = [1, 2, 3, 4] // 泛型
let list4: any[] = [1, 'ddd', { a: 1 }, [1, 2, 3]]

tuple

元组类型是另一种类型 Array，它确切地知道它包含多少个元素，以及它在特定位置包含哪些类型

let person: [number, string] = [1, '123']

当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型:

let tom: [string, number]
tom = ['Tom', 25]
tom.push('male')
tom.push(true)
// Argument of type 'true' is not assignable to parameter of type 'string | number'.

union

联合类型 Union Types 表示取值可以为多种类型中的一种

联合类型使用 |分隔每个类型

let union1: number | string
union1 = 123
union1 = '456'

let union2: number | string | string[] | boolean

let union3: 1 | 2 | 3

literal

字面量 Literal 类型的特定数据就是它自己的类型

const num = 1
// 与联合类型结合
let nums: 1 | 2 | 3
nums = 2
nums = 4 // 报错 nums只能是 1,2,3 中的其中一个

any

任意值 Any 用来表示允许赋值为任意类型

let result: any = 555
result = { a: 1 }
result = []
result = false

unknown

unknown 不保证类型，但保证类型安全(类型安全的 any)，只有确定了变量类型以后，才能正常使用

let res: unknown = 123
res = function () {
  console.log('res')
}
if (typeof res === 'function') {
  res()
}
res = 123
if (typeof res === 'number') {
  console.log(res++)
}

void

void 和 undefined

void 代表变量本身就不存在，undefined代表应该此处应该有一个变量，但是没有定义

在 TypeScript 中，可以用 void 表示没有任何返回值的函数:

function printRes(): void {
  console.log('string')
}

function printRes2(): undefined {
  console.log('string')
  return
}

Enum

enumopen in new window

Interface

在 TypeScript 中，我们使用接口Interfaces来定义对象的类型

在面向对象语言中，接口nterfaces是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类classes去实现implement

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape」进行描述:

interface IPoint {
  X: number
  Y: number
}
const p1: IPoint = {
  X: 1,
  Y: 2,
}

定义的变量比接口少了一些属性是不允许的,多一些属性也是不允许的。可见，赋值的时候，变量的形状必须和接口的形状保持一致

可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性：

interface Person {
  name: string
  age?: number
}

let tom: Person = {
  name: 'Tom',
}

可选属性的含义是该属性可以不存在。这时仍然不允许添加未定义的属性

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
  name: string
  age?: number
  // 索引签名
  [propName: string]: any
}

let tom: Person = {
  name: 'Tom',
  gender: 'male',
}

使用索引签名 [propName: string] 定义了任意属性取 string 类型的值。

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

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

let tom: Person = {
  name: 'Tom',
  age: 25,
  gender: 'male',
}

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

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

let tom: Person = {
  name: 'Tom',
  age: 25,
  gender: 'male',
}

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

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

let tom: Person = {
  id: 89757,
  name: 'Tom',
  gender: 'male',
}

tom.id = 9527
// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了。

function

定义

函数声明

输入多余的（或者少于要求的）参数，是不被允许的

function sum(x: number, y: number): number {
  return x + y
}

函数表达式

let mySum = function (x: number, y: number): number {
  return x + y
}

各种参数

参考文章

ts 函数，可选参数，默认参数，剩余参数open in new window

// 可选参数
function fun(a: number, b?: number) {
  console.log(a, b) // 1 undefined
}

fun(1)
// 默认参数
function fun2(a: number = 1, b: number = 2) {
  console.log(a + b) //3
}

fun2(1)
// 剩余参数
function fun3(a: number, b: number, ...c: number[]) {
  console.log(a + b + c.reduce((pre, cur) => pre + cur)) //16
}

fun3(1, 2, 3, 4, 6)

注意

默认参数和可选参数无法同时使用
三种参数都应定义在参数列表的末尾

Object

在 ts 中对象的定义不是key to value 键值对，而是 key to type 键类型对

const person: {
  name: string
  age: number
} = {
  name: 'frank',
  age: 14,
}
// 上面的定义等价于：
const person2 = {
  name: 'zhang',
  age: 13,
}

Type Assertions 类型断言

类型断言Type Assertions可以用来手动指定一个值的类型

let x: any
x = '123' // 仍然是any类型
// 写法1 在 tsx 语法（React 的 jsx 语法的 ts 版）中无法使用
let s1 = (<string>x).charAt(1) //  1
// 写法2
let s2 = (x as string).charAt(2) // 2

Type Inference 类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

以下代码虽然没有指定类型，但是会在编译的时候报错：

let myFavoriteNumber = 'seven'
myFavoriteNumber = 7
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

事实上，它等价于：

let myFavoriteNumber: string = 'seven'
myFavoriteNumber = 7

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

let myFavoriteNumber
myFavoriteNumber = 'seven'
myFavoriteNumber = 7

Generics 泛型

泛型Generics是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

简单的例子

首先，我们来实现一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值：

function createArray(length: number, value: any): Array<any> {
  let result = []
  for (let i = 0; i < length; i++) {
    result[i] = value
  }
  return result
}

createArray(3, 'x') // ['x', 'x', 'x']

上例中，我们使用了数组泛型来定义返回值的类型。

这段代码编译不会报错，但是一个显而易见的缺陷是，它并没有准确的定义返回值的类型：

Array<any> 允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的 value 的类型。

这时候，泛型就派上用场了：

function createArray<T>(length: number, value: T): Array<T> {
  let result: T[] = []
  for (let i = 0; i < length; i++) {
    result[i] = value
  }
  return result
}

createArray<string>(3, 'x') // ['x', 'x', 'x']

上例中，我们在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array<T> 中即可使用了。

接着在调用的时候，可以指定它具体的类型为 string。当然，也可以不手动指定，而让类型推论自动推算出来：

function createArray<T>(length: number, value: T): Array<T> {
  let result: T[] = []
  for (let i = 0; i < length; i++) {
    result[i] = value
  }
  return result
}

createArray(3, 'x') // ['x', 'x', 'x']

多个类型参

定义泛型的时候，可以一次定义多个类型参数：

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]
}

swap([7, 'seven']) // ['seven', 7]

上例中，我们定义了一个 swap 函数，用来交换输入的元组

泛型约束

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：

function loggingIdentity<T>(arg: T): T {
  console.log(arg.length)
  return arg
}

// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.

上例中，泛型 T 不一定包含属性 length，所以编译的时候报错了。

这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束：

interface Lengthwise {
  length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length)
  return arg
}

上例中，我们使用了 extends 约束了泛型 T 必须符合接口 Lengthwise 的形状，也就是必须包含 length 属性。

此时如果调用 loggingIdentity 的时候，传入的 arg 不包含 length，那么在编译阶段就会报错了：

interface Lengthwise {
  length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length)
  return arg
}

loggingIdentity(7)

// index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.

多个类型参数之间也可以互相约束：

function copyFields<T extends U, U>(target: T, source: U): T {
  for (let id in source) {
    target[id] = (<T>source)[id]
  }
  return target
}

let x = { a: 1, b: 2, c: 3, d: 4 }

copyFields(x, { b: 10, d: 20 })

上例中，我们使用了两个类型参数，其中要求 T 继承 U，这样就保证了 U 上不会出现 T 中不存在的字段。

泛型接口

可以使用接口的方式来定义一个函数需要符合的形状：

interface SearchFunc {
  (source: string, subString: string): boolean
}

let mySearch: SearchFunc
mySearch = function (source: string, subString: string) {
  return source.search(subString) !== -1
}

当然也可以使用含有泛型的接口来定义函数的形状：

interface CreateArrayFunc {
  <T>(length: number, value: T): Array<T>
}

let createArray: CreateArrayFunc
createArray = function <T>(length: number, value: T): Array<T> {
  let result: T[] = []
  for (let i = 0; i < length; i++) {
    result[i] = value
  }
  return result
}

createArray(3, 'x') // ['x', 'x', 'x']

进一步，我们可以把泛型参数提前到接口名上：

interface CreateArrayFunc<T> {
  (length: number, value: T): Array<T>
}

let createArray: CreateArrayFunc<any>
createArray = function <T>(length: number, value: T): Array<T> {
  let result: T[] = []
  for (let i = 0; i < length; i++) {
    result[i] = value
  }
  return result
}

createArray(3, 'x') // ['x', 'x', 'x']

注意，此时在使用泛型接口的时候，需要定义泛型的类型。

泛型类

与泛型接口类似，泛型也可以用于类的类型定义中：

class GenericNumber<T> {
  zeroValue: T
  add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function (x, y) {
  return x + y
}

泛型参数的默认类型

在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。

function createArray<T = string>(length: number, value: T): Array<T> {
  let result: T[] = []
  for (let i = 0; i < length; i++) {
    result[i] = value
  }
  return result
}

type 类型别名

类型别名用来给一个类型起个新名字

type Name = string
type NameResolver = () => string
type NameOrResolver = Name | NameResolver
function getName(n: NameOrResolver): Name {
  if (typeof n === 'string') {
    return n
  } else {
    return n()
  }
}

上例中，我们使用 type 创建类型别名

类型别名常用于联合类型

类型别名与接口的区别

相同点

都可以描述一个对象或者函数：

interface

interface User {
  name: string
  age: number
}

interface SetUser {
  (name: string, age: number): void
}

type

type User = {
  name: string
  age: number
}

type SetUser = (name: string, age: number) => void

都允许拓展extends：

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说interface可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

interface extends interface

interface Name {
  name: string
}
interface User extends Name {
  age: number
}

type extends type

type Name = {
  name: string
}
type User = Name & { age: number }

interface extend type

type Name = {
  name: string
}
interface User extends Name {
  age: number
}

type extends interface

interface Name {
  name: string
}
type User = Name & {
  age: number
}

不同点

type 可以而 interface 不行：

type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
  wong()
}
interface Cat {
  miao()
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

type 语句中还可以使用 typeof 获取实例的类型进行赋值

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div')
type B = typeof div

interface 可以而 type 不行：

interface 能够声明合并

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/

重载

重载是定义相同的方法名,参数不同;重写是子类重写父类的方法

函数重载

参考文章

TS 中几种函数重载open in new window

TS 中的方法重载,函数重载,构造器重载open in new window

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。

比如，我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 'hello' 的时候，输出反转的字符串 'olleh'。

利用联合类型，我们可以这么实现：

function reverse(x: number | string): number | string | void {
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''))
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('')
  }
}

然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

这时，我们可以使用重载定义多个 reverse 的函数类型：

function reverse(x: number): number // 重载签名
function reverse(x: string): string // 重载签名
function reverse(x: number | string): number | string | void {
  // 实现签名
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''))
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('')
  }
}

上例中，我们重复定义了多次函数 reverse，前几次都是函数定义，最后一次是函数实现

方法重载

下面来实现一个方法重载以 ArrayList 为例,可以查看数据,可以删除数据,删除可以通过 id 或者对象删除可以获取数据

class ArrayList {
  constructor(public element: object[]) {}
  /**
   * 获取某一个值
   * @param index
   * @returns
   */
  get(index: number) {
    return this.element[index]
  }
  // 显示值
  show() {
    this.element.forEach((i) => console.log(i))
  }

  remove(val: number): number
  remove(val: Object): Object // 实现删除方法重载

  remove(val: number | Object) {
    this.element = this.element.filter((e, index) => {
      if (typeof val === 'number') {
        return val !== index
      } else {
        return val !== e
      }
    })
    return val
  }
}
let a = { name: 'zixia', age: 12 },
  b = { name: 'selfsummer', age: 88 },
  c = { name: '自夏', age: 18 }

let newAr = new ArrayList([a, b, c])

newAr.remove(1)
newAr.remove(c)
console.log(newAr)

构造器重载

// 类型别名
type TypeWowen = {
  name: string
  age: number
}

class Wowen {
  name: string
  age: number
  constructor(age: number, name?: string)
  constructor(paramObj: TypeWowen)
  constructor(paramObj: any, name = '未知') {
    if (typeof paramObj === 'object') {
      const { name, age } = paramObj
      this.name = name
      this.age = age
    } else {
      this.age = paramObj
      this.name = name
    }
  }
}
const w1 = new Wowen({ name: 'frank', age: 123 })
const w2 = new Wowen(123, 'frank')
// const w3 = new Wowen({ name: 'frank', age: 123 }, 123)

console.log(w1)
console.log(w2)
console.log(w3)

type GreetFunction = (a: string) => void
function greeter(fn: GreetFunction) {
  // ...
}

在 JavaScript 中，函数除了可以被调用，自己也是可以有属性值的。然而函数类型表达式并不能支持声明属性，如果我们想描述一个带有属性的函数，我们可以在一个对象类型中写一个调用签名（call signature）

type DescribableFunction = {
  description: string
  (someArg: number): boolean
}
const fn: DescribableFunction = (someArg) => {
  return someArg > 0
}

fn.description = '是否大于0'

function doSomething(fn: DescribableFunction) {
  console.log(`${fn.description},returned:${fn(6)}`)
}

doSomething(fn)

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

构造签名

JavaScript 函数也可以使用 new 操作符调用，当被调用的时候，TypeScript 会认为这是一个构造函数( constructors (构造函数) )，因为他们会产生一个新对象。你可以写一个构造签名，方法是在调用签名前面加一个 new 关键词：

type SomeConstructor = {
  new (s: string): SomeObject
}
function fn(ctor: SomeConstructor) {
  return new ctor('hello')
}

索引签名

索引:对象或数组的对应位置的名字

数组的索引就是 number 类型的 0,1,2,3...

对象的索引就是 string 类型的属性名

有的时候，你不能提前知道一个类型里的所有属性的名字，但是你知道这些值的特征

这种情况，你就可以用一个索引签名index signature 来描述可能的值的类型

一个索引签名的属性类型必须是 string 或者是 number

数字索引签名:通过定义接口用来约束数组

type numberIndex = {
  [index: number]: string
}
const testArray: numberIndex = ['1', '2', 3] // 不能将类型“number”分配给类型“string”。ts(2322) 所需类型来自此索引签名

提示

索引签名的名称如[index:number]:string里的index除了可读性外,并无任何意义.但有利于下一个开发者理解你的代码

字符串索引签名:用于约束对象

type objectType{
    [propName:string]:number
}
const testObj:objectType = {
    "name":100,
    "age":"200" // 不能将类型“string”分配给类型“number”。ts(2322) 所需类型来自此索引签名。
}

注意事项

一旦定义了索引签名,那么确定属性和可选属性的类型都必须是它的类型的子集

type attentionType{
    name: string; // Ok
    age?: number; // 类型“number | undefined”的属性“age”不能赋给“string”索引类型“string”。ts(2411)
    sex?: undefined; // OK
    [propName: string]: string | undefined;
}

虽然 TypeScript 可以同时支持 string 和 number 类型，但数字索引的返回类型一定要是字符索引返回类型的子类型。这是因为当使用一个数字进行索引的时候，JavaScript 实际上把它转成了一个字符串。这就意味着使用数字 100 进行索引跟使用字符串 100 索引，是一样的。

interface Animal {
  name: string
}
interface Dog extends Animal {
  breed: string
}

interface NotOkay {
  [x: string]: Dog
  [x: number]: Animal // Error
}

interface Okay {
  [x: string]: Animal
  [x: number]: Dog // OK
}

常量断言

参考文章

TypeScript 夜点心：常量断言open in new window

常量断言，可以用于断言任何一个类型：

const frank = {
  age: 22,
  hobby: 'js',
} as const

interface Isetting {
  align: 'center' | 'left' | 'right'
  padding: number
}

function layout(setting: Isetting) {
  console.log('Layout', setting)
}

const paramer = {
  align: 'left' as const,
  padding: 0,
}
layout(paramer)

keyof 操作符

对一个对象类型使用 keyof 操作符，会返回该对象属性名组成的一个字符串或者数字字面量的联合。这个例子中的类型 P 就等同于 "x" | "y"：

type Point = { x: number; y: number }
type P = keyof Point

类型映射

有的时候，一个类型需要基于另外一个类型，但是你又不想拷贝一份，这个时候可以考虑使用映射类型。

type Point2D = {
  x: number
  y: number
}

type Point3D = {
  [key in keyof Point2D]: number
} & {
  z: number
}

let p2: Point3D = { x: 1, y: 2, z: 3 }

映射修饰符

在使用类型映射时，有两个额外的修饰符可能会用到，一个是 readonly，用于设置属性只读，一个是 ? ，用于设置属性可选。

你可以通过前缀 - 或者 + 删除或者添加这些修饰符，如果没有写前缀，相当于使用了 + 前缀。

// 删除属性中的只读属性
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property]
}

type LockedAccount = {
  readonly id: string
  readonly name: string
}

type UnlockedAccount = CreateMutable<LockedAccount>

// type UnlockedAccount = {
//    id: string;
//    name: string;
// }

// 删除属性中的可选属性
type Concrete<Type> = {
  [Property in keyof Type]-?: Type[Property]
}

type MaybeUser = {
  id: string
  name?: string
  age?: number
}

type User = Concrete<MaybeUser>
// type User = {
//    id: string;
//    name: string;
//    age: number;
// }

类

基础概念

类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
对象（Object）：类的实例，通过 new 生成
面向对象（OOP）的三大特性：封装、继承、多态
封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
存取器（getter & setter）：用以改变属性的读取和赋值行为
修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

Access Modifiers 访问修饰符

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。

public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

interface IPoint {
  X: number
  Y: number
  drawPoint: () => void
  getDistances: (p: IPoint) => number
}
class Point implements IPoint {
  constructor(private _x: number, private _y: number) {}
  drawPoint() {
    console.log('x：' + this._x, 'y:' + this._y)
  }
  getDistances(p: IPoint) {
    return Math.sqrt((p.X - this._x) ** 2 + (p.Y - this._y) ** 2)
  }
  get X() {
    return this._x
  }
  set X(value: number) {
    if (value < 0) throw new Error('x不能小于0')
    this._x = value
  }
  get Y() {
    return this._y
  }
  set Y(value: number) {
    if (value < 0) throw new Error('y不能小于0')
    this._y = value
  }
}

const p1 = new Point(0, -1)
const p2 = new Point(0, 2)

readonly

readonly 只读属性关键字

class Animal {
  readonly name
  constructor(name) {
    this.name = name
  }
}

let a = new Animal('Jack')
console.log(a.name) // Jack
a.name = 'Tom'

// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

注意如果 readonly 和其他访问修饰符同时存在的话，需要写在其后面。

class Animal {
  constructor(public readonly name) {
    this.name = name
  }
}

抽象类

abstract 用于定义抽象类和其中的抽象方法。

什么是抽象类？

首先，抽象类是不允许被实例化的：

abstract class Animal {
  constructor(pubilc name) {
    this.name = name;
  }
   abstract sayHi();
}

let a = new Animal('Jack');

// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.

上面的例子中，我们定义了一个抽象类 Animal，并且定义了一个抽象方法 sayHi。在实例化抽象类的时候报错了。

其次，抽象类中的抽象方法必须被子类实现：

abstract class Animal {
  constructor(public name) {
    this.name = name
  }
  abstract sayHi()
}

class Cat extends Animal {
  eat() {
    console.log(`${this.name} is eating.`)
  }
}

let cat = new Cat('Tom')

// index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.

上面的例子中，我们定义了一个类 Cat 继承了抽象类 Animal，但是没有实现抽象方法 sayHi，所以编译报错了。

下面是一个正确使用抽象类的例子：

abstract class Animal {
  public name
  public constructor(name) {
    this.name = name
  }
  public abstract sayHi()
}

class Cat extends Animal {
  public sayHi() {
    console.log(`Meow, My name is ${this.name}`)
  }
}

let cat = new Cat('Tom')

类实现接口

实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：

interface Alarm {
  alert(): void
}

class Door {}

class SecurityDoor extends Door implements Alarm {
  alert() {
    console.log('SecurityDoor alert')
  }
}

class Car implements Alarm {
  alert() {
    console.log('Car alert')
  }
}

一个类可以实现多个接口：

interface Alarm {
  alert(): void
}

interface Light {
  lightOn(): void
  lightOff(): void
}

class Car implements Alarm, Light {
  alert() {
    console.log('Car alert')
  }
  lightOn() {
    console.log('Car light on')
  }
  lightOff() {
    console.log('Car light off')
  }
}

内置工具类型

ReturnType

returnType是TypeScript的一个内置工具类型，用于获取函数返回值的类型。

function f1(s: string) {
  return { a: 1, b: s }
}
// typeof 用于获取该函数的类型
type T14 = ReturnType<typeof f1> // { a: number, b: string }

Required

Required 是 TypeScript 中的一个工具类型，用于将给定类型的所有属性转换为必需的（非可选的）属性。

interface Props {
  name?: string
  age?: number
  email: string
}

type RequiredProps = Required<Props>

const obj: RequiredProps = {
  name: 'John',
  age: 25, // Error: 'age' 属性是可选的，但是在 RequiredProps 中它是必需的
  email: 'john@example.com',
}

索引访问类型open in new window

在 TypeScript 中，方括号语法可以用于类型索引操作，以从其他类型中获取特定属性的类型。

下面是一个使用方括号语法获取类型的示例：

interface Person {
  name: string
  age: number
  email: string
}

type PersonNameProperty = Person['name'] // string

TypeScript

# 为什么学习 TS

# 程序更容易理解

# 更高的效率

# 更少的错误

# 非常好的包容性

# 一些小缺点

# 学习资源

# 开发环境

# boolean

# number

# string

# array

# tuple

# union

# literal

# any

# unknown

# void

# Enum

# Interface

# 可选属性

# 任意属性

# 只读属性

# function

# 定义

# 各种参数

# Object

# Type Assertions 类型断言

# Type Inference 类型推论

# Generics 泛型

# 简单的例子

# 多个类型参

# 泛型约束

# 泛型接口

# 泛型类

# 泛型参数的默认类型

# type 类型别名

# 类型别名与接口的区别

# 相同点

# 不同点

# 重载

# 函数重载

# 方法重载

# 构造器重载

# 构造签名

# 索引签名

# 数字索引签名:通过定义接口用来约束数组

# 字符串索引签名:用于约束对象

# 注意事项

# 常量断言

# keyof 操作符

# 类型映射

# 映射修饰符

# 类

# 基础概念

# Access Modifiers 访问修饰符

# readonly

# 抽象类

# 类实现接口

# 内置工具类型

# ReturnType

# Required

# 索引访问类型open in new window

# 类型收窄open in new window

预览:

为什么学习 TS

程序更容易理解

更高的效率

更少的错误

非常好的包容性

一些小缺点

学习资源

开发环境

boolean

number

string

array

tuple

union

literal

any

unknown

void

Enum

Interface

可选属性

任意属性

只读属性

function

定义

各种参数

Object

Type Assertions 类型断言

Type Inference 类型推论

Generics 泛型

简单的例子

多个类型参

泛型约束

泛型接口

泛型类

泛型参数的默认类型

type 类型别名

类型别名与接口的区别

相同点

不同点

重载

函数重载

方法重载

构造器重载

构造签名

索引签名

数字索引签名:通过定义接口用来约束数组

字符串索引签名:用于约束对象

注意事项

常量断言

keyof 操作符

类型映射

映射修饰符

类

基础概念

Access Modifiers 访问修饰符

readonly

抽象类

类实现接口

内置工具类型

ReturnType

Required

索引访问类型open in new window

类型收窄open in new window