TypeScript基础简介

news2024/12/23 17:30:52

TypeScript是Javascript的一个超集。 TypeScript在原有的基础之上又添加了编译器类型检查的功能，意味着如果使用ts进行开发，会对变量的类型进行较为严格的验证，防止程序员写出可能出错的代码，规范变成习惯，适合大项目开发。

let a = 100;
a = 'hello world';

let a:string = '100';

TypeScript代码的编写及运行方式

Typescript代码写在后缀为.ts的文件中，这种文件可以被typescript编译器编译解析。该编译器读取ts文件后，将会把ts代码转成一套功能相同的js代码，输出到一个js文件中，这个过程成为编译。 ts代码是无法直接运行的，它只是提供了一套编译环境，将ts转成js，最终程序还是要执行js代码。

安装Typescript编译器
npm install -g typescript    # 安装ts编译器
npm install -g ts-node       # 安装ts-node运行环境，集成到vscode中
npm install -g  tslib  @types/node  #

如果报错，检查安装库的名字是否正确，必要时还可以修改以下镜像仓库地址。

安装完毕后，就可以使用tsc命令，对ts文件进行编译：

tsc  hello.ts

将会编译hello.ts，如果编译通过，将会生成hello.js。

vscode开发工具中有一个插件可以直接运行ts文件（自动编译，自动执行js）CodeRunner

在这里插入图片描述

查阅ts中文网：

https://www.tslang.cn/index.html

Typescript提供的基本数据类型
// 01_basic.ts   体会ts的基本数据类型
let pName:string = '亮亮';
let pAge:number = 18;
let pMarried:boolean = false;
//  Type 'number' is not assignable to type 'string'. 
//  不能将数据“15”分配给类型“string”。
//  pName = 15;

// 声明一个变量，描述数组类型的数据
// string[]用于描述字符串数组类型  这个数组内只能放字符串
let pHobby:string[] = ['吃', '喝', '玩', '乐']
let pFav:Array<string> = ['健身', '摊煎饼', '背麻袋']
console.log(pHobby.join('; '))
console.log(pHobby.join(' / '))

// 声明变量描述一个元组类型的数据   Tuple内部的元素数据类型可以不同
let params:[string, number, number] = ['杀手', 1, 100] 
// 元组用于整合一些不同类型的数据，当做一个整体来进行后续处理
params = ['熊猫', 2, 20]
params = ['杀手', 1, 12]

// 可以使用元组简单的描述一个对象
let toy:[string,number,number,string] = ['奥特曼', 20, 500, '软胶'] 
toy = ['变形金刚', 30, 800, '塑料']

// 枚举 enumerate
// enum类型是对JavaScript标准数据类型的一个补充。 
// 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

// 假设有一组数据，存储四个人的年龄  18 28 38 48
let yuAge = 18
let xinAge = 28
let liangAge = 38
let huaAge = 48
// 枚举可以非常方便的定义一组数据保存这些数字，提供了便捷的访问语法
enum Age {Xiaoyu=18, Xiaoxin=28, Liang=38, Hua=48}
// 如上语法即可定义个枚举类型，类型名称是：Age类型，包含有4个常量
// 如下访问：
console.log('晓宇的年龄：' + Age.Xiaoyu)
console.log('亮亮的年龄：' + Age.Liang)
// 什么时需要使用枚举来定义一些变量呢？
// 当编写代码的时候发现程序中需要提供一组相同类型的数据，且这些数据
// 一般情况下还没有什么变化，希望访问时有更好的代码可读性。

// 如果没有为每一个枚举名赋值，则默认从0开始自动分配：
enum Num {numA, numB, numC, numD, numE}
console.log(Num.numA)
console.log(Num.numB)
console.log(Num.numC)
// 由于枚举类型有如上特点，所以通常情况下会定义如下枚举类型，方便编码：
enum Gender {Male, Female}
enum OnOff {Off, On}
enum Married {No, Yes}
console.log('亮亮的婚姻状况：' + Married.Yes)
console.log('亮亮的性别：' + Gender.Male)
console.log('灯开着呢么？' + OnOff.On)

// 定义一个枚举类型，保存一组url后缀路径：
enum URLS {
  ACTOR_ADD = '/actor/add',
  ACTOR_LIST = '/actor/list',
  ACTOR_QUERY_BY_NAME = '/actor/query/name',
  ACTOR_DELETE = '/actor/del'
}
let BASEURL = 'http://localhost:3010'

console.log(BASEURL + URLS.ACTOR_ADD)
console.log(BASEURL + URLS.ACTOR_DELETE)
console.log(BASEURL + URLS.ACTOR_LIST)
console.log(BASEURL + URLS.ACTOR_QUERY_BY_NAME)


