TypeScript基础语法

一.变量声明

TypeScript在JavaScript的基础上加入了静态类型检查的功能，因此每一个变量都有固定的数据类型。

// string: 字符串，可以用单引号或双引号
let msg: string = 'hello world'
// number：数值，整数，浮点数都可以
let age: number = 21
// boolean：布尔
let finished: boolean = true
// any: 不确定类型，可以是任意类型(就是告诉编译器不要去做类型检查了)
let a:any = 'jack'
a = 21
//union: 联合类型，可以是多个指定类型中的一种
let u: string|number|boolean = 'rose'
u = 18
//object：对象
let p = {name: 'jack', age: 21}
//console.log 向控制台输出
console.log(p.name)  // p.name 获取对象中name属性的值
console.log(p['name'])
//Array: 数组，元素可以是任意其他类型
let names: Array<string> = ['Jack', 'Rose']
let ages: number[] = [21, 33]
console.log(names[0])

 二.条件控制

在TypeScript（以及它的基础JavaScript）中，== 和 === 是两种常见的比较运算符，但它们之间存在显著的差异。

1. ==（双等号）:

   • 它执行类型转换和比较。
   • 如果两个操作数的类型不同，它会尝试将它们转换为相同的类型，然后再进行比较。
   • 这种类型转换可能会导致一些意料之外的结果，尤其是当与null、undefined、""（空字符串）和0等比较时。
   • 例如：
     • 0 == "" 返回 true（因为空字符串被转换为数字0）。
     • null == undefined 返回 true（尽管它们是不同的值，但在此比较中都被视为false）。
   • 由于这种隐式的类型转换，使用==可能会导致代码更难理解和维护。

2. ===（三等号）:

   • 它被称为严格相等运算符。
   • 它不仅比较两个操作数的值，还比较它们的类型。
   • 如果两个操作数的类型和值都相同，则返回true；否则返回false。
   • 它不会执行任何类型转换。
   • 例如：
     • 0 === "" 返回 false（因为它们的类型不同）。
     • null === undefined 返回 false（因为尽管在某些比较中它们被视为“相等”，但它们的类型和值确实不同）。
   • 由于其严格性，使用===通常被认为是一种更好的编程实践，因为它减少了意外行为和提高了代码的可读性。

在编写TypeScript或JavaScript代码时，为了清晰和减少潜在错误，建议尽可能使用===来进行比较。

1) if-else

//定义数字
let num:number = 21

//判断是否是偶数
if(num % 2 === 0){
    console.log(num + '是偶数')
}else{
    console.log(num + '是奇数')
}

补充：

        在TypeScript，空字符串、数字0、null、undefined都被认为是false，其他值为true

例如

if(num){

        // num非空，执行下面逻辑

}

2)switch 

//定义变量
let grade: string = 'A'

switch (grade) {
    case 'A': {
        console.log('优秀')
        break
    }
    case 'B': {
        console.log('合格')
        break
    }
    case 'C': {
        console.log('不合格')
        break
    }
    default: {
       console.log('非法输入')
        break 
    }
}

3) for&while

TypeScript支持for和while循环，并且为一些内置类型如Array等提供了快捷迭代语法

4)函数 

TypeScript通常利用function关键字声明函数，并且支持可选参数、默认参数、箭头函数等特殊语法。

// 无返回值函数，返回值void可以省略
function sayHello(name: string): void{
    console.log('你好，' + name + '!')
}
sayHello('jack')

//有返回值函数
function sum(x: number, y: number): number {
    return x + y
}
let result = sum(21, 18)
console.log('21 + 18 = ' + result)


//箭头函数 有返回值
let num = (x:number, y:number):number =>{
    return x+y
}
console.log(num(1, 2))
//箭头函数 无返回值
let sayHi = (name: string) =>{
    console.log('你好，' + name + '!')
}
sayHi('Rose')

 

5)类和接口 

TypeScript具备面向对象的基本语法，例如interface、class、enum等。也具备封装、继承、多态等面向对象基本特征。

//定义枚举
enum Msg{
    HI = 'Hi',  //这里也可以不赋值 默认第一是0 第二个是1 依次类推
    HELLO = 'Hello'
}

//定义接口，抽象方法接收枚举参数
interface A {
    say(msg: Msg): void //接口或者类中定义的方法不需要加function方法关键字
}

//实现接口
class B implements A {
    say(msg: Msg): void{
        console.log(msg + ', I am B')
    }
}

//初始化对象
let a:A = new B()
//调用方法，传递枚举参数
a.say(Msg.HELLO)

// 定义矩形类
class Rectangle {
    // 成员变量
    private width: number
    private length: number
    // 构造函数
    constructor(width: number, length: number) {
        this.length = length
        this.width = width
    }
    // 成员方法
    public area(): number{
        return this.length * this.width
    }
}

//定义正方形
class Square extends Rectangle{
    constructor(side: number) {
        super(side, side)
    }
}

let s = new Square(10)
console.log('正方形面积为：' + s.area())

 6）模块开发

应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块（module）。模块可以互相加载，提高代码复用性。