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

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

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

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

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

1. TypeScript介绍

1.1 TypeScript好处

1.2 TypeScript的使用场景

1.3 TypeScript的编译环境

1.3.1 搭建手动编译环境

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

2. TypeScript的类型注解

2.1 TS支持的常用类型注解

2.2 类型注解的作用是什么

2.3 类型注解讲解

2.3.1 简单类型

2.3.2 数组

2.3.3 函数类型

2.3.4 联合类型

2.3.5 类型别名

2.3.6 接口类型

2.3.7 字面量类型

2.3.8 any类型

2.3.9 类型断言

2.3.10 泛型

2.3.10.1 泛型别名

2.3.10.2 泛型函数

2.3.10.3 泛型约束

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

3.1 定义枚举

3.2 定义接口

3.3 实现接口

3.4 定义类

4. TypeScript的条件控制

4.1 if-else

4.2 switch

5. TypeScript的循环遍历

5.1 for循环遍历

5.2 while循环遍历

5.3 数组快捷迭代

6. 学习地址

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的使用越多，程序可能出现的漏洞越多，建议避免使用