// 枚举类型还支持反查操作（通过值查名字）
// 查询18岁的是谁？
console.log(Age[18])
// 查询48谁的是谁？
console.log(Age[48])
// 查询0是代表男性还是女性？
console.log(Gender[0])

// Any类型 
// 一般情况下用于描述动态获取到的内容，这种数据不清楚其具体类型
let res1:any = {code:200, msg:'ok', data:['吃','喝','玩']}
let res2:any = {code:200, msg:'ok', data:{title:'电影名', actor:'吴京'}}
// any类型的变量可以指向数据结构不确定的一组数据 
// any的作用是为了告诉ts编译器：这个数据类型比较复杂，不需要检查它
// 一旦变量为any类型，导致编译器不晓得变量保存的具体数据结构，没有提示
let str = '{"code":200, "msg":"ok", "data":["吃","喝","玩"]}'
res1 = JSON.parse(str)
console.log(res1.code)


// ---------类型断言---------------------------------------
// 模拟发送请求，得到的响应数据
let respText = '{"code":200, "msg":"ok", "data":[1,2,3,4,5]}'
// 将响应文本转成js对象
let respObj:any = JSON.parse(respText)
// 若respObj是any类型，则不会有相应的数据结构的提示
console.log(respObj.code, respObj.data) 

// 遇到这种情况后，可以对respObj做一次类型断言（人工断定数据类型）
let resp: {
  code:number, 
  msg:string, 
  data:number[]
} = JSON.parse(respText)
console.log(resp.code, resp.data)
// 类型断言的作用就是告诉ts编译器
// 放心：resp一定是一个对象，里面的属性一定是。。。。。。。。

let r1:any = 1 + 3
let s1:string = r1       // 类型断言any能强制断言成string
Typescript中的函数

和javascript一样，Typescript函数可以创建有名字的函数和匿名函数。

function name(param1, param2){
    return param1 + param2
}

ts函数与js函数不同的是：ts函数需要明确的指定涉及到的数据类型：参数的类型、返回值的类型等。

function add (x:number, y:number) :number {
  return x + y
}

//02_func.ts
function add (x:number, y:number) :number {
  return x + y
}
let myAdd = function (x:number, y:number) :number {
  return x + y
}

let r:number = add(5, 6)
let r2 = myAdd(3, 4)  // 类型推论   r2的类型就是方法返回值的类型

// 声明一个函数：getArea(半径)，求圆的面积 (保留2位小数)
function getArea(r:number): string{
  return (Math.PI*r*r).toFixed(2)
}
let area = getArea(5)
console.log(area)

// 匿名函数   指定函数类型变量的数据类型  (参数列表类型)=>返回值类型
let getArea2 : (r:number)=>string = 
  function (r:number): string{return (Math.PI*r*r).toFixed(2)}


// 函数的参数
// 调用ts的函数时，传递的参数列表必须与函数声明的参数列表保持一致
console.log(add(10, 5))
// console.log(add(10, '5'))  // Error   数据类型要匹配
// console.log(add(10, 5, 1))  // Error  参数数量要匹配


// TS函数的可选参数
function getMovies(
  keyword:string, page:number = 1, pagesize?:number){
    console.log('查询关键字：' + keyword)
    console.log('查询页码：' + page)
    console.log('每页条目数：' + pagesize)
}
getMovies('杀手', 2)
getMovies('杀手', 3, 100)
getMovies('杀手', 100)

// 剩余参数，ts会把参数列表剩余参数都封装到一个数组中
function buildName (firstName:string, ...restName:string[]){
  return firstName + "·" + restName.join('·')
}
console.log(buildName('亮', '小', 'Smith', '成'))

面向对象编程 一种编程思维逻辑

let p1 = new Person('liangliang', 38, 'male')
let p2 = new Person('xiaoxin', 28, 'male')
p1.compare(p2)

类型和对象

Typescript中的自定义类型

通过自定义类型就可以描述世界上一类事物。通过该自定义类型创建的对象就相当于该类事物的一个具体的实例。

class Person{}  描述人类    
	new Person() 一个具体的人   
	new Person() 第二个具体的人
class Animal{}  描述动物
    new Animal() 一个具体的动物
    new Animal() 第二个具体的动物

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2224461.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2024年MathorCup妈杯大数据竞赛选题人数发布

2024年MathorCup妈杯大数据竞赛选题人数发布

