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())