TypeScript基础简介

TypeScriptJavascript的一个超集。 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文件(自动编译,自动执行jsCodeRunner

在这里插入图片描述

查阅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.mzph.cn/diannao/57903.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络搜索引擎Shodan(2)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 声明&#xff1a;本文主要用作技术分享&#xff0c;所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险&#xff0c;并遵循相关法律法规。 感谢泷…

vue+spreadjs开发

创建vue3项目 pnpm create vite --registryhttp://registry.npm.taobao.org安装spreadjs包 pnpm install "grapecity-software/spread-sheets17.1.7" "grapecity-software/spread-sheets-resources-zh17.1.7" "grapecity-software/spread-sheets-vu…

基于DDPG算法的股票量化交易

项目源码获取方式见文章末尾&#xff01; 回复暗号&#xff1a;13&#xff0c;免费获取600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 **《------往期经典推荐------》**项目名称 1.【基于PyQTFaceNet卷积神经网络实现的学生人脸识别考勤系统】 2.【卫星图像道…

计算机强校99+分《数据库》课设

高校成绩数据库系统设计与实现 1、需求分析 1.1 数据需求描述 1.2 系统功能需求 1.3 其他性能需求 2、概念结构设计 2.1 局部E-R图 2.2 全局E-R图 2.3 优化E-R图 3、逻辑结构设计 3.1 关系模式设计 3.2 数据类型定义 3.3 关系模式的优化 4、物理结构…

川渝地区软件工程考研择校分析

C哥专业提供——计软考研院校选择分析专业课备考指南规划 通过最新数据分析,5所高校软件工程专业2025年考研难度从高到低预计为: 电子科技大学 >> 四川大学 > 重庆大学 ≈ 西南交通大学 > 西南大学 对于想考川渝地区985但核心目标为优先上岸的考生,建议重点考虑西…

Spring Boot助力的厨艺互动平台开发指南

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Sprin…

在浏览器里就可以运行的本地AI模型 - 一键去除图片背景AI

前言 浏览器的功能越来越强大, 从Chrome 113 开始, 谷歌把WebGPU引入到了浏览器中, 通过WebGPU的API, 可以直接访问本机电脑的GPU资源. 既然GPU资源可以在浏览器里运行, 给AI模型推理等带来了便利, 使得一些AI模型可以直接在浏览器里运行. 本文主要介绍介绍以下WebGPU的基本概…

【前端开发入门】JavaScript快速入门--js变量

目录 引言一、为什么要定义变量二、定义变量的一些技巧1. 解构赋值1.1 Object解构赋值1.2 Array解构赋值1.3 总结规律 2. 字符串拼接 三、变量作用域四、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容&#xf…

uniapp 发起post和get请求!uni.request(OBJECT)

在uni-app中&#xff0c;发起HTTP请求主要通过uni.request方法实现。 Get请求 使用uni.request请求api&#xff0c;并且将 method参数设置为GET&#xff0c;有参数的话直接data&#xff1a;{}传递&#xff0c; success是请求成功回调函数&#xff0c;fail是失败函数 <but…

ipv6地址子网划分

IPv6 从左至右一共有8段地址,每一段用16进制表示&#xff0c;共128位。 例如&#xff1a;2001:0DB8:0001:0000:0000:0000:0000:0000 每一段的子网掩码如下&#xff1a; 第1段的掩码为是 0~16 01616 第2段的掩码为是 17~32 161632 第3段的掩码为是 33~48 …

QQ音乐绿钻音效+DTS音效解锁

​ 工具 mt管理器 simplehook QQ音乐&#xff08;自行下载&#xff09; DTS音效修改方法&#xff1a;com.tencent.qqmusic.business.user.a.r1 赋值为1 绿钻音效修改方法&#xff1a; com.tencent.qqmusic.business.user.a.q1 赋值为1 建议使用hook实现&#xff0c;这里贴上si…

动态IP是什么?

随着互联网成为人们生活的重要组成部分&#xff0c;以信息传递为主导的时代种&#xff0c;网络连接质量对我们的工作效率、学习进度以及娱乐体验等方面都有很大影响。 动态IP&#xff0c;作为网络连接中的一种重要IP代理形式&#xff0c;越来越受到用户的欢迎。本文将深入解析…

关于 Linux 内核“合规要求”与俄罗斯制裁的一些澄清

原文&#xff1a;Michael Larabel - 2024.10.24 当 一些俄罗斯的 Linux 开发者被从内核的 MAINTAINERS 文件中移除 时&#xff0c;原因被描述为“合规要求”&#xff0c;但并未明确这些要求具体涉及什么内容。随后&#xff0c;Linus Torvalds 对此发表了评论&#xff0c;明确指…

计算机网络(十二) —— 高级IO

#1024程序员节 | 征文# 目录 一&#xff0c;预备 1.1 重新理解IO 1.2 五种IO模型 1.3 非阻塞IO 二&#xff0c;select 2.1 关于select 2.2 select接口参数解释 2.3 timeval结构体和fd_set类型 2.4 socket就绪条件 2.5 select基本工作流程 2.6 简单select的服务器代…

【Linux】信号量,线程池

目录 信号量 初始化​编辑 销毁 等待 发布 基于环形队列的生产消费模型 问题解答&#xff1a; 代码&#xff1a; 线程池 线程池的实现 &#xff08;1&#xff09;初始化&#xff0c;构造大致框架 &#xff08;2&#xff09;创建线程 &#xff08;3&#xff09;创建任…

Unity 世界空间(World Space)UI被模型遮挡的解决办法(Overlay摄像机)

问题&#xff1a; 想要显示掉落的物品名&#xff0c;但是这个世界空间的UI层会被模型遮挡&#xff0c;如下&#xff1a; 解决&#xff1a; 1.新建一个专门的物品名图层&#xff0c;如ItemUI 2.在主摄像机下新建一个子摄像机ItemCamera&#xff0c;渲染类型设置为Overlay&#…

Unity加载界面制作

效果 UI部分 结构 说下思路: 因为是加载界面,所以最上层是一个Panel阻止所有的UI交互,这个Panel如果有图片就加一个图片,如果没有可以把透明度调到最大,颜色设为黑色. 下面最核心的就是一个进度条了,有图片的话,将进度条的底放进来,将进度条锚点设为下中,将滑动块的尺寸设为0.…

迈威通信西安采矿展大放异彩,驱动煤矿智能转型加速跑

金秋十月&#xff0c;一场矿业技术的盛宴如约而至。10月23日至25日&#xff0c;中国(西安)国际采矿技术交流及设备展览会在西安临空会展中心圆满落下帷幕。迈威通信&#xff0c;作为矿业通信与自动化解决方案的卓越提供商&#xff0c;此次以 “布局多元融合网络&#xff0c;赋能…

SwiftUI 中 List 或 Form 子视图关联的 swipeAction 导致展开动画异常的解决

问题现象 小伙伴们都知道,在 SwiftUI 中更快捷的增强 List 或 Form 子视图(Cell)交互功能的方法是使用 swipeAction 修改器。不过,对其使用稍有不慎也会横生枝节。 如上图所示,不适当的设置 Cell 视图布局会使 swipeAction 无法生成正确的收缩和展开动画。对此我们有什么…

微信小程序文字转语音播报案例

插件申请 在小程序官方申请同声传译插件&#xff0c;地址&#xff1a; mp.weixin.qq.com 引入插件 在app.json中加入 "plugins": {"WechatSI": {"version": "0.3.6","provider": "wx069ba97219f66d99"}},封装…