当前位置:   article > 正文

TypeScript编程语言学习,为学习HarmonyOS开发做准备

TypeScript编程语言学习,为学习HarmonyOS开发做准备

1. 编程语言

ArkTS是HarmonyOS优选的应用开发语言,它在TypeScript(TS)的基础上,匹配ArkUI扩展,扩展了声明式UI、状态管理等相应的能力。

  • JavaScript(JS),使用在Web应用开发,用来为页面添加各种各样的动态功能。
  • TypeScript(TS)是JavaScript的超集,它扩展了JS的语法,在JS的基础上添加静态类型构建而成,是一个开源的编程语言。
  • ArkTS兼容TypeScript语言,拓展了声明式UI、状态管理、并发任务等能力。

他们的关系如图所示:

2. TypeScript语法

个人感觉和Kotlin语法很相似

2.1. 基础类型

基础类型如:布尔值、数字类型、数组、字符串等

2.1.1. 布尔值

let flag: boolean = false;

2.1.2. 数字类型

所有数字都是浮点数,类型是number类型,可以表示十进制、二进制、八进制、十六进制

let year: nuumber = 2023;

2.1.3. 字符串

使用string表示字符串,可以使用""或者''。

  1. let name: string = "wmding";
  2. let str: string = 'hello world';

2.1.4. 数组

  1. let list: number[] = [1,2,3];
  2. let list: Array<number> = [1,2,3];
  3. let array: Array<number> = new Array;
  4. array.push(1);
  5. array.push(2);
  6. array.push(3);

2.1.5. 元组

表示一个已知元素数量和类型的数组,各个元素类型可以不相同。

  1. let x: [string, number];
  2. x = ['hello', 100];//需要和定义的类型匹配

2.1.6. 枚举

  1. enum Color {Red, Green, Blue};
  2. let c: Color = Color.Red;

2.1.7. unknown

不清楚类型的变量

  1. let str: unknown = 'hello';
  2. str = 4;
  3. str = false;

2.1.8. void修饰的函数

  1. function test(): void {
  2. console.log(('hello world');
  3. }

2.1.9. null、undefined

在TS中,这两个类型不同

  1. let u: undefined = undefined;
  2. let n: null = null;

2.1.10. 联合类型

定义变量可以被定义为不同的类型

  1. let stringOrNumber: string | number;
  2. stringOrNumber = 'hello';
  3. stringOrNumber = 100;

2.2. 条件语句

2.2.1. if...else

  1. var num:number = 12;
  2. if (num % 2==0) {
  3. console.log('偶数');
  4. } else {
  5. console.log('奇数');
  6. }

2.2.2. switch...case

  1. var grade:string = 'A';
  2. switch(grade) {
  3. case 'A': {
  4. console.log('优');
  5. break;
  6. }
  7. case 'B': {
  8. console.log('良');
  9. break;
  10. }
  11. case 'C': {
  12. console.log('及格');
  13. break;
  14. }
  15. case 'D': {
  16. console.log('不及格');
  17. break;
  18. }
  19. default: {
  20. console.log('非法输入');
  21. break;
  22. }
  23. }

2.3. 函数

2.3.1. 一般函数

  1. // 可以不定义返回值类型和参数类型
  2. function add(x, y) {
  3. return x + y;
  4. }
  5. // 可以定义返回值类型和参数类型
  6. function add(x:number, y:number): number {
  7. return x + y;
  8. }

2.3.2. 可选参数

可以在参数名旁使用 ?实现可选参数的功能。比如,我们想让lastName是可选的:

  1. function buildName(firstName: string, lastName?: string) {
  2. if (lastName)
  3. return firstName + ' ' + lastName;
  4. else
  5. return firstName;
  6. }
  7. let result1 = buildName('Bob');
  8. let result2 = buildName('Bob', 'Adams');

2.3.3. 剩余参数(个数不限的可选参数)

可以一个都没有,同样也可以有任意个。 可以使用省略号( ...)进行定义:

  1. function getEmployeeName(firstName: string, ...restOfName: string[]) {
  2. return firstName + ' ' + restOfName.join(' ');
  3. }
  4. // 可以这样调用
  5. let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');
  6. let employeeName = getEmployeeName('Joseph');

2.3.4. 箭头函数

  1. function testNumber(num: number) {
  2. if (num > 0) {
  3. console.log(num + ' 是正数');
  4. } else if (num < 0) {
  5. console.log(num + ' 是负数');
  6. } else {
  7. console.log(num + ' 为0');
  8. }
  9. }
  10. // 如下方式调用
  11. testNumber(1)
  12. // 箭头函数
  13. let testArrowFun = (num: number) => {
  14. if (num > 0) {
  15. console.log(num + ' 是正数');
  16. } else if (num < 0) {
  17. console.log(num + ' 是负数');
  18. } else {
  19. console.log(num + ' 为0');
  20. }
  21. }
  22. //调用
  23. testArrowFun(-1)

2.4. 类

2.4.1. 类的定义

使用class关键字来定义类,我们可以声明一个Person类,这个类有3个成员:一个是属性(包含name和age),一个是构造函数,一个是getPersonInfo方法,其定义如下所示。

  1. class Person {
  2. private name: string
  3. private age: number
  4. constructor(name: string, age: number) {
  5. this.name = name;
  6. this.age = age;
  7. }
  8. public getPersonInfo(): string {
  9. return `My name is ${this.name} and age is ${this.age}`;
  10. }
  11. }

调用:

  1. let person1 = new Person('Jacky', 18);
  2. person1.getPersonInfo();

2.4.2. 继承

使用extends继承

  1. class Employee extends Person {
  2. private department: string
  3. constructor(name: string, age: number, department: string) {
  4. super(name, age);
  5. this.department = department;
  6. }
  7. public getEmployeeInfo(): string {
  8. return this.getPersonInfo() + ` and work in ${this.department}`;
  9. }
  10. }

调用:

  1. let person2 = new Employee('Tom', 28, 'HuaWei');
  2. person2.getPersonInfo();
  3. person2.getEmployeeInfo();

2.5. 模块

模块可以相互加载,并可以使用特殊的指令 export 和 import 来交换功能,从另一个模块调用一个模块的函数。

使用export关键字导出:

  1. export class NewsData {
  2. title: string;
  3. content: string;
  4. imagesUrl: Array<NewsFile>;
  5. source: string;
  6. constructor(title: string, content: string, imagesUrl: Array<NewsFile>, source: string) {
  7. this.title = title;
  8. this.content = content;
  9. this.imagesUrl = imagesUrl;
  10. this.source = source;
  11. }
  12. }

使用import关键字导入

import { NewsData } from '../common/bean/NewsData';

2.6. 迭代器

  • for..of会遍历可迭代的对象,调用对象上的Symbol.iterator方法。
  • for..of和for..in均可迭代一个列表,但是用于迭代的值却不同:for..in迭代的是对象的键,而for..of则迭代的是对象的值。
  1. let someArray = [1, "string", false];
  2. for (let entry of someArray) {
  3. console.log(entry); // 1, "string", false
  4. }
  5. let list = [4, 5, 6];
  6. for (let i in list) {
  7. console.log(i); // "0", "1", "2",
  8. }
  9. for (let i of list) {
  10. console.log(i); // "4", "5", "6"
  11. }

关注我,我们一起成长。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/317710
推荐阅读
相关标签
  

闽ICP备14008679号