day02

2021-02-02 | 阅读：

类型

一、字面量类型

let str1 = 'Hello TS'

const str2: 'Hello TS' = 'Hello TS'

let age: 18 = 18

function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {
    console.log(direction)
}

// left
changeDirection('left')

二、枚举类型

1、数字类型

enum Direction {
  Up,
  Down,
  Left = 8,
  Right
}

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 0
changeDirection(Direction.Up)
// 1
changeDirection(Direction.Down)
// 8
changeDirection(Direction.Left)
// 9
changeDirection(Direction.Right)

2、字符串类型

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

function changeDirection(direction: Direction) {
  console.log(direction)
}
// UP
changeDirection(Direction.Up)

3、枚举的本质

// TS转为js代码查看枚举的本质：就是通过自执行函数生成了一个js对象
var Direction;
(function (Direction) {
    Direction["Up"] = "UP";
    Direction["Down"] = "DOWN";
    Direction["Left"] = "LEFT";
    Direction["Right"] = "RIGHT";
})(Direction || (Direction = {}));

function changeDirection(direction) { 
  console.log(direction)
}

// UP
changeDirection(Direction.Up);

三、any类型

指定为any类型，就类似是js代码了，缺少了类型检查，不提倡

let obj: any = { x: 0 }

// 访问不存在的属性 或者 赋值
obj.aaa
obj.aaa = 10

// 当作函数调用
obj()

// 赋值给其他类型的变量
let n: number = obj

// --

let a
a = 1
a = ''
a()

// --

function add(num1, num2) {}
add(1, 2)
add(1, '2')
add(1, false)

typeof的两种用法

判断变量类型 typeof str

console.log(typeof 'Hello TS') // string

用在:后边用于获取类型 a: typeof num

let p = { x: 1, y: 2 }

function formatPoint(point: typeof p) {

}

class的用法

一、类介绍

1、类

class Person {
  age: number
  gender = '男'
  // gender: string = '男'
}

const p = new Person()
p.age
p.gender

2、构造函数

class Person {
  age: number
  gender: string

  // 实例方法
  say(str:string) {
    console.log(str)
  }

  // 构造函数：初始化属性实例化对象：constructor
  constructor(age: number, gender: string) {
    this.age = age
    this.gender = gender
  }
}

const p = new Person(18, '男')
console.log(p.age, p.gender)
p.say('hello world!')

二、继承

extends 继承父类，js也支持

class Animal {
  move() {
    console.log('走两步')
  }
}

class Dog extends Animal {
  name = '二哈'

  bark() {
    console.log('旺旺！')
  }
}

const d = new Dog()
d.move()
d.bark()
console.log(d.name)

三、实现接口

implement 实现接口(仅ts提供)

interface Singale {
  sing(): void
  name: string
}

class Person implements Singale {
  name = 'jack'

  sing() {
    console.log('你是我的小呀小苹果')
  }
}

四、修饰符

修饰符: public protect private

class Animal {
  // private 只有自己内部可以访问
  private __run__() {
    console.log('__run__')
  }

  // protected 自己和子类内部访问
  protected move() {
    console.log('move')
  }

  // public 默认。自己和子类内部，外部都可以访问
  public run() {
    console.log('run')
  }
}

const a = new Animal()
a.run()

五、只读

属性修饰符：readonly

class Person {
  // 只读属性
  // 注意：只要是 readonly 来修饰的属性，必须手动提供明确的类型
  readonly age: number = 18

  // 构造函数内可以赋值  
  constructor(age: number) {
    this.age = age
  }

  // 错误演示：只能修饰属性不能修饰方法
  readonly setAge() {
  }
}

interface IPerson {
  readonly name: string
}

let obj: IPerson = {
  name: 'jack'
}

// 报错：Cannot assign to 'name' because it is a read-only property.
obj.name = 'tom'

let obj: { readonly name: string } = {
  name: 'jack'
}

// 报错：Cannot assign to 'name' because it is a read-only property.
obj.name = 'rose'

行者常至，为者常成！

JHHK