【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲

简介: 【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲



TypeScript入门之声明、数据类型、函数、类的详讲

2.2.2 声明

2.2.2.1 变量声明

2.2.2.2 常量声明

let用于声明变量,而const用于声明常量,两者的区别是变量在赋值后可以修改,而常量在赋值后便不能再修改。

const b:number = 200;

2.2.2.3 类型推断

如果一个变量或常量的声明包含了初始值,TS 便可以根据初始值进行类型推断,此时我们就可以不显式指定其类型,例如

let c = 60;
console.log(typeof c); //number

2.2.3 常用数据类型

2.2.3.1 number

number表示数字,包括整数和浮点数,例如: 100、-33 、2.5、-3.9

let a :number = 100
let b :number = -33
let c :number = 2.5
let d :number = -3.9

2.2.3.2 string

string表示字符串,例如: 你好hello

let a:string = '你好'
let b:string = 'hello'

2.2.3.3 boolean

boolean表示布尔值,可选值为:truefalse

let isOpen:boolean = true
let isDone:boolean = false

2.2.3.4 数组

数组类型定义由两部分组成,元素类型[],例如number[]表示数字数组,string[]表示字符串数组,数组类型的变量可由数组字面量——[item1,item2,item3]进行初始化。

let a: number[] = []
let b: string[] = ['你好', 'hello']

2.2.3.5 对象

TS中,对象object)是一种一系列由属性名称和属性值组成的数据结构,例如姓名:‘张三’, 年龄:10, 性别:‘男’。对象类型的声明需要包含所有属性的名称及类型,例如{name: string, age: number, gender: string},对象类型的变量可以通过对象字面量——{name:'张三', age:10, gender:'男'}进行初始化。

let person: {name:string, age:number, gender:string} = {name:'张三', age:10, gender:'男'};

2.2.4 函数

2.2.4.1 函数声明语法

声明函数的基础语法如下

2.2.4.2 参数详解

特殊语法
● 可选参数
  可选参数通过参数名后的?进行标识,如以下案例中的`gender`?参数。
function getPersonInfo(name: string, age: number, gender?: string): string {
    if (gender === undefined) {
        gender = '未知'
    }
    return `name:${name},age:${age},gender:${gender}`;
}
let p1 = getPersonInfo('zhagnsan', 10, '男')
let p2 = getPersonInfo('lisi', 15);
console.log(p1);
console.log(p2);

注:调用函数时,未传递可选参数,则该参数的值为undefined。

● 默认参数
    可在函数的参数列表为参数指定默认值,如以下案例中的gender: string='未知'参数。
function getPersonInfo(name: string, age: number, gender: string='未知'): string {
    return `name:${name},age:${age},gender:${gender}`;
}
let p1 = getPersonInfo('zhagnsan', 10, '男')
let p2 = getPersonInfo('lisi', 15);
console.log(p1);
console.log(p2);

特殊类型

● 联合类型
   一个函数可能用于处理不同类型的值,这种情况可以使用联合类型,例如以下案例中的message: number | string
function printNumberOrString(message: number | string) {
  console.log(message)
}
printNumberOrString('a')
printNumberOrString(1)
● 任意类型
若函数需要处理任意类型的值,则可以使用any类型,例如以下案例中的message: any
function print(message:any) {
  console.log(message)
}
print('a')
print(1)
print(true)

2.2.4.3 返回值详解

  • 特殊类型
    若函数没有返回值,则可以使用void作为返回值类型,其含义为空。
function test(): void {
    console.log('hello');
}
  • 类型推断
    函数的返回值类型可根据函数内容推断出来,因此可以省略不写。
function test() {
    console.log('hello');
}
function sum(a: number, b: number) {
    return a + b;
}

2.2.4.4 函数声明特殊语法

  • 匿名函数
    匿名函数的语法结构简洁,特别适用于简单且仅需一次性使用的场景。
let numbers: number[] = [1, 2, 3, 4, 5]
numbers.forEach(function (number) {
    console.log(number);
})

