鸿蒙应用开发前置学习-TypeScript-CSDN博客

本文链接：https://blog.csdn.net/qq_56760790/article/details/142589406

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html

前置课是关于TypeScript的基础教学，因为鸿蒙的ArkTS是TypeScript的超集，语法有些类似，所以大家如果对TS不熟悉，也可以看下前置课

3. TypeScript面向对象编程的基本语法

1. TypeScript介绍

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 是 JavaScript 的一个超集。它对JavaScript进行了扩展，向JavaScript中引入了类型的概念，并添加了许多新的特性。

// 这是JavaScript，是弱类型语言，变量可以赋不同类型的值
let username='张三'
username =1

// TypeScript是强类型语言，变量不能给随意类型赋值
     let username:string='张三'
     username=1

TypeScript代码需要通过编译器编译为 JavaScript，然后再交由 JavaScript解析器执行。

TypeScript完全兼容 JavaScript，换言之，任何的TypeScript代码都可以直接当成 JavaScript使用。

1.1 TypeScript好处

TypeScript可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；
良好的代码提示，提升开发效率；
TypeScript代码可以编译为任意版本的JavaScript代码，可有效解决不同JavaScript运行环境的兼容问题；

1.2 TypeScript的使用场景

TS适合用来开发中大型项目
开发通用的JS代码库
团队协作开发

1.3 TypeScript的编译环境

TS编写的代码是无法直接在JS引擎（浏览器/NodeJs）中运行的，最终还需要经过编译变成JS代码才可以正常运行

1.3.1 搭建手动编译环境

1、本地环境需要安装npm工具，我们通过npm来进行安装

npm install -g typescript

2、安装好了之后，可以查看版本号

tsc -v

3、新增hello.ts文件，执行tsc hello.ts 命令生成hello.js文件

4、在终端输入node hello.js就能运行

1.3.2 搭建工程化下的自动编译环境

基于工程化的TS开发模式（webpack/vite)，TS的编译环境已经内置了，无需手动安装配置

以下是创建一个最基础的自动化的TS编译环境

npm create vite@latest ts-demo3 -- --template vanilla-ts

1、npm create vite@latest 使用最新版本的vite创建项目

2、起个项目名称

3、 -- --template vanilla-ts 创建项目使用的模板为原生ts模板

项目搭建好了之后可以cd 到当前项目路径下执行以下指令

npm install

npm run dev

2. TypeScript的类型注解

2.1 TS支持的常用类型注解

JS已有类型

1、简单类型

number string boolean null undefined

2、复杂类型

数组函数

TS新增类型

联合类型、类型别名、接口、字面量类型、泛型、枚举、void、any

2.2 类型注解的作用是什么

限制变量能赋值的数据类型并给出提示

语法：变量:类型

2.3 类型注解讲解

2.3.1 简单类型

let age:number
age=1
let isLoading:boolean
isLoading=false
let name:string
name='小头'

2.3.2 数组

// 推荐第一种写法
let arr:number[]=[1,2]
let test:Array<number>=[1,2]

2.3.3 函数类型

函数类型是指给函数添加类型的注解，本质上就是给函数的参数和返回值添加类型的约束

function add(a:number,b:number):number{
  return a+b;
}
let sum:number=add(1,2)

函数表达式写法

分开写法

const add= (a:number,b:number):number =>{
  return a+b;
}

整体写法

type addFn=(a:number,b:number)=>number
const add :addFn=(a,b) =>{
  return a+b;
}

函数-可选参数

可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确，可选参数必须在函数末尾

// 可选参数
function add(a:number,b?:number):number{
  if(b){
    return a+b;
  }
  return a;
}

函数-无返回值

function eachArr(arr:number[]):void{
  arr.forEach((item)=>console.log(item))
}

2.3.4 联合类型

将多个类型合并为一个类型对变量进行注解

// 例子1
let arr:(number|string)[]=[1,2,'小头']
// 例子2
let arr:number|string[]
arr=1
arr=['小头']

2.3.5 类型别名

通过type关键字给写起来较复杂的类型起一个其他的名字，用来简化和复用类型

type ItemType=(string|number)[]
let arr:ItemType=[1,2,'小头']

类型别名注解对象

在TS中对于对象数据的类型注解，除了使用interface之外还可以使用类型别名来进行注解，作用相似

type Boy={
  name:string
  age:number
}
const boy:Boy={
  name:"小头",
  age:18
}

2.3.6 接口类型

在TS中使用interface接口来描述对象数据的类型（常用于给对象的属性和方法添加类型约束)

interface LoginForm{
  name:string
  password:string
}
const form:LoginForm={
  name:"小头",
  password:"123456"
}

接口类型的可选参数写法

interface LoginForm{
  name:string
  password?:string
}
const form:LoginForm={
  name:"小头"
}

接口的继承

接口的很多属性是可以进行类型复用的，使用extends实现接口继承，实现类型复用

interface Boy{
  name:string
  age:number
}
interface People extends Boy{
  sex:number
}

const people:People={
  name:"小头",
  age:18,
  sex:1
}

2.3.7 字面量类型

使用js字面量作为类型对变量进行类型注解，这种类型就是字面量类型，字面量类型比普通类型更加精确

// 普通number类型
let age:number=10
age=20
// 字面量类型,age1报错
let age1:10
age1=20

字面量类型的使用一般都是和联合类型搭配使用

type Sex ='男'|'女'
let sex:Sex='女'

2.3.8 any类型

变量被注解为any类型之后，TS会忽略类型检查，错误的类型赋值不会报错，也不会有任何提示

let age:any
 age=100
 age='小头'

注意：any的使用越多，程序可能出现的漏洞越多，建议避免使用