鸿蒙系统基础之TypeScript 前端简介

举报
tea_year 发表于 2025/05/26 20:40:15 2025/05/26
【摘要】 首先介绍一下什么是TypeScript ,与JavaScript的区别,及优缺点什么是TypeScript?官网:http://www.typescriptlang.org/github:https://github.com/Microsoft/TypeScript学习:https://www.tslang.cn/ 、http://ts.xcatliu.com/、https://www.jq...

首先介绍一下什么是TypeScript ,与JavaScript的区别,及优缺点

什么是TypeScript?

官网:http://www.typescriptlang.org/

github:https://github.com/Microsoft/TypeScript

学习:https://www.tslang.cn/ 、http://ts.xcatliu.com/、https://www.jqhtml.com/8090.html

  1. 是添加了类型系统的 JavaScript,适用于任何规模的项目。
  2. 是一门静态类型、弱类型的语言。
  3. 完全兼容 JavaScript,且不会修改 JavaScript 运行时的特性。
  4. 可以编译为 JavaScript,然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
  5. 拥有很多编译选项,类型检查的严格程度可通过配置文件决定。
  6. 可以和 JavaScript 共存,这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
  7. 增强了编辑器(IDE)的功能,提供了代码补全、接口提示、跳转到定义、代码重构等能力。
  8. 拥有活跃的社区,大多数常用的第三方库都提供了类型声明,并且开源免费

JavaScript 的缺点

首先JavaScript 是一门非常灵活的编程语言:

  • 它没有类型约束,一个变量可能初始化时是字符串,又被赋值为数字。
  • 由于隐式类型转换的存在,有些变量的类型很难在运行前就确定。
  • 基于原型的面向对象编程,使得原型上的属性或方法可以在运行时被修改。

TypeScript 的类型系统,在很大程度上弥补了 JavaScript 的缺点。

为什么使用 TypeScript?

一般来说,在大型项目中,后期维护成本比前期开发成本要多得多,所以团队规范化尤为重要,包括编码规范,方法调用规范等,而TS可以通过代码的方式,约束团队开发,这样才有利于后期维护及扩展,从而达到高效的开发两个最重要的特性——类型系统、适用于任何规模。

优势:强大的IDE支持,支持类型检测,允许为变量指定类型,语法检测,语法提示

缺点:有一定的学习成本,需要理解 接口,泛型,类,枚举类型等前端可能不是很熟悉的知识点。

接口(Interfaces):可以用于对``对象的形状Shape`进行描述

泛型(Generics):在定义函数,接口或类时,不预先指定具体的类型,而是在使用时在指定类型的一种特性

类(Classes):定义了一件事物的抽象特点,包括属性和方法

安装

若想使用TS进行开发,首先必须要搭建搭建TypeScript开发环境,安装: npm install -g typescript,全局安装,可以在任意位置执行tsc。

版本:tsc -v

编译:tsc 文件名.ts

TS 中,使用:为变量指定类型,: 前后的空格可有可无。TS 只会在编译时对类型进行静态检查,如发现有错误,编译时就会报错。而在运行时,与普通的 JavaScript 文件一样,不会对类型进行检查。

编译时即使报错,还是会生成编译结果,仍然可以使用编译之后的文件,若想在报错时终止 js文件的生成,可以在 tsconfig.json 中配置 noEmitOnError 即可。

数据类型

// a是变量   
// = 是赋值符号
// 赋值就是把=号右侧的数据存入左侧的变量
@State a = '34'

Text(a)  // 34
Text('a')  // a

基本数据类型和引用数据类型

// 数据类型
分为两大类
一、基本数据类型
string 字符串   a = 'e123'
number 数值     num = 78  //78不加引号
boolean 布尔值  isShow = true    // true表示真,false表示假

二、引用数据类型 (存入多个数据)
1. 数组   arr = ['red','blue','black']
2. 对象   
 person = {
    name: '张三',
    age: 23,
    weight: 130
 }
 经常用到数组和对象结合的效果
 [
    {
      img: 'enablement_pic1',
      title: 'HarmonyOS第一课',
      content: '基于真实的开发场景,提供向导式学习,多维度...'
    },
    {
      img: 'enablement_pic2',
      title: '开发指南',
      content: '提供系统能力概述,快速入门,用于指导开发者...'
    },
    {
      img: 'enablement_pic5',
      title: '自强民主',
      content: '基于真实的开发场景,提供向导式学习,多维度.'
    },
    {
      img: 'enablement_pic3',
      title: '诚信友爱',
      content: '基于真实的开发场景,提供向导式学习,多维度..'
    },
    {
      img: 'enablement_pic4',
      title: '团结',
      content: '基于真实的开发场景,提供向导式学习,多维度'
    }
  ]

自定义类型

// let的作用是声明username是个变量, 可以存入数据
let username: string = '张三'
let num: number = 89
let isShow: boolean = true
let imgList: string[] = ['a','b','c']
let score: number[] = [70,89,90]
//数据类型的定义
interface EnableModel {
  img: string,
  title: string,
  content: string
}

let enableList: EnableModel[] = [
  {
    img: 'enablement_pic1',
    title: 'HarmonyOS第一课',
    content: '基于真实的开发场景,提供向导式学习,多维度...'
  },
  {
    img: 'enablement_pic2',
    title: '第一课',
    content: '提供系统能力概述,快速入门,用于指导开发者...'
  },
  {
    img: 'enablement_pic5',
    title: '自强民主',
    content: '基于真实的开发场景,提供向导式学习,多维度.'
  },
  {
    img: 'enablement_pic3',
    title: '诚信友爱',
    content: '基于真实的开发场景,提供向导式学习,多维度..'
  },
  {
    img: 'enablement_pic4',
    title: '团结',
    content: '基于真实的开发场景,提供向导式学习,多维度'
  }
]

总结

TypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,工作于TypeScript的开发。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。