经过24个小时&#xff0c;各个平台的相关选题投票、相关文章阅读量等各项数据进行统计&#xff0c;利用之前的评估办法&#xff08;详见注释&#xff09;。在开赛后24小时&#xff0c;我们基本确定各个赛题选题人数&#xff0c;以帮助大家更好地分析赛题局势。 题目人数A46B72 …
阅读更多...
【Vulnhub靶场】DC-4

【Vulnhub靶场】DC-4

DC-4靶场下载地址https://www.five86.com/downloads/DC-4.zip 本机IP&#xff1a;192.168.118.128 靶机IP&#xff1a;192.168.118.0/24 信息收集 扫描主机存活&#xff0c;扫描端口&#xff0c;扫描服务 第一步扫描出主机ip为192.168.118.141 nmap -sP 192.168.118.0/24 nm…
阅读更多...
Java后端面试题：Java基础篇

Java后端面试题：Java基础篇

目录 Java基础 1.请你说说Java中基本数据类型的bit长度&#xff1f; 2.switch支持哪些数据类型&#xff1f;支持long么&#xff1f; 3.讲一下常见编码方式&#xff1f; 4.char能不能存储中文&#xff1f; 5.为什么数组索引从0开始呢&#xff1f;假如从1开始不行吗&#xf…
阅读更多...
Java篇图书管理系统

Java篇图书管理系统

目录 前言 一. 图书管理系统的核心 二. 图书管理系统基本框架 2.1 book包 2.1.1 Book&#xff08;书籍类&#xff09; 2.1.2 Booklist (书架类&#xff09; 2.2 user包 2.2.1 User类 2.2.2 Administrator(管理员类) 2.2.3 Visitor&#xff08;用户类&#xff09; 2.…
阅读更多...
数据结构 - 散列表，初探

数据结构 - 散列表，初探

今天我们继续学习新的数据结构-散列表。 01定义 我们先来了解一些常见概念名词解释。 散列&#xff1a;散列表的实现叫做散列&#xff0c;是一种实现以常数级时间复杂度执行查找、插入和删除的技术&#xff1b; 散列值&#xff1a;通过散列函数对输入值&#xff08;key&…
阅读更多...
【c++篇】：从基础到实践--c++内存管理技巧与模版编程基础

【c++篇】：从基础到实践--c++内存管理技巧与模版编程基础

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;c篇–CSDN博客 文章目录 前言一.c/c内存分布二.c/c的动态内存管理方式2.1.c语言的动态内存管…
阅读更多...
JavaEE初阶---多线程（五）---定时器/线程池介绍

JavaEE初阶---多线程（五）---定时器/线程池介绍

文章目录 1.定时器的介绍2.线程池2.1为什么需要使用线程池2.2如何进行线程池的创建2.3普通的构造方法的局限性2.4该种对象创建的方法的特点2.5线程池的模拟实现的逻辑 3.ThreadPoolExecutor类的介绍3.1构造方法3.2四种拒绝的策略 1.定时器的介绍 下面的这个就是我们的这个定时…
阅读更多...
基于JSP的高校食堂食材选购管理系统【附源码】

基于JSP的高校食堂食材选购管理系统【附源码】

基于JSP的高校食堂食材选购管理系统 效果如下&#xff1a; 系统首页界面 用户登录页面 食材信息页面 论坛交流界面 管理员登录界面 管理员功能主界面 食材信息管理界面 订单配送管理界面 用户功能主界面 商家功能主界面 司机功能主界面 研究背景 近年来互联网技术的发展使得…
阅读更多...
【C++篇】手撕string类：从初级到高级入门

【C++篇】手撕string类：从初级到高级入门

1.为什么手撕string类 在面试或者一些学习场景中&#xff0c;手撕 string 类不仅仅是对字符串操作的考察&#xff0c;更多的是考察程序员对 C 内存管理的理解。例如&#xff0c;深拷贝与浅拷贝的实现&#xff0c;如何正确重载赋值运算符&#xff0c;如何避免内存泄漏&#xff…
阅读更多...
线上环境的 JAVA 程序占用太多 CPU 资源，定位原因

线上环境的 JAVA 程序占用太多 CPU 资源，定位原因

线上环境的 JAVA 程序占用太多 CPU 资源&#xff0c;定位原因 top 命令执行显示一下结果 我们可以看到有一个 PID 是 4054 的应用程占用了超过一半的 CPU 资源&#xff0c;这是十分糟糕的事情&#xff0c;这个时候我们首先定位一下他是哪个线程在这里搞事情&#xff0c;这个时…
阅读更多...
【JavaSE】认识String类，了解，进阶到熟练掌握

【JavaSE】认识String类，了解，进阶到熟练掌握

