看完这篇，TypeScript轻松上手

徐小懒
999 阅读2分钟

安装TypeScript环境

 npm install typescript -g
 npm install ts-node -g

建立一个index.ts文件

 console.log(Hello TypeScript)
 ts-node index.ts

不出意外会打印出“Hello TypeScript”

如果出意外的话我只能说我用的是windows CMD命令里去使用的

TypeScript变量类型

TypeScript 最大的一个特点就是变量是强类型的，也就是说，在声明变量的时候，我们必须给他一个类型。
TypeScript中的数据类型有：
  • Undefined :
  • Number:数值类型;
  • string : 字符串类型;
  • Boolean: 布尔类型；
  • enum：枚举类型；
  • any : 任意类型；
  • void：空类型；
  • Array : 数组类型;
  • Tuple : 元祖类型；
  • Null ：空类型；
举🌰：
 let age:number = 18
 console.log(`我才${age}岁`)
聪慧的你们一定会举一反三的！

TypeScript函数

定义函数：
 function notUpdate(age:number):string{        
         return `别在更新了，我学不动了，我才${age}岁` 
 }
定义函数的时候我提前给参数设置了类型的，当然返回值我也是设置了类型的
参数可传可不传型的函数：
 function notUpdate(name:string,excitation?:string):string{
    if(excitation != undefined){
       return `我是海贼${name},是要成为${excitation}的`
    }
         return `我是海贼,王${name}` 
 }
类：
类是对象具体事务的一个抽象，对象是类的具体表现。
举个🌰:
有人给你介绍对象，会问你的要求。那么，你的要求是：身高165以上，体型偏瘦，长头发，大眼睛。从事正当稳定的工作，会做饭等等。这些要求就是对你心中理想伴侣的一个抽象，就是类。介绍人按照你的要求给你找的这些女生，就是类的实例，就是对象。
看看下面的代码： 
 class Zhaoduixiang{
     name:string;
     age:number;
     constructor(name:string,age:number){
         this.name=name;
         this.age=age;
     }
     say(){
         console.log(`你好,我叫${this.name},今年${this.age}岁，我是1号女嘉宾!`)
     }
 }
 let duixiang:Zhaoduixiang = new Zhaoduixiang('小琳',18)
 console.log(duixiang)
 duixiang.say()
类的修饰符：
  • 访问修饰符分为：public、protected、private
  • public:公有修饰符，可以在类内或者类外使用public修饰的属性或者行为，默认修饰符。
  • protected:受保护的修饰符，可以本类和子类中使用protected修饰的属性和行为。
  • private : 私有修饰符，只可以在类内使用private修饰的属性和行为。
  • 去用刚刚的相亲的🌰吧：
class Zhaoduixiang{
    public sex:string
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.name=name
        this.age=age
    }
    public sayFirst(){
        console.log(`你好,我叫${this.name},今年${this.age}岁，我是1号女嘉宾!`)
    }

    protected sayNext(){
        console.log('我看上你了！我要给你生娃！')
    }
}
let duixiang:Zhaoduixiang = new Zhaoduixiang('小琳',18) console.log(duixiang.sex)
console.log(duixiang.name)   //报错
console.log(duixiang.age)    //报错
duixiang.sayHello()
duixiang.sayLove()    //报错
类的继承和重写：
继承：允许我们创建一个类（子类），从已有的类（父类）上继承所有的属性和方法，子类可以新建父类中没有的属性和方法。

重写：就是在子类中重写父类的方法。

class Lizi{
    public name:string
    public age:number
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }
    public say(){
        console.log(`我叫${this.name},今年${this.age}`)
    }
}
//继承extends
class Skill extends Lizi{
    public skills:string
	constructor(name:string,age:number,skills:string){
		super(name,age)
		this.skills=skills
	}
    public saySkill(){
        console.log(`我叫${this.name},今年${this.age},是一个${this.skills}`)
    }
    //方法重写
    public say(){
        console.log('我重写了方法')
    }
}
let skill:Skill=new Skill('路飞',18,'海贼')
skill.saySkill()

TypeScript接口

接口：为你命名的变量定义一个类型，关键字：interface

🌰：

interface LiziFace{
    name:string
    age:number
    sex?:string
}
let LiziVal:LiziFace={name:'娜美',age:18,sex:'女'}
console.log(LiziVal)

class Lizi implements LiziFace{
    public name:string
    public age:number
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }
    public say(){
        console.log(`我叫${this.name},今年${this.age}`)
    }
}
let lizi:Lizi=new Lizi('路飞',18)
lizi.say()

TypeScript命名空间

随着更多的验证器的加入，我们需要一种手段来组织代码，便于在记录它们类型的同时还不用担心与其他的对象产生命名冲突。

🌰：

namespace name1{
    export class Lizi{
        public name:string='name1的name'
        talk(){
            console.log(`我是${this.name}`)
        }
    }
}

namespace name2{
    export class Lizi{
        public name:string='name2的name'
        talk(){
            console.log(`我是${this.name}`)
        }
    }
}
let lizi1:name1.Lizi   = new name1.Lizi()
let lizi2:name2.Lizi   = new name2.Lizi()
lizi1.talk()
lizi2.talk()

在学习typescript的同时还复习了基础，很开心的一天，有看文章的小伙伴，发现什么错误的地方，还望告知，带我一起进步！

avatar
文章
阅读
粉丝