Typescript学习1

Typescript学习

数据类型

Typescript中为了使编写的代码更规范，更有利于维护，增加类型检验

• 布尔类型（boolean） true or false

let flag:boolean = true 
flag = false

• 数字类型（number）

• 字符串类型（string）

• 数组类型（array） 在数组中只能有一种类型

// 第一种方法  可定义 数字类型，字符串类型
let arr: number[] = [1, 2, 3, 5]
console.log(arr)

// 第二种方法 泛型
let arr2: Array<string> = ["php", "java", "javascript"]
console.log(arr2)

// 第三种方式

let arr3: any[] = ['123', 1, 'php']

• 元组类型（tuple） 数组的一种

// 要保证数据类型的顺序一致
let  arr:[string,number,boolean] = ['ts',1,true]
console.log(arr)

• 枚举类型（enum）标识状态和固定值

enum flag {
  success = 1,
  error = -1,
}
let f: flag = flag.success
console.log(f)

• 任意类型（any） 与ES5中的无属性一样，可以定义任意一个类型

• null和undefined

// 一个元素可以设置多个类型，防止浏览器报错
let num: number | null | undefined
num = 11 // null or undefined
console.log(num)

• 空类型（void）

function run(): void {
  console.log("run")
}
run()

function run1(): number {
  console.log("run")
  return 123
}
run1()

• never类型 (包括null 和 undefinded 的子类型) 代表重来不会出现的值

  表示其他类型，常用于接受错误

let a: undefined
a = undefined
let b: null
b = null

a = (() => {
  throw new Error("错误")
})()

---

函数定义

相比较以往的js语法，ts中增加了返回值类型强制控制，严格规范代码

函数声明

function run(): string {
  return "1223"
}

匿名函数表达式

let run1 = function (): string {
  return "123"
}
run()

函数参数

function fun(num: number, str: string): string {
  console.log(`${num}----${str}`)
  return "123"
}
fun(1, "sss")

方法默认可选参数

// ES5中方法的实参和形参可以不一致，但在TS中形参和实参要保持一直，包括类型

如果需要不一样，必须要通过配置可选参数,在参数上添加？符号，可选参数必须配置到参数的最后面

默认参数可直接赋值在形参中

function getUserInfo(name: string, age?: number=20): void {
  if (age) {
    console.log(`${name}---${age}`)
  } else {
    console.log(`${name}---年龄不详`)
  }
}
getUserInfo("zas")  // zas---20
getUserInfo("zas",30)  // zas---30

剩余参数

function sum(...result: number[]): number {
  return result.reduce((first, second) => {
    return (first += second)
  })
}

console.log(sum(1, 12, 2))

---

class 类

ES6 中的类

class User {
  constructor(name, pass) {
    ;(this.name = name), (this.pass = pass)
  }
  showName() {
    console.log(this.name)
  }
  showPass() {
    console.log(this.pass)
  }
}

class VipUser extends User {
  constructor(name, pass, level) {
    super(name, pass)
    this.level = level
  }
  showLevel() {
    console.log(this.level)
  }
}

let v1 = new VipUser("blue", "123", 3)
v1.showName()
v1.showPass()
v1.showLevel()

---

Tyscript中的class

class Person {
  name: string
  constructor(name: string) {
    this.name = name
  }
  getName(): string {
    return this.name
  }
  setName(name: string): void {
    this.name = name
  }
  work(): string {
    return `${this.name}父类的工作`
  }
}

class Children extends Person {
  constructor(name: string) {
    super(name)
  }
  work(): string {
    return `${this.name}在work`
  }
}
let person = new Children("li")
person.setName("wang")
console.log(person.work())

类中的修饰符

• public ：公有， 在类中，字类，类外块级作用域外可以被访问
• protected：被保护的， 在类中和字类能被方位，在块级作用域外不能访问
• private：私有的 ，只能在本类中可以访问，类外和子类无法访问

class Person {
  protected name: string
  constructor(name: string) {
    this.name = name
  }
  getName(): string {
    return this.name
  }
  setName(name: string): void {
    this.name = name
  }
  work(): string {
    return `${this.name}父类的工作`
  }
}

class Children extends Person {
  constructor(name: string) {
    super(name)
  }
  work(): string {
    return `${this.name}在work`
  }
}
let person = new Children("li")
person.setName("wang")
console.log(person.work()) 

console.log(person.name)   // protected 和private 报错

---

静态方法和静态属性

• ES5中的静态方法和属性

function Person(name, age) {
  this.name = name
  this.age = age
  this.fun = function () {   // 实例方法  只能通过New 一个新的对象可调用
    console.log(this.name, this.age)
  }
}
Person.age = 11   // 静态属性
Person.staticFun = function () {  // 静态方法 静态方法中只能访问静态属性，不能访问类中的属性
  console.log(`${this.name}----${this.age}`)
}

let person = new Person("LISI", 12)
person.fun()  // 调用类中的实例方法
Person.staticFun()  //  静态方法不能被实例对象调用

• Ts中的静态方法和属性

class Person {
  public name: string
  static str: string = "staticString"
  constructor(name: string) {
    this.name = name
  }
  instanceFun(): void {
    console.log("这里是实例方法")
  }
  // 静态方法
  static fun(): void {   // 静态方法不能访问类中的属性，只能访问静态属性
    console.log("这是静态方法")
  }
}

let person = new Person("里斯")
person.instanceFun()
Person.fun()
console.log(person.name)
console.log(Person.str)

---

多态

说明：父类定义一个方法不去实现，让子类去实现，每一个的子类有不同的变现

class Animal {
  public name: string
  constructor(name: string) {
    this.name = name
  }
  eat() {}
}

class Dog extends Animal {
  constructor(name: string) {
    super(name)
  }
  eat() {
    console.log(`${this.name}吃骨头`)
  }
}
class Cat extends Animal {
  constructor(name: string) {
    super(name)
  }
  eat() {
    console.log(`${this.name}吃老鼠`)
  }
}

let dog = new Dog("bone")
dog.eat()
let cat = new Cat("tom")
cat.eat()

---