版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
typescript 使用教程详解
方便于学习使用，我们先搭建一个ts的转换demo，方便一下学习
一、安装
npm install -g typescript
浏览器无法识别 ts 文件的代码，所以需要转换成js
二、编译
tsc xxx.ts
这样比较麻烦所以我们要配置自动编译
三、自动编译
1. vscode
tsc --init 生成tsconfig.json 修改输出地址， "outDir": "./js //输出地址
点击 终端（或者叫任务）》选择运行任务 》选择 tsc 监视 tscconfig.json
2.HBuilder
- 点击工具，点击插件安装
- d点击下方浏览Eclipse插件市场，搜索typescript插件进行安装
- 安装完成后重启编译器，点击菜单栏 工具-选项 选择编译ts文件
- 在你的项目上右键点击–配置–Enable tyoeScript Builder, 之后你再保持ts文章是会自动编译对应的js文件
四、Typescript中的数据类型
/*
typescript 中为了是编写代码更加规范，更有利于为何，增加了类型校验
写ts代码必须指定类型
*/
//布尔类型（boolean）
var flag :boolean = true
//数字类型(number)
var num :number = 123
//字符串类型（string）
var str :string = '123'
//数组类型（array） ts 中定义数组有两种方式
//第一种 定义数组定义所有元数据都为number
var arr:number[] = [11,222,33]
//第二种
var arr2:Array<number> = [11,22,33]
//第三种
var arr3:any[]=[232,'23']
//元组类型（tuple） 属于数组的一种,指定数组中每一个元的类型
var arr4:[number,string] = [123,'string']
//枚举类型（enum）
/**
* enum 枚举名{
* 标示符[=整型常数]，
* 标示符[=整型常数]，
* .....
* }
*/
enum Flag {
success=1,
error=2,
'null'
}
let s:Flag = Flag.success
let n:Flag = Flag.null //如果不赋值默为下标 2如果前面元已经赋值，默认加1
//任意类型（any）
var any:any = 123
//null 和 undefind 其他（never类型）数据类型的子类型
var und:undefined
var unde : number | undefined //定义多个类型
//void类型 没有任何类型一般用于定义方法的时候方法没有返回值
function run():void{
console.log('run')
} //表示没有任何返回值
run()
//如果有返回值，就是返回值的类型
function run2():number {
return 123
}
run2()
//never类型：是其他类型（包括努力l和undefind）的子类型，代表从不会出现的值
//这意味着声明never的变量只能被never类型所赋值
var a:undefined
a = undefined
var b:null
b = null
var c:never //基本不用
//a = 123 //错误写法
//这种就属于从来不会出现的值
c = (()=>{
throw new Error('错误')
})()
五、ts中的类
// ts中定义类
class person{
name:string; // 属性 前面省略了public关键词
constructor(n:string){//构造函数 实例化类的时候出发的方法
this.name = n;
}
run():void{
alert(this.name)
}
}
var p = new person('张三')
//2. ts中实现继承 extends super
class TsExtends {
name:string;
constructor(name:string){
this.name = name
}
run():string{
return`${this.name}在运动`
}
}
class Web extends TsExtends{
constructor(name:string){
super(name) //将this指向父类
}
}
var w = new Web('李四')
// 3. 类里面的修饰符 typescript；里面定义属性的时候给我们提供了三种修饰符
/**
* （这些修饰符在ts语法中是不允许的，但是编译成js后是可以访问的）
* public :公有在类里面、子类、 类外面都可以访问
* protected： 保护类型 在类里面、子类都可以访问、在类外部没法访问
* private：私有 在类里面可以访问，子类、类外部都没发访问
* 属性不加的话，默认为public
*/
class TsExtends1 {
public name:string; //公有属性
// protected name:string;
// private name:string;
constructor(name:string){
this.name = name
}
run():string{
return`${this.name}在运动`
}
}
class Web1 extends TsExtends1{
constructor(name:string){
super(name) //将this指向父类
}
work():string{
return `${this.name}在工作`
}
}
var w1 = new Web1('李四')
var T1 = new TsExtends1('张三')
console.log(T1.name)//在类外面调用
console.log(w1.work()) //在子类调用
console.log(T1.run()) //在类中调用
//4. 静态属性，静态方法
//静态方法和属性可以直接用类名调用
//实例方法和属性必须要实例化后才能调用
class StaticPer{
public name:string;//实例属性
static sex:string ="男";//静态属性
constructor(name:string){
this.name = name
}
run():string{ //实例方法
return`${this.name}在运动`
}
static print(){ //静态方法
// console.log(this.name) //无法调用实例属性
console.log('静态方法'+StaticPer.sex)
}
}
//静态方法可以直接用类名调用
StaticPer.print()
//实例方法必须要实例化后才能调用
var S = new StaticPer('李四')
console.log(S.run())
console.log( StaticPer.sex) //外部调用静态属性
//5.多态：父类定义一个方法不去实现，让继承他的子类去实现 每一个子类有不同的表现
// 多态属于继承
//相当于将父类的方法重写，父类可以不定义
class Animal{
name:string;
constructor(name:string){
this.name = name
}
eat(){
console.log('吃的方法')
}
}
class Cat extends Animal{
constructor(name:string){
super(name)
}
eat():string{ //具体实现方法
return this.name+'吃鱼'
}
}
var C = new Cat('小猫')
console.log(C.eat())
//6. typescript中的抽象类
// 他是提供其他类继承的基类，不能直接被实例化。
// 用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现且必须在子类中实现
// abstract抽象方法只能放在抽象类中
// 抽象类和抽象方用来定义标准，标准的Animals这个类要求他的子类必须包含eat方法
abstract class Animals{
name:string;
constructor(name:any){
this.name = name
}
abstract eat():any;//在子类必须实现，
}
// var a = new Animals()//错误写法，无法直接实例化
class Dog extends Animals{
constructor(name:any){
super(name)
}
//抽象类的子类必须实现抽象类里面的抽象方法
eat(){
}
}
六、typescript中的接口
/**
* 接口的作用，在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用接
* 接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，他只规定这批类里面必须提供
* 某些方法，提供这些方法的类就可以满足实际需要，typescript中的接口类似于java，同事还增加了更灵活的接口类型，包括属性、函数、
* 可索引和类等。
* 接口是定义的规范，可以复用
* 关键字 interface
*/
// 1. 属性接口 对json的约束
//ts定义方法只能对单一，进行约束
function printLabel(labelInfo: {
label: string
}): void {
console.log(labelInfo.label)
}
// printLabel({name:"张三"})//错误写法
printLabel({
label: '李四'
}) //正确写法 传入参数必须有label
// 属性接口 对批量方法传人参数进行约束
interface FullName {
firstName: string; //注意以;结束
secondName: string;
}
function printNmae(info: FullName) {
//必须传入对象 firstName secondName
console.log(info.firstName + info.secondName)
//info.age,虽然传人了，但是在FullName中未定义，报错，所以严格按照接口要求
}
//printNmae({firstName:'firstName'}) //错误，约束必须传入对象 firstName secondName
// printNmae({
// firstName:'张',
// secondName:'三' ,
// age:20 //报错 这种写法,传入值只能包含接口定义的属性
// })
//这样定义在外部就可以传入接口写未定义的属性，但是不能在方法中使用，因为未定义该属性
var obj = { //这里的obj为interface类型，不能定义为object
firstName: '张',
secondName: '三',
age: 20
}
printNmae(obj)
//接口可选属性
interface FullName2 {
firstName: string;
lastName ? : string; //可选属性
}
function printNmae2(info: FullName2) {
console.log(info.firstName + info.lastName) //张 undefined
}
printNmae2({
firstName: '张'
})
/*2. 函数类型接口：对方法传人的参数 以及返回值进行约束 */
// 加密的函数类型接口
interface encrypt{
(key:string,value:string):string
}
//模拟一下
var md5:encrypt = function(key:string,value:string):string{
//模拟进行了加密算法
return key+value
}
console.log(md5('123','456'))
/* 可索引接口， 数组，对象的约束（不常用） */
interface UserArr{
[index:number]:string
}
var ar:UserArr=['aaa','bbb']
console.log(ar[0])
/* 可索引接口 对对象的约束 */
interface UserObj{
[index:string] :string
}
var obj1 :UserObj = {name:'张三',age:'20'}
/* 类类型接口： 对类的约束 和 抽象类有点相似 */
interface Anima{
name: string;
eat(str:string):void;
}
class Pig implements Anima{
name:string;
constructor(name:string){
this.name = name;
}
eat(str:string){
console.log(this.name+str)
}
}
var pig = new Pig('小猪')
pig.eat('粮食')
/*接口扩展：接口可以继承接口 */
interface Props{
eat():void;
}
//继承接口
interface Pepole extends Props{
work():void;
}
//待继承的类
class Programmer{
public name:string;
constructor (name:string){
this.name = name
}
coding(code:string){
console.log(this.name+code)
}
}
class Webs extends Programmer implements Pepole{
constructor (name:string){
super(name)
this.name = name
}
eat(){
console.log(this.name+'吃饭')
}
work(){
console.log(this.name+"写代码")
}
}
var webs = new Webs('小王')
webs.eat()
webs.work()
webs.coding('写ts')
e.log(this.name+code)
}
}
class Webs extends Programmer implements Pepole{
constructor (name:string){
super(name)
this.name = name
}
eat(){
console.log(this.name+'吃饭')
}
work(){
console.log(this.name+"写代码")
}
}
var webs = new Webs('小王')
webs.eat()
webs.work()
webs.coding('写ts')