typescript

131 阅读2分钟

TypeScript 相比于 JavaScript 具有以下优势:

  • 更好的可维护性和可读性
  • 引入了静态类型声明,不需要太多的注释和文档,大部分的函数看类型定义就知道如何使用了
  • 在编译阶段就能发现大部分因为变量类型导致的错误
  • js不支持强类型或静态类型,TS 支持。
  • TypeScript总是在编译时强调错误,而JavaScript在运行时指出错误。
  • ts 使用基于类的面向对象编程。

为什么会选择typescript

  • JavaScript所拥有的特性,TypeScript全部都是支持的,并且它紧随ECMAScript的标准,所以ES6、ES7、ES8等新语法标准,它都是支持的;
  • 并且在语言层面上,不仅仅增加了类型约束,而且包括一些语法的扩展,比如枚举类型(Enum)、元组类型(Tuple)等;
  • TypeScript在实现新特性的同时,总是保持和ES标准的同步甚至是领先;
  • 并且TypeScript最终会被编译成JavaScript代码,所以你并不需要担心它的兼容性问题,在编译时也不需要借助于Babel这样的工具;

安装ts

npm install -g typescript

ts文件运行,设置vscode自动编译

  • 运行tsc --init,创建tsconfig.json文件
  • 修改tsconfig.json文件,第15行,设置js 文件夹:"outDir":"./js/"
  • 设置vscode监视任务(通过vscode上的导航栏的终端,点击运行任务,typescript,tsc:监视tsconfig.json)

ts数据类型

基本数据类型:string Number Boolean Null undefined Symbol

// 字符串类型
let name:string = 'tom'
// 数值类型
let a:number = 18
// 布尔值类型
let a:boolean = true
// undefined、null
let a:undefined = undefined
let a:null = null
// 数组
let arr:string[] = ['test','tom']
let arr:Array<string> = ['tom','arraty']

新增类型:tuple元组、enum枚举、any任意类型、never、void

// 元组:就是一个已知元素数量 和 每个元素类型的数组,内部的元素类型不必相同
let tup:[string,number,boolean] = ['tom',12,true]
// 访问元组中的元素 和 长度
console.log(tup[0])
console.log(tup.length)
//枚举:用一组标识 来 代表数值。方便调用
enum Gender{
     boy = 1,
     girl = 2,
     unknown = 3
}
// void 代表没有类型,一般用在无返回值的函数
// never 代表不存在的值的类型,常用作为抛出异常或无限循环的函数返回类型

联合类型

表示取值可以为多种类型中的一种

let 变量名:变量类型1 | 变量类型2 = 值

class类

class Car {
// 属性
   name:string
   // 构造函数
   constructor(name:string){
   			this.name = name
   }
   // 方法
   run():string{
   		return `${this.name}`
   }
}

// 继承
class BMW extends Car{
  constructor(name:string){
     super(name)//初始化父类的构造函数
  }
}
var b :any = new BMW('BMW530')
console.log(b.run())