TypeScript快速入门

TypeScript

1.变量的声明

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

// let表示声明一个变量；const则表示常量
let msg: string = 'hello world'

1.1.数据类型

• string：字符串
• number：数值，整数，浮点数都可以
• boolean：布尔值
• any：不确定类型，什么都可以
• 联合类型：例如 string|number 表示字符串或数值都可以
• object：对象，例如 p = {name:‘王五’, age:23}
• function：函数，下面会介绍
• 数组：

// 方式一
let names: Array<string> = ['王五', '赵六']
// 方式二
let names: string[] = ['王五', '赵六']

2.条件控制

2.1.if-else

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

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

//判断是否是正数
if(num > 0){
    console.log(num+'是正数')
}else if(num< 0){
    console.log(num+'是负数')
}else {
    console.log(num+'为0 ')
}

注意：在TupeScript中，空字符串、数字0、null、undefined都被认为是false，其它值则为true。

2.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.循环迭代

3.1.普通循环

//普通for
for(let i = 1; i <=10; i++){
    console.log('点赞'+ i + '次')
}
// while
let i = 1;
while(i <=10){
	console.log( '点赞'+i+'次')
    i++;
}

3.2.增强循环

//定义一个数组
let names: string[] =['Jack', 'Rose']

// for in 迭代器，遍历得到数组角标
for (const i in names) {
    console.log(i + ':' + names[i])
}
//for of 迭代器，直接得到元素
for (const name of names）{
    console.log(name)
}

4.函数

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

4.1.无返回值

// 声明函数 -> function 函数名(形参:数据类型):返回值{函数体}
function sayHello(name : string): void{
    console.log('你好，' +name + '! ')
}
// 调用函数
sayHello('Jack')

4.2.有返回值

// 声明函数
function sum(x: number, y: number): number{
    return x + y
}
// 调用函数
let result = sum(21,18)
console.log( '21 +18 ='+ result)

4.3.箭头函数

// 声明
let sayHi = (name: string) => {
	console.log('你好，' + name + '!')
}
// 调用
sayHi( ' Rose ')

4.4.可变形参

// 声明，在参数后面加？
function sayHello(name? : string){
	//判断name是否有值，如果无值则给一个默认值
    name = name ? name : '陌生人'
	console.log('你好，' +name + '!'))
}
// 调用
sayHello('Jack')
sayHello()

4.5.形参默认值

//参数默认值，在参数后面赋值，表示参数默认值
//如果调用者没有传参，则使用默认值
function sayHello(name: string ='陌生人'){
    console.log( '你好，' +name + '!')
}
sayHello('Jack')
sayHello()

5.类和接口

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

// 定义枚举
enum Msg{
    HI ='Hi',
    HELLO = 'Hello'
}

// 定义接口，抽象方法接收枚举参数
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)

5.1.构造器

使用关键字：constructor

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

5.2.继承

// 定义正方形
class square extends Rectangle{ // 继承矩形
    constructor(side: number){
        //调用父类构造
        super(side, side)
    }
}

6.模块化开发

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

rectangle.ts文件内容如下：

//定义矩形类，并通过export导出
export class Rectangle {
    //成员变量
    public width: number
    public length: number
    //构造函数
    constructor(width: number, length: number) {
        this.width = width
        this.length = length
    }
}

//定义工具方法，求矩形面积，并通过export导出
export function area(rec : Rectangle): number{
    return rec.width * rec.length
}

index.ts文件内容如下：

// 通过import语法导入，from后面写文件的地址
import {Rectangle, area} from './rectangle' //表示当前路径下的rectangle.ts
// 创建Rectangle对象
let r = new Rectangle(10, 20)
//调用area方法
console.log('面积为:' +area(r))

参考视频：https://www.bilibili.com/video/BV1Sa4y1Z7B1