02. 从TypeScript入手，驾驭HarmonyOS开发的技术风潮！-----------（中篇）

全栈若城

发布于 2024-03-10 09:01:35

1000

发布于 2024-03-10 09:01:35

文章被收录于专栏：若城技术专栏若城技术专栏

本章知识大纲

条件语句

if…else

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

switch…case

var grade:string = 'A'; 
switch(grade) { 
  case 'A': { 
    console.log('优'); 
    break; 
  } 
  case 'B': { 
    console.log('良'); 
    break; 
  } 
  case 'C': {
    console.log('及格'); 
    break;    
  } 
  case 'D': { 
    console.log('不及格'); 
    break; 
  }  
  default: { 
    console.log('非法输入'); 
    break;              
  } 
}

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

接口

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。 接口是对象的状态(属性)和行为(方法)的抽象(描述)

一般函数

// 可以不定义返回值类型和参数类型
function add(x, y) {
  return x + y;
}


// 可以定义返回值类型和参数类型
function add(x:number, y:number): number {
  return x + y;
}

可选参数

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

function buildName(firstName: string, lastName?: string) {
  if (lastName)
    return firstName + ' ' + lastName;
  else
    return firstName;
}

let result1 = buildName('Bob');
let result2 = buildName('Bob', 'Adams');

剩余参数（个数不限的可选参数）

可以一个都没有，同样也可以有任意个。可以使用省略号（ …）进行定义：

function getEmployeeName(firstName: string, ...restOfName: string[]) {
  return firstName + ' ' + restOfName.join(' ');
}

// 可以这样调用
let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');

let employeeName = getEmployeeName('Joseph');

箭头函数

function testNumber(num: number) {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}


// 如下方式调用
testNumber(1)

// 箭头函数
let testArrowFun = (num: number) => {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}

//调用
testArrowFun(-1)

接口案例

使用 interface 定义接口 readonly 设置只读属性 ? 设置该字段可有可无

(()=>{
	//  定义一个接口, 该接口作为person对象的类型使用, 限定或者约束对象中的属性数据 
	interface IPerson{
		readonly id: number  // readonly 设置只读属性
		name: string
		age: number
		gender?: string  // ? 设置该字段可有可无
	}
	//  定义一个对象, 该对象的类型就是我定义的接口 IPerson
	const person: IPerson ={
		id:1,
		name:'若城',
		age:30,
		gender:'男',
	}

	console.log(person);

})()

函数类型

接口能够描述 JavaScript 中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。 参数列表里的每个参数都需要名字和类型。

(()=>{
  //  函数类型: 通过接口的方式作为函数的类型来使用 

  // 定义一个接口 , 用来作为某个函数的类型使用 
  interface ISearchFunc{
    (sourc:string, substring:string):boolean
      }
  // 定义一个函数,该类型就是上面的接口 
  const searchString:ISearchFunc = function(sourc:string, substring:string):boolean {
    return sourc.search(substring) > -1

    // return sourc.indexOf(substring) > -1 
  }

  //  调用函数 
  console.log(searchString('众里寻他千百度','寻他'))
})()

类类型

类的类型, 类的类型可以通过接口来实现

