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.rhkb.cn/news/457429.html

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

相关文章

ffmpeg视频滤镜:腐蚀滤镜

滤镜简述 erosion 官网链接> FFmpeg Filters Documentation 这个滤镜会在视频上应用腐蚀操作&#xff0c;腐蚀操作是形态学中一种操作&#xff0c;接触过opencv的同学应该很熟悉。滤镜主要有如下作用&#xff1a; 去除噪声&#xff1a;腐蚀可以帮助去除图像中的小颗粒噪…

【Linux学习】(5)软件包管理器yum|编辑器vim

前言 了解Linux的软件生态&#xff0c;学会yum安装软件掌握vim编辑器的使用添加普通用户到系统的信任白名单 一、Linux 软件包管理器 yum 1. Linux安装软件 源代码安装&#xff1a;在Linux中源代码安装软件是一种比较麻烦的方式&#xff0c;他需要你自己配置编译环境、编译源…

Jenkins发布vue项目,版本不一致导致build错误

问题一 yarn.lock文件的存在导致在自动化的时候&#xff0c;频频失败问题二 仓库下载的资源与项目资源版本不一致 本地跑好久的一个项目&#xff0c;现在需要部署在Jenkins上面进行自动化打包部署&#xff1b;想着部署后今后可以省下好多时间&#xff0c;遂兴高采烈地去部署&am…

c++:string类

想要深刻理解string类最好自己实现一个&#xff0c;可以看我的这篇文章&#xff1a;c:模拟实现string类-CSDN博客想要学好库中的string最好自己实现一个出来&#xff0c;能够加深对string的理解。蟹蟹观看&#xff01;关注&#xff01;评论&#xff01;一键三连&#xff01;htt…

模型 支付矩阵

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。策略选择的收益分析工具。 1 支付矩阵的应用 1.1 支付矩阵在市场竞争策略分析中的应用 支付矩阵是一种强大的决策工具&#xff0c;它在多个领域的应用中都发挥着重要作用。以下是一个具体的应用案例…

WebView渲染异常导致闪退解决方案

背景&#xff1a; App主页面使用了大量WebView容器(10个以上)显示图表信息&#xff0c;最新发现bugly上面出现一些关于浏览器Native Crash&#xff0c;如下&#xff1a; 经排查&#xff0c;是WebView渲染失败导致Crash&#xff0c;可以通过webView.loadUrl("chrome://cra…

《Windows PE》7.4 资源表应用

本节我们将通过两个示例程序&#xff0c;演示对PE文件内图标资源的置换与提取。 本节必须掌握的知识点&#xff1a; 更改图标 提取图标资源 7.4.1 更改图标 让我们来做一个实验&#xff0c;替换PE文件中现有的图标。如果手工替换&#xff0c;一定是先找到资源表&#xff0c;…

Linux -- 共享内存(2)

目录 命令 ipcs -m &#xff1a; 命令 ipcrm -m shmid&#xff1a; 共享内存的通信&#xff1a; 为什么共享内存更高效&#xff1f; 代码&#xff1a; ShmClient.cc&#xff1a; ShmServer.cc&#xff1a; 结果&#xff1a; 如何让共享内存实现同步&#xff1f; 代码&a…

基于SSM的BBS社区论坛系统源码

运行环境&#xff1a;ideamysql5.7jdk8maven 使用技术&#xff1a;ssmmysqlshirolayui 功能模块&#xff1a;用户管理、模板管理、帖子管理、公告管理、权限管理等

echarts:导入excel生成桑葚图

前言 前两天帮别人实现了一个小功能&#xff0c;主要是选择excel文件&#xff0c;读取里面的数据&#xff0c;将数据生成桑葚图 echarts官方桑葚图案例 实现 因为就是一个单纯的html文件&#xff0c;用到的库都是通过CDN的方式加载的&#xff0c;会有一些慢 <!DOCTYPE …

IPC 进程间通信 信号量集合 Linux环境 C语言实现