注意:匿名函数能够根据上下文推断出参数类型,因此参数类型可以省略。

  • 箭头函数
    匿名函数的语法还可以进一步的简化,只保留参数列表和函数体两个核心部分,两者用=>符号连接。
let numbers: number[] = [1, 2, 3, 4, 5]
numbers.forEach((num) => { console.log(num) })

2.2.5 类(class)

2.2.5.1 概述

类(class)是面向对象编程语言中的一个重要概念。

面向对象编程(Object-Oriented Programming,简称OOP)是一种编程范式,其核心理念在于将程序中的数据与操作数据的方法有机地组织成对象,从而使程序结构更加模块化和易于理解。通过对象之间的协同合作,实现更为复杂的程序功能。

类(class)是对象的蓝图或模板,它定义了对象的属性(数据)和行为(方法)。通过类可以创建多个具有相似结构和行为的对象。例如定义一个 Person类,其对象可以有张三、李四等等。

2.2.5.2 语法说明

  • 类的定义
    定义类的语法如下图所示

  • 代码如下:
class Person {
    id: number;
    name: string;
    age: number = 18;
    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
    introduce(): string {
        return `hello,I am ${this.name},and I am ${this.age} years old`
    }
}
  • 对象创建
  • 语法
    创建对象的关键字为new,具体语法如下
let person = new Person(1,'zhangsan');

● 对象属性的访问

console.log(person.name); //读
person.name = 'lisi'; //写
console.log(person.name);

对象方法的调用

对象创建后,便可通过对象调用类中声明的方法,如下

let intro = person.introduce();
console.log(intro);

静态成员

Typescript 中的类中可以包含静态成员(静态属性和静态方法),静态成员隶属于类本身,而不属于某个对象实例。静态成员通用用于定义一些常量,或者工具方法。

● 声明静态成员

定义静态成员需要使用static关键字。

class Constants{
    static count:number=1;
}
class Utils{
    static toLowerCase(str:string){
        return str.toLowerCase();
    }
}
console.log(Constants.count);
console.log(Utils.toLowerCase('Hello World'));
● 使用静态成员

静态成员无需通过对象实例访问,直接通过类本身访问即可。

console.log(Constants.count);
console.log(Utils.toLowerCase('Hello World'));

2.2.5.3 继承

继承是面向对象编程中的重要机制,允许一个类(子类或派生类)继承另一个类(父类或基类)的属性和方法。子类可以直接使用父类的特性,并根据需要添加新的特性或覆盖现有的特性。这种机制赋予面向对象程序良好的扩展性。

下面通过一个例子演示继承的特性

class Student extends Person {
    classNumber: string;
    constructor(id: number, name: string, classNumber: string) {
        super(id, name);
        this.classNumber = classNumber;
    }
    introduce(): string {
        return super.introduce()+`, and I am a student`;
    }
}
let student = new Student(1,'xiaoming','三年二班');
console.log(student.introduce());

注意:

  • 类的继承需要使用关键字extends
  • 子类构造器中需使用super()调用父类构造器对继承自父类的属性进行初始化。
  • 在子类中可以使用this关键字访问继承自父类的属性和方法。
  • 在子类中可以使用super关键字访问父类定义的方法。

2.2.5.4 访问修饰符

访问修饰符(Access Modifiers)用于控制类成员(属性、方法等)的可访问性。TypeScript提供了三种访问修饰符,分别是privateprotectedpublic

class Person {
    private id: number;
    protected name: string;
    public age: number;
    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
}
class Student extends Person {
    
}

说明:

private 修饰的属性或方法是私有的,只能在声明它的类中的被访问。

protected 修饰的属性或方法是受保护的,只能在声明它的类和其子类中被访问。

public 修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 public 的。


第三期完结,等待第四弹…

关注博主,收藏专栏持续更新…



欢迎添加微信,加入我的核心小队,请备注来意

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

目录
相关文章
|
3月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
193 2
|
5月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
2月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
2月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
3月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
55 4
|
3月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
3月前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
32 0
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
86 0
|
5月前
|
JavaScript
TypeScript(六)函数
TypeScript(六)函数
30 0
|
6月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
33 0