版权声明:本文为博主原创文章,遵循 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')