#1024程序员节 | 征文# 下面就让博主带领大家一起解决心中关于String类的疑问吧~~~ 1.字符串构造&#xff1a; 第一种和第二种&#xff08;有一定的区别&#xff0c;在常量池上&#xff09; public static void main(String[] args) { // 使用常量串构造 String s1 "h…
阅读更多...
【机器学习】——numpy教程

【机器学习】——numpy教程

文章目录 1.numpy简介2.初始化numpy3.ndarry的使用3.1numpy的属性3.2numpy的形状3.3ndarray的类型 4numpy生成数组的方法4.1生成0和1数组4.2从现有的数组生成4.3生成固定范围的数组4.4生成随机数组 5.数组的索引、切片6.数组的形状修改7.数组的类型修改8.数组的去重9.ndarray的…
阅读更多...
【Visual Studio】下载安装 Visual Studio Community 并配置 C++ 桌面开发环境的图文教程

【Visual Studio】下载安装 Visual Studio Community 并配置 C++ 桌面开发环境的图文教程

引言 Visual Studio 是一个面向 .NET 和 C 开发人员的综合性 Windows 版 IDE&#xff0c;可用于构建 Web、云、桌面、移动应用、服务和游戏。 安装步骤 访问 Visual Studio 的官方下载页面&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads/运行已下载的 V…
阅读更多...
java疫苗发布和接种预约系统源码(springboot)

java疫苗发布和接种预约系统源码(springboot)

项目简介 疫苗发布和接种预约系统实现了以下功能&#xff1a; 疫苗发布和接种预约系统的主要使用者分为&#xff1a; 管理员对公告信息&#xff0c;医院信息&#xff0c;疫苗信息&#xff0c;医生信息&#xff0c;用户信息&#xff0c;论坛帖子信息以及预约接种信息等信息进行…
阅读更多...
ThinkPad T480拆机屏幕改装：便携式显示器DIY指南

ThinkPad T480拆机屏幕改装：便携式显示器DIY指南

ThinkPad T480拆机屏幕改装&#xff1a;便携式显示器DIY指南 本文记录了将旧笔记本电脑 T480 拆机屏幕改装为便携式显示器的全过程。作者在决定升级设备后&#xff0c;选择通过 DIY 方式利用原有的屏幕资源。文章详细介绍了屏幕驱动板的安装、螺丝孔的剪裁、排线连接及固定的步…
阅读更多...
系统性能优化——绑核

系统性能优化——绑核

简要 绑核正如其名&#xff0c;将线程/进程绑定在一个或多个CPU核心。该技术可以使进程或线程在特定的处理器上运行&#xff0c;而不会被操作系统调度到其他处理器上。这里有两层含义。 如果线程被绑定在指定核心上&#xff0c;则只会在该核心上运行&#xff0c;即使其他核心…
阅读更多...
Django自定义过滤器

Django自定义过滤器

一、介绍 Django过滤器是一种用于在Django模板中处理数据的技术。它们的主要作用是对模板中的变量进行加工、过滤或格式化&#xff0c;然后返回一个新的值供模板使用。这些过滤器可以在变量输出时&#xff0c;对输出的变量值做进一步的处理&#xff0c;以满足特定的显示需求。…
阅读更多...
C# 串口通信教程

C# 串口通信教程

串口通信&#xff08;Serial Communication&#xff09;是一种用于设备之间数据传输的常见方法&#xff0c;通常用于与外部硬件设备&#xff08;如传感器、机器人、微控制器&#xff09;进行通信。在 C# 中&#xff0c;System.IO.Ports 命名空间提供了与串口设备交互的功能&…
阅读更多...
Golang | Leetcode Golang题解之第508题出现次数最多的子树元素和

Golang | Leetcode Golang题解之第508题出现次数最多的子树元素和

题目&#xff1a; 题解&#xff1a; func findFrequentTreeSum(root *TreeNode) (ans []int) {cnt : map[int]int{}maxCnt : 0var dfs func(*TreeNode) intdfs func(node *TreeNode) int {if node nil {return 0}sum : node.Val dfs(node.Left) dfs(node.Right)cnt[sum]if…
阅读更多...
数字后端零基础入门系列 | Innovus零基础LAB学习Day6

数字后端零基础入门系列 | Innovus零基础LAB学习Day6

今天没有具体的数字IC后端lab实验。今天的重点是熟悉掌握静态时序分析STA中的几类timing path以及setup和hold检查机制&#xff08;包含setup和hold计算公式&#xff09;。 芯片流片失败的那些故事 数字后端零基础入门系列 | Innovus零基础LAB学习Day5 等大家把今天内容学习…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023