TypeScript 学习总结

TypeScript 定义

TypeScript 是一个 JavaScript 的超集，主要提供了对类型系统和 ES6 的支持。
目前 JS 引擎无法读取 TS 代码，因此任何 TS 文件都有一个预编译的过程。

TS 作用

TypeScript 是 JS 静态检查的最佳工具。在代码运行之前测试代码的正确性。 TS 会让 JS 的代码结构更好。

到目前为止，JS 有 7 种类型：

1. String
2. Number
3. Boolean
4. Null
5. Undefined
6. Object
7. Symbol(es6)

在使用 JS 进行开发的时候，声明变量的类型是可以随时改变的, 例如布尔类型可以变成字符串。js 松散的特性可能会在代码中造成严重的问题，破坏其可维护性。
TS 则可以通过向 JS 添加强类型检测，来避免这些问题。

let bool = true
bool = 'string'

TS 的常用数据类型

常用的类型：boolean、number、string、null、undefined、Symbol、void 空类型、any等等。
可以去官网查看完整的TS 数据类型

1.Boolean

const isDone: boolean = false

2.Number

const decimal: number = 1

3.联合类型和 type 类型别名

type possible = string | number
let data: possible = 123

let myNumber: string | number
myNumber = '123'
console.log(myNumber.length)

4.枚举 Enum

用于取值被限定在一定范围的场景内，比如一周只有7天。

enum Color = {
  Red,
  Green,
  Blue
}

const c: Color = Color.Red

5.函数类型

5.1可选参数用 ? 表示。可选参数必须在必需参数的后面。

function addCount(a: number, b?: number) {
  if (b) {
    return a + b
  } else {
    return a
  }
}

5.2 默认参数，在 es6 中我们允许给函数的参数添加默认值， TS 会将添加了默认值的参数识别为可选参数，此时不再受到可选参数
必须在必需参数后面的限制了。

function addCount(a: number = 1, b: number) {
  return a + b
}

console.log(addCount(undefined, 2))

泛型

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

通俗的解释，泛型是类型系统中的“参数”，主要作用是为了类型的重用。从定义可以看出，它只会用在函数，接口或者类中。因为 TS 是静态类型系统，是在 JS 进行编译
时进行类型检查的系统，因此，泛型这种参数，实际上在编译过程中的运行时使用。

泛型函数

function identity<T>(value: T): T {
  return value
}

identity<number>(123) // 123

// 传递2个类型
function identity<T, U>(value: T, message: U): T {
  console.log(message)
  return value
}

const res = identity<number, string>(123, 'test')
console.log(res) // 信息 123

T 被称为类型变量

T 代表 type, 在定义泛型时通常用作第一个类型变量的名称。但实际上 T 可以用作任何有效名称替代。除了 T 之外，还有其他常见的泛型变量：

K(key): 表示对象中的键类型
V(Value): 表示对象中的值类型
E(Element): 表示元素类型

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

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

Array 允许数组的每一项都为任意类型。但是我们的预期是数组中每一项都应该是输入的 value 类型。所以 createArr 函数可以改为

// 在函数名后添加了 <T>, 其中用 T 表示任意输入的类型，在后面输入的 value: T 和输出的 Array<T> 中皆可使用
function createArr<T>(length: number, value: T): Array<T> {
  let res: T[] = []
  for (let i = 0; i < length; i++) {
    res.push(value)
  }
  return res
}

// 在调用的时候，可以指定具体的类型，也可以不指定，而让类型推论自己推算出来
createArr(3, 'x') // ['x', 'x', 'x']

泛型接口

// 泛型接口
interface identities<T, U> {
  value: T,
  msg: U
}

function identity<T, U>(value: T, msg: U) {
  let text: identities<T, U> = {
    value,
    msg
  }
  return text
}

identity(123, 'test') // { value: 123, msg: 'test' }

泛型类

// 泛型类
interface InterfaceTest<U> {
  value: U,
  getIdentity: () => U
}

class IdentityClass<T> implements InterfaceTest<T> {
  value: T

  constructor(value: T) {
    this.value = value
  }

  getIdentity(): T {
    return this.value
  }
}

const test = new IdentityClass<number>(123)
console.log(tes.getIdentity()) // 123

什么时候使用泛型？
1.当函数、接口和类将处理多种数据类型时
2.当函数、接口或类在多个地方使用该数据类型时

TypeScript 对象和接口

1.Array