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)

感觉跟java还挺像?


UyoAhz