TypeScript 基础

TypeScript的类型

number

可以用来表示整数和分数以及其他进制的数字

let n: number = 1

string

表示字符串类型

let s: string = 'hello'

字面量

let a: 'male' | 'female'
a = 'male'
a = 'female'

boolean

表示逻辑值 true 和 false

let b: boolean = true

function

函数的两种表示方法

let fn: (a: number, b: number)=>number = function (n1: number, n2: number) {
  return n1 + n2
}

function fn1(n1: number, n2: number): number {
  return n1 + n2
}

array

声明变量为数组

let arr1: number[] = [1, 2]

let arr2: Array<number> = [1, 2]

let arr3: [number, string] = [1, 'hello']

object

let o1: object
o1 = {}
o1 = function () {}

let o2: {name: string, age: 18}
o2 = {name: 'hello', age: 18}

let o3: {name: string, age?: number}
o3 = {name: 'hello'}

let o4: {name: string, [propName: string]: any}
o4 = {name: 'hello', age: 18}

let o5: {name: string} & {age: number}
o5 = {name: 'hello', age: 18}

any

声明为 any 的变量可以赋予任意类型的值

let a: any
a = 1
a = 'hello'
a = true

unknown

严格类型的 any，需要进行断言或者类型检查

let u: unknown
u = 1
u = 'u'
u = true

let s: string
if (typeof u === 'string') {
  s = u
}
s = u as string
s = <string>u

tuple

表示已知元素数量和类型的数组

let t: [string, number]
t = ['t', 1]

enum

用于定义数值集合

enum Color{
  red,
  green,
  blue
}
let c: Color = Color.blue
console.log(c) // 2

void

表示方法没有返回值

function sayhello(): void {
  console.log('hello')
}

undefined

用于初始化变量为一个未定义的值

let u: undefined = undefined

null

表示值的缺失

let n: null = null

never

代表不会出现的值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）

function n(): never {
  throw new Error('error')
}

联合类型

let b: boolean | string
b = true
b = 'c'

let arr: string[] | number[]
arr = ['a', 'b']
arr = [1, 2]

function fn(name: string | string[]): void {
  console.log(name)
}
fn('hello')
fn(['hello', 'world'])

类型断言

用来告诉 TS 编译器变量的类型，有两种形式。

let u: unknown
u = 1
u = 'u'
u = true

let s: string
// 直接用 typeof 判断
if (typeof u === 'string') {
  s = u
}
// 第一种断言
s = u as string
// 第二种断言
s = <string>u

类

类是对具体事物的抽象。

class Animal {
  name: string
  constructor (name: string) {
    this.name = name
  }
  sayHello () {
    console.log('动物叫声')
  }
}
class Dog extends Animal {
  age: number
  constructor (name: string, age: number) {
    super(name) // 调用父类构造函数
    this.age = age

  }
  sayHello(): void {
    super.sayHello() // 调用父类方法
    console.log('汪汪汪')
  }
}

抽象类

抽象类无法实例化，抽象方法只能被子类重写，不能被调用。

abstract class Animal {
  name: string
  constructor (name: string) {
    this.name = name
  }
  abstract sayHello (): void
}
class Dog extends Animal {
  age: number
  constructor (name: string, age: number) {
    super(name)
    this.age = age
  }
  sayHello(): void {
    // super.sayHello() // 父类抽象方法不能调用
    console.log('汪汪汪')
  }
}
class Cat extends Animal {
  sayHello(): void {
    console.log('喵喵喵')
  }
}

属性封装

• public：没有限制
• private：只能在当前类使用
• protected：可以在当前类以及其子类中使用

class Person {
  private _name: string
  private _age: number
  constructor (name: string, age: number) {
    this._name = name
    this._age = age
  }
  get name () {
    return this._name
  }
  set name (value: string) {
    this._name = value
  }
  get age () {
    return this._age
  }
  set age (value: number) {
    if (value >= 0) {
      this._age = value
    }
  }
}

自定义类型与接口

自定义类型

给已有的类型别名和定义新的类型（搭配联合类型）

type myType1 = {
  name: string,
  age: number
}
let p: myType1 = {name: 'p', age: 18}

type myType2 = 1 | 2 | 3 | 4 | 5
let n1: myType2
let n2: myType2
n1 = 2
n2 = 5

接口

对象类型的复用，可以继承

interface myInterface1 {
  name: string,
  age: number
}
interface myInterface1 {
  gender: string
}
const obj: myInterface1 = {
  name: 'obj',
  age: 18,
  gender: 'male'
}

interface myInterface2 {
  name: string,
  age?: string
}
interface mySubInterface2 extends myInterface2 {
  gender: string
}
const obj2: mySubInterface2 = {
  name: 'obj2',
  gender: 'male'
}

interface myInter {
  name: string,
  sayHello(): void
}
class MyClass implements myInter {
  name: string
  constructor (name: string) {
    this.name = name
  }
  sayHello(): void {
    console.log('hello')
  }
}

对比自定义类型和接口

• 相同点：都可以给对象指定类型
• 不同点：
  • interface：只能给对象指定类型，可以继承，可以多次定义合并
  • type：不仅可以给对象指定类型，可以为任意类型别名，同一名称只能定义一次

泛型

有些情况无法确定其中要使用的具体类型（返回值，参数，属性的类型），就可以使用泛型

function fn<T>(a: T): T {
  return a
}
let res1 = fn(10)
let res2 = fn<string>('hello')

function fn2<T, K>(a: T, b: K): T {
  console.log(b)
  return a
}
fn2<number, string>(10, 'hello')

interface MyInterface {
  length: number
}
function fn3<T extends MyInterface>(a: T): number {
  return a.length
}
fn3({length: 10})

class MyClass<T> {
  name: T
  constructor(name: T) {
    this.name = name
  }
}
const mc = new MyClass<string>('myClass')