// 类 类型 : 类的类型, 类的类型可以通过接口来实现 
(()=>{
    // 定义一个接口 
    interface IFly{
        //  该方法没有任何的实现
        fly()
    }

    // 定义一个类, 这个类的类型就是上面定义的接口 (实际上可以理解为, IFly接口约束了当前的这个Person  类)
    class Person implements IFly{
        fly(){
             console.log('i can fly');
        }

    }

    const  person = new Person()
    person.fly()


    // 定义一个接口 
    interface ISwim{
        swim()
    }

    class Person2 implements IFly, ISwim {
         fly() {
             console.log('fly2');
             

         }
         swim() {
             console.log('swim2');
             
         }
    }
    // 实例化
    const person2 = new Person2()
    person2.fly()
    person2.swim()

    //  总结:
    // 类可以通过接口的方式,来定义当前这个类的类型
    // 类可以实现一个接口,类也可以实现多个接口,需要注意的是, 接口中的内容需要真正的实现

    // 接口可以继承其他的多个接口
    interface IMyflyAndSwim extends IFly, ISwim{}
    // 定义一个类, 直接实现 IMyflyAndSwim 这个接口 
    class Person3 implements IMyflyAndSwim{
        fly() {
            console.log('fly2');
            

        }
        swim() {
            console.log('swim2');
            
        }
    }
    const person3 = new Person3()
    person3.fly()
    person3.swim()

    // 总结: 接口与接口之间叫继承(使用的是 extends  关键字), 类和接口之间叫实现 (使用的是 implements)
})()

总结: 类可以通过接口的方式,来定义当前这个类的类型 类可以实现一个接口,类也可以实现多个接口,需要注意的是, 接口中的内容需要真正的实现 接口与接口之间叫继承(使用的是 extends 关键字), 类和接口之间叫实现 (使用的是 implements)

类

类的定义

对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。从 ECMAScript 2015，也就是 ES6 开始， JavaScript 程序员将能够使用基于类的面向对象的方式。使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，而不需要等到下个 JavaScript 版本。

/*
 * @Description: 
 * @Author: 若城
 * @Date: 2024-01-16 13:35:17
 * @LastEditTime: 2024-01-16 13:43:07
 */
(() => {
    //  ts 中类的定义及使用
    class Person {
        //   定义属性
        name: string
        age: number
        gender: string

        constructor(name:string, age:number, gender:string){
            // 跟新对象中的属性数据 
            this.name = name 
            this.age = age
            this.gender = gender
        }

        // 定义实例方法
        sayHi(str:string){
            console.log(`${this.name}, ${this.age}, ${this.gender}, ${str} `);
            
        }
    }

    //  ts 中使用类, 实例化对象, 可以直接进行初始化操作
    const person = new Person('卡卡西', 20, '男')
    person.sayHi('who are you?')
})()

继承

继承: 类与类之间的关系 继承后类与类之间的叫法: A类继承了B这个类,那么此时A类叫子类,B类叫基类 子类 —> 派生类 基类 --> 超类(父类) 一旦发生了继承的关系,就出现了父子类的关系

/*
 * @Description: 
 * @Author: 若城
 * @Date: 2024-01-16 14:13:24
 * @LastEditTime: 2024-01-16 14:32:23
 */

// 继承: 类与类之间的关系
// 继承后类与类之间的叫法:
// A类继承了B这个类,那么此时A类叫子类,B类叫基类
//  子类 ---> 派生类
//  基类 --> 超类(父类)
// 一旦发生了继承的关系,就出现了父子类的关系 
(()=>{
    //  定义一个类 
    class Person{
        //   定义属性
        name: string // 名字
        age: number // 年龄 
        gender: string // 性别

        // 定义构造函数 
            constructor(name:string, age:number, gender:string){
                this.name = name
                this.age = age
                this.gender = gender
            }
        //  定义实例方法
        sayHi(str:string){
             console.log(`${this.name}, ${this.age}, ${this.gender}, ${str}`);
             
        }
    }

    //  定义一个类, 继承自Person 
    class Student extends Person{
        constructor(name:string, age:number, gender:string){
            //  调用的是父类中的构造函数, 使用的是super
             super(name, age, gender)
        }
        sayHi(str: string): void {
            super.sayHi(str)
        }
    }

    //  实例化Person 
    const person = new Person('李白', 1000, '男')
    person.sayHi('窗前明月光!')
    //  实例化student
    const student = new Student('李狗蛋', 998, '男')
    student.sayHi('疑是地上霜')
})()

修饰符

