前言: 本篇主要通过6个模块快速掌握TypeScript
的基本语法,6个模块分别为:变量声明,条件控制、循环迭代、函数、类和接口、模块开发。
变量声明
TypeScript
在JavaScript
的基础上加入了静态类型检查功能,因此每一个变量都有固定的数据类型。
关键字:
let:变量;const:常量;
数据类型
string:字符串,可以用单引号或者双引号
let name :string = 'hello world'
number:数值,整数、浮点数都可以
let age:number = 21
boolean:布尔:值为true或者false
let isStart :boolean= true
any:不确定类型,可以任意类型
let a :any = "Tony"
union:联合类型,可以是多个指定类型的一种
let u :number|string|boolean = 'rose'
Object:对象,键值对
let person = {name:'Tony',age:29}
console.log(person.name)
console.log(person['name'])
Array:数组,元素可以是任意其他类型
let nameList:Array<string> = ['Tony',"Jack"]
let ageList:number[] = [21,10]
条件控制
if…else 条件判断
if的使用与其他语法的使用相同;if(…){} else if(…){} else {}
注:在
TypeScript
中,空字符串,数字0、null
、undefined
都被认为是false
,其他值则为true
switch 条件判断
switch
(…)填写判断条件;case
XX :XX表示判断条件可能的结果,
switch(sex){//判断条件
case 'A':{//可能出现的结果
...
break//标志该结果的事件处理结束,
}
case 'B':
case 'C':{
...//'A','B'的处理事件
break
}
default:{//以上结果都不是的情况
...
break
}
}
循环迭代
普通for循环
for(let i=1;i<=10;i++){
console.log(i)
}
for in 迭代器,遍历得到数组角标
let persons :string[] = ['A','B']//定义数组
for(const i in persons){
console.log(name[i])
}
for of 迭代器,遍历得到数组元素
for(const name of persons){
console.log(name)
}
while
let i = 1;
while(i <=10){
console.log(i)
i++
}
//1 2 3 4 5 6 7 8 9 10
函数
TypeScript
通常利用function
关键字声明函数,并且支持可选参数、默认参数、箭头函数等特殊语法
无返回值函数,返回值void
可以省略
function sayHello(name:string): void {
}
sayHell("Tom")
有返回值函数,返回值填写返回类型
function sum(x:number,y:number): number {
return x + y
}
let result = sum(10,2)
箭头函数
let sayGood = (name: string) =>{
console.log('你好'+name)
}
sayGood('Jack')
可选参数:在参数名后加?
function sayHello(name?: string) {
//判断参数是否有值
name = name ? name: '某某'
}
// 调用函数
sayHello('Jack')
sayHello()
默认参数 :在参数后面=
接收默认值
function sayHello(name: string = 'XXX') {
}
类和接口
TypeScript具备面向对象编程的基本语法,例如interface、class、enum等。也具备封装、继承、多态等面向对象基本特征。
枚举enum
enum Msg{
HI = 'Hi',
HELLO = 'hello'
}
接口interface
//定义接口,抽象方法接收枚举参数
interface A{
say(msg: Msg):void //声明不实现
}
//实现接口
class B implements A {
say(msg: Msg): void {
console.log(msg + ',I am B')
}
}
//初始化对象
let a: A = new B()
//调用方法:传递枚举参数
a.say(Msg.HI)
类class
//定义长方形
class Rectangle {
//成员变量
private width: number
private height: number
//构造函数
constructor(width: number, height: number) {
this.width = width
this.height = height
}
// 成员方法
public area(): number{
...
}
}
// 定义正方形 继承 长方形类
class Square extends Rectangle {
constructor(side:number){
// 调用父类构造
super(side,side)
}
}
模块开发
应用复杂时,可以把通用功能抽取到单独的ts文件中,每个文件都是一个模块(module
)。模块可以相互加载,提高代码复用性。
//定义类,并通过export导出
export class Rectangle{
...
}
//定义工具方法,并通过export导出
export function area(rec:Rectangle): number{
...
}
// 使用方式:在另一个文件中:
// 通过import语法导入,from后面写文件的地址
import {Rectangle, area} from '../rectangle'
let r = new Rectangle(10, 19)//创建类对象
area(r)//调用工具方法