【TypeScript】快速掌握TypeScript的基本语法

前言： 本篇主要通过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)//调用工具方法