修饰符(类中的成员的修饰符): 主要是描述类中的成员(属性,方法,构造函数)的可访问性 类中的成员都有自己的默认访问修饰符 , public public 修饰符, 类中成员默认的修饰符, 代表的是公共的, 任何位置都可以访问类中的成员 private 修饰符, 类中的成员如果使用private 来修饰, 外部是无法访问这个成员数据的, 子类中也是无法访问该成员数据的. protected 修饰符, 类中的成员如果使用protected来修饰,外部是无法访问这个成员数据的, 子类可以访问

/*
 * @Description: 
 * @Author: 若城
 * @Date: 2024-01-16 15:08:45
 * @LastEditTime: 2024-01-16 15:24:29
 */
//  修饰符(类中的成员的修饰符): 主要是描述类中的成员(属性,方法,构造函数)的可访问性
//  类中的成员都有自己的默认访问修饰符 , public
//  public 修饰符, 类中成员默认的修饰符, 代表的是公共的, 任何位置都可以访问类中的成员
// private 修饰符, 类中的成员如果使用private 来修饰, 外部是无法访问这个成员数据的, 子类中也是无法访问该成员数据的.
// protected 修饰符, 类中的成员如果使用protected来修饰,外部是无法访问这个成员数据的, 子类可以访问

(()=>{
    //  定义一个类
    class Person{
        protected name:string
        //  属性
    //   private  name:string
        // 构造函数
        constructor (name:string){
            this.name = name
        }
        //  方法 

        sayHi(str:string):void{
             console.log(`hi!!!${this.name}, 我是 ${str}`);
             
        }
    }

    //  定义一个子类, 尝试访问私有变量 name 是否可以访问 ?? 
    class Student extends Person{
         constructor(name:string){
             super(name)
         }
         play(){
            console.log(this.name);
            
         }
    }

    // 实例化对象
    const person = new Person('若城')
    //  类的外部可以访问类中的属性成员 
    console.log(person.name);
    person.sayHi('赵丽颖')
    
    
})()

private 修饰符

外部无法访问类中的私有属性

子类中也无法访问类中的私有属性

protected 修饰符

外部无法访问类中的私有属性

子类中可以访问类中的私有属性

readonly修饰符

readonly 是一个关键字. 对类中的属性成员进行修饰,修饰后,该属性成员,就无法在外部被随意修改了.

// readonly 修饰符: readonly 是一个关键字. 对类中的属性成员进行修饰,修饰后,该属性成员,就无法在外部被随意修改了.
(()=>{
    // 定义一个类型
    class Person{
        readonly name:string
        constructor(name:string){
            this.name= name
        }
        sayHi(str:string):void{
            console.log('你好啊'+ this.name, `我是${str}`);
            
        }
    }
    // 实例化对象
    const person: Person = new Person('赵丽颖')
    console.log(person);
    console.log(person.name);
    person.name = '迪丽热巴'
    console.log(person.name);

    
})()

使用readonly 修饰之后发现 name 无法修改

类中的普通方法中,也是不能修改readonly 修饰的成员属性值

模块

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

使用export关键字导出：

export class NewsData {
  title: string;
  content: string;
  imagesUrl: Array<NewsFile>;
  source: string;

  constructor(title: string, content: string, imagesUrl: Array<NewsFile>, source: string) {
    this.title = title;
    this.content = content;
    this.imagesUrl = imagesUrl;
    this.source = source;
  }
}

使用import关键字导入

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

迭代器

for…of会遍历可迭代的对象，调用对象上的Symbol.iterator方法。
for…of和for…in均可迭代一个列表，但是用于迭代的值却不同：for…in迭代的是对象的键，而for…of则迭代的是对象的值。

let someArray = [1, "string", false];

for (let entry of someArray) {
  console.log(entry); // 1, "string", false
}


let list = [4, 5, 6];

for (let i in list) {
  console.log(i); // "0", "1", "2",
}

for (let i of list) {
  console.log(i); // "4", "5", "6"
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-10，如有侵权请联系 cloudcommunity@tencent.com 删除

对象