初识TypeScript

TypeScript 与 JavaScript 区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改

TypeScript 设计目标是开发大型应用，可以通过tsc编译为纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript 是一种给 JavaScript 添加特性的语言扩展。感觉最主要的变化就是类型，类型批注、接口、枚举、泛型、元组等。

元组

元组 tuple 需要声明每个元素的类型的数组，不可增加或减少元素，在知道数据长度和类型时可使用元组。

let t: [string, number, boolean] = ["1", 1, true]
console.log(t)

数组

// 类型声明两种方法  :Array<any>    :number[]
let myarr: Array<any> = [5]
let arr: number[] = [1, 2, 3]

枚举类型

enum Color {
  Red = 2,
  Green,
  Blue,
}
let c: Color = Color.Red // 2

null undefined

console.log(typeof null) // object
console.log(typeof undefined) // undefined

函数

//  函数需要加一些参数类型及返回值类型  可设置默认值
let mySum = function (x: number = 1, y: number): number {
  return x + y
}

接口和类

// 接口 定义对象的样子
interface Person {
  readonly name: string // 只读
  age?: number // 可选
  [propName: string]: any // 索引签名  可定义任意多个属性和类型
}
let p: Person = {
  firstName: "wang",
  lastName: "ying",
  name: "p",
  // age: 18,
  time: "asd",
}

// 类

class Animal {
  // publis   默认  子类及实例均可访问
  // protected 子类可访问 实例不可
  // private 子类实例均不可访问

  // readonly  只读属性

  // 静态属性  用Animal.staticPro 获取
  static staticPro = 111

  public name: string = ""
  private age: number = 18
  public sayName() {
    console.log(this.name, this.age)
  }

  constructor(name: string) {
    this.name = name
  }
  // 使用时在类上直接调用  Animal.isAnimal(xxx)
  static isAnimal(a: any) {
    return a instanceof Animal
  }
  sayHello(): string {
    console.log(this, "this")
    return this.name + " hello"
  }
  get animalName() {
    return this.name
  }
  set animalName(name: string) {
    this.name = name
  }
}

// 类的继承
class Dog extends Animal {
  constructor(public name: string) {
    super(name)
  }
  // 对父类函数重写
  sayHello(): string {
    console.log(this.name)
    return ""
  }
}

// 抽象类 Person2
// 抽象类 只能声明类， 不可进行实例化， 子类可通过继承实现
abstract class Person {
  public abstract sayHello(): void // 抽象方法
  public getProps() {
    // 非抽象方法
    return "props"
  }
}

// 继承抽象类
class Teacher extends Person {
  name: string
  constructor(name: string) {
    super()
    this.name = name
  }
  sayHello(): void {}
}

5 分钟上手 TypeScript · TypeScript 中文网 · TypeScript——JavaScript 的超集 (tslang.cn)