TypeScript基础学习

基础类型

let isDone: boolean = true

let age: number = 20

let binaryNumber: number = 0b1111 // 支持二进制或八进制

let fistName: string = 'YoLinDeng'

let u: undefined = undefined

let n: null = null

let num: number = undefined // 说明undefined和null类型是所以类型的子类型

null和undefined的区别
null表示“没有对象”，即该处不该有值

• 1）作为函数的参数，表示该函数的参数不是对象
• 2）作为对象原型链的终点

undefined表示缺少值，就是此处应该有值，但是还没有定义

• 变量被声明了，但没有赋值时，就等于undefined。
• 调用函数时，应该提供的参数没有提供，该参数等于undefined。
• 对象没有赋值的属性，该属性的值为undefined。
• 函数没有返回值时，默认返回undefined。

any类型和联合类型

let notSure: any = 1// 有明确类型的时候避免使用any类型，没有代码提示以及校验

let numberOrString: number | string = 123
numberOrString = 'abc'

Array 和 Tuple（元组）

// 定义数组
let arrOfNumbers: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2, 3]

// 定义元组,限定了一定数据类型的数组
let user: [string, number] = ['YoLinDeng', 20]

interface(接口)

• 对对象的形状进行描述
• 对类进行抽象
• Duck Typing(鸭子类型)

interface Person {
    readonly id: number; // 只读
    name: string;
    age?: number; // 可选
}

let yoLin: Person {
    id: 1,
    name: 'YoLinDeng'
}

函数和类型推断

function add(x: number, y: number, z?: number): number {
    if (typeof z === 'number') {
        return x + y + z
    } else {
        return x + y  
    }
}
let result = add(1, 2, 3)

// 函数表达式
const add = function(x: number, y: number, z?: number): number {
    if (typeof z === 'number') {
        return x + y + z
    } else {
        return x + y  
    }
}
const add2 = (x: number, y: number, z?: number) => number = add

当我们没有指定类型的时候，ts的complier会给我推断出一个类型

类Class

类(Class)：定义了一切事物的抽象特点
对象（Object）:类的实例
面向对象（OOP）:三大特征：封装，继承，多态

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

const snake = new Animal('liLy')
console.log(snake.run())

class Dog extends Animal {
  bark() {
    return `${this.name} is barking`
  }
}

const xiaobao = new Dog('xiaobao')
console.log(xiaobao.run())
console.log(xiaobao.bark())

class Cat extends Animal {
  constructor(name) {
    super(name)
    console.log(this.name)
  }
  run() {
    return `Meow,${super.run()}`
  }
}

const maomao = new Cat('maomao')
console.log(maomao.run())

修饰符：public（公有的）、private（私有的）、
protected(只有自己和子类可以访问)、readonly（只读）、static（静态，不需要实例化，可以在类上直接调用）

类和接口：
使用interface和implements抽象和验证类的属性和方法，对类的一部分内容进行抽象。
将特性提取成接口，使用implements来实现,像一种契约，定义和约束object的样子。

interface Radio {
  switchRadio(): void;
}
interface Battery {
  checkBatteryStatus(): void;
}
interface RadioWithBattery extends Radio {
  checkBatteryStatus(): void;
}
class Car implements RadioWithBattery {
  switchRadio() {

  }
  checkBatteryStatus() {}
}

class CellPhone implements RadioWithBattery {
  switchRadio() {

  }
  checkBatteryStatus() {

  }
}

Enum枚举

// 常量枚举, 提升性能，不会编译成js代码，只有常量值才可以进行常量枚举，计算值不行。
const enum Direction1 {
  left,
  right,
  top,
  bottom
}
enum Direction2 {
  left = 'LEFT',
  right = 'RIGHT',
  top = 'TOP',
  bottom = 'BOTTOM'
}
console.log(Direction1.left)
console.log(Direction1[0])
console.log(Direction2.left === 'LEFT')

泛型

在定义函数接口或类的时候，先不指定具体类型，在使用的时候才指定。

function echo<T>(arg: T): T {
  return arg
}
const result1: number = echo(123)
const result2: string = echo('string')

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

const result3 =  swap(['string', 123])

约束泛型
使用extends继承接口进行约束

interface IWithLength {
  length: number
}

function echoWithLength<T extends IWithLength>(arg: T): T {
  console.log(arg.length)
  return arg
}
const str = echoWithLength('str')
const obj = echoWithLength({ length: 10 })
const arr = echoWithLength([1, 2, 3])

泛型在类中的使用

class Queue<T> {
  private data = []
  push(item: T) {
    return this.data.push(item)
  }
  pop(): T {
    return this.data.shift()
  }
}
const queue = new Queue<number>()
queue.push(1)
console.log(queue.pop().toFixed())

接口interface中使用泛型

interface KeyPair<T, U> {
  key: T;
  value: U;
}
let kp1: KeyPair<number, string> = { key: 123, value: '123'}
let kp2: KeyPair<string, number> = { key: 'str', value: 123}

使用泛型定义数组

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

interface描述函数

interface IPlus<T> {
    (a: T, b: T): number
}
function plus(a: number, b: number): number {
    return a + b;
}
function connect(a: string, b: string): string {
    return a + b
}
const a: IPlus<number> = plus
const b: IPlus<string> = connect

类型别名和类型断言

type aliases

type PlusType = (x: number, y: number) => number
function sum(x: number, y: number): number {
    return x + y
}
const sum2: PlusType = sum

// 联合类型中使用类型别名
type NameResolver = () => string
type NameOrResolver = string | NameResolver
function getName(n: NameOrResolver): string {
    if (typeof n === 'string') {
        return n
    } else {
        return n()
    }
}

type assertion 断言

function getLength(input: number | string): number {
    const str = input as String
    // or
    <string>input
}

声明文件

创建.d.ts文件，例如jQuery.d.ts

declare var Jquery: (selector: string) => any

再tsconfig.json中写配置

{
    "include": ["**/*"] //编译当前文件夹下的所有文件
}