TS初体验

安装与运行

npm install -g typescript

tsc hello.ts

TS基本的几种数据类型

/**
 * 数据类型
 */
let idDone: boolean = false

let age: number = 20

let binaryNumber: number = 0b1111

let firstName: string = 'valzt'

let message: string = `Hello, ${firstName}, age is ${age}`

let u: undefined = undefined

let n: null = null

// undefined是所有类型的一个子类型
let num: number = undefined


/**
 * any类型和联合类型
 */
// any类型的值可以被赋值任意类型的值
let notSure: any = 4
notSure = 'maybe it is a string'
notSure = true
notSure.myName
notSure.getName()

// 联合类型
let numberOrString: number | string = 234
numberOrString = 'valzt'
numberOrString = true //报错

/**
 * Array 和 Tuple
 */
// 数组
let arrOfNumbers: number[] = [1, 2, 3, 4]  // 不允许数组中间出现其它类型的数据

// 元组  限定了数组元素的类型
let user: [string, number] = ['valzt', 20]

interface

/**
 * interface(定义Object类型)
 */

//  名称前面加一个I

interface IPerson {
  // 只读属性  类似于 const
  readonly id: number,
  name: string,
  // 可选属性
  age?: number
}

let valzt: IPerson = {
  id: 123,
  name: 'valzt',
  age: 20
}

valzt.id = 111  // 这里会报错

函数

/**
 * 函数
 */

//  传入的x为number 类型  y为number类型  返回的结果也为number类型
// 第三个参数为可选参数(可选参数只能放到参数最后)  可选: z?: number  默认值 z:number =10
function add(x: number, y: number, z?: number): number {
  if (typeof z === 'number') {
    return x + y + z
  } else {
    return x + y
  }
}

// 函数表达式写法
const add1 = function (x: number, y: number, z: number = 10): number {
  if (typeof z === 'number') {
    return x + y + z
  } else {
    return x + y
  }
}

// 函数表达式的值 会自动生成一个函数类型  如果将它赋值给其它类型 将会报错

const add2: string = add1  // 这里会报错
// 这里的箭头不是es6中的箭头函数,而是ts中声明函数类型返回值的一个方法
const add3: (x: number, y: number, z?: number) => number = add1  // 这里会报错

let result = add(1, 2)

ts中的类型推论

/**
 * ts中的类型推论
 */
// 变量首次赋值,会自动推论出变量类型,如果再次赋值其它类型 便会报错
let str = 'str'
str = 1

ts运行工具

# 安装
npm i -g ts-node

# 运行
ts-node hello.ts

类和对象

// 访问修饰符  
/**
 * public-- 默认的修饰 子类和对象都可以访问
 * private-- 只再类里面可以访问 子类和对象都访问不了
 * protected -- 只有子类可以访问
 * readonly -- 可以读取 但是不能被重新赋值
 * 
 * 静态属性 不需要实例化 可以直接在类上进行调用
 * static
 */
class Animal {
  public name: string
  // 静态属性
  static categories: string[] = ['mamal', 'bird']
  // 静态方法
  static isAnimal(a) {
    return a instanceof Animal
  }
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}
const snake = new Animal('lily')


// 静态属性输出
console.log(Animal.categories)
// 静态方法输出 判断 snake是否为Animal
console.log(Animal.isAnimal(snake))


// 私有变量的访问
console.log(snake.name)
snake.name = 'valzt'
console.log(snake.name)

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())

interfece抽象类的方法

// interface 抽象类的属性和方法

// 比如汽车类和手机类里面有个 音响开关的功能

// 比如汽车里面有音响开关和电池检测功能
// 手机只有音响开关的功能
interface Radio {
  switchRadio(): void
}

interface Battery {
  checkBatteryStatus()
}

interface RadioWithBattery extends Radio{
  checkBatteryStatus()
}

class Car implements RadioWithBattery {
  switchRadio() {

  }
  checkBatteryStatus() {

  }
}

class CellPhone implements Radio {
  switchRadio() {

  }
}

// class Car {
//   switchRadio() {

//   }
// }

// class CellPhone {
//   switchRadio() {

//   }
// }

枚举

/**
 * 枚举enums
 */

enum Direction {
  Up,
  Down,
  Left,
  Right
}

// 输出元素所在位置，从0开始
console.log(Direction.Up)  // 0
console.log(Direction.Down)  // 1

// 类似于数组，通过元素位置输出元素
console.log(Direction[0])  // Up
console.log(Direction[1])  // Down

/**
 * 给枚举项 手动赋值
 */

enum Direction1 {
  Up = 10,
  Down,
  Left,
  Right
}
// 手动赋值和，下一个枚举项 会随着前一个赋值的枚举项进行递增
console.log(Direction1.Up)  // 10
console.log(Direction1.Down)  // 11

// 常量枚举（提升性能）

const enum Direction2 {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}
const value = 'UP'
if (value === Direction2.Up) {
  console.log('go up')
}

泛型

• // 泛型：只指在定义接口和类的时候，不预先指定具体类型，在使用的时候在指定具体类型的一种特征

function echo<T>(arg: T): T {
  return arg
}

const result = echo('str')

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

const result1 = swap(['string', 123])
console.log(result1)

类型别名和类型断言

// 类型别名和类型断言
type PlusType = (x: number, y: number) => number

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

// const sum2: (x: number, y: number) => number = sum
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()
  }
}


// 类型断言
function getLength(input: string | number): number {
  // const str = input as String
  // if (str.length) {
  //   return str.length
  // } else {
  //   const number = input as Number
  //   return number.toString().length
  // }
  if ((<string>input).length) {
    return (<string>input).length
  } else {
    return input.toString().length
  }
}