只用于多进程间的并发控制 一个信息量集合(信号量集 或 信息量数组)中顺序存储着多个信号量 相关接口函数&#xff1a; 实际项目&#xff0c;直接调用semop函数来作为某个或某几个信号量的PV操作函数会很不方便&#xff0c;因此会对信号量集合的接口进行二次封装&#xff0c;封…

AI实操Excel:在Excel中学习人工智能基础算法

人工智能&#xff08;AI&#xff09;已经成为当今科技领域最热门的话题之一&#xff0c;但对于初学者来说&#xff0c;直接上手复杂的编程和算法可能会感到有些困难。今天&#xff0c;我要向大家介绍一个非常实用的工具——AI实操Excel&#xff0c;这是一个通过Excel实现人工智…

「二叉树进阶题解:构建、遍历与结构转化全解析」

文章目录 根据二叉树创建字符串思路代码 二叉树的层序遍历思路代码 二叉树的最近公共祖先思路代码 二叉搜索树与双向链表思路代码 从前序与中序遍历序列构造二叉树思路代码 总结 根据二叉树创建字符串 题目&#xff1a; 样例&#xff1a; 可以看见&#xff0c;唯一特殊的就…

影刀RPA实战:常见实用功能指令

1. 电脑锁屏与解屏 在实际工作中&#xff0c;我们为了自身工作电脑数据文件的安全&#xff0c;都会为电脑设置密码&#xff0c;当我们离开电脑时&#xff0c;直接锁屏&#xff0c;即使不手动锁屏&#xff0c;也会在一定时间内自动锁屏。 如果你的工作是影刀RPA帮你自动化处理…

Spring Boot驱动的厨艺社交平台设计与实现

5 系统实现 5.1食材分类管理 管理员管理食材分类&#xff0c;可以添加&#xff0c;修改&#xff0c;删除食材分类信息。下图就是食材分类管理页面。 图5.1 食材分类管理页面 5.2 用户信息管理 管理员管理用户信息&#xff0c;可以添加&#xff0c;修改&#xff0c;删除用户信…

kafka 分布式(不是单机)的情况下,如何保证消息的顺序消费?

大家好&#xff0c;我是锋哥。今天分享关于【kafka 分布式&#xff08;不是单机&#xff09;的情况下&#xff0c;如何保证消息的顺序消费?】面试题&#xff1f;希望对大家有帮助&#xff1b; kafka 分布式&#xff08;不是单机&#xff09;的情况下&#xff0c;如何保证消息的…

量子变分算法 (python qiskit)

背景 变分量子算法是用于观察嘈杂的近期设备上的量子计算效用的有前途的候选混合算法。变分算法的特点是使用经典优化算法迭代更新参数化试验解决方案或“拟设”。这些方法中最重要的是变分量子特征求解器 (VQE)&#xff0c;它旨在求解给定汉密尔顿量的基态&#xff0c;该汉密尔…

mac 上使用 cmake 构建包含 OpenMP 的项目

安装依赖 # clang 默认不支持 -fopenmp&#xff0c;因为它没有内置 OpenMP 支持。 # 为了解决这个问题&#xff0c;需要安装 libomp 并配置 clang 使用 libomp brew install libomp# macOS 自带的 clang 编译器被修改过&#xff0c;默认禁用了 OpenMP&#xff0c; # 而不支持 …

【K8S系列】Kubernetes Service 基础知识 详细介绍

在 Kubernetes 中&#xff0c;Service 是一种抽象的资源&#xff0c;用于定义一组 Pod 的访问策略。它为这些 Pod 提供了一个稳定的访问入口&#xff0c;解决了 Pod 可能频繁变化的问题。本文将详细介绍 Kubernetes Service 的类型、功能、使用场景、DNS 和负载均衡等方面。 1.…

class 36 二叉树高频题目 - 上 (不含有树形dp)

1. BFS 的两种方式 如下图, 是一个二叉树. 我们需要按照层的方式来遍历这棵树. 1.1 使用 JDK 自带的类实现(链表实现, 经典 BFS) 首先我们实现一个队列, 这个队列从头进, 从尾出.然后将根节点放入其中, 然后将放入的节点弹出,然后继续验证弹出的节点有没有左孩子, 若是有, 将…