TypeScript基础(上)

介绍

TypeScript,简称 ts,是微软开发的一种静态的编程语言,它是 JavaScript 的超集。简单来说,js 有的 ts 都有,所有js 代码都可以在 ts 里面运行。
ts 支持类型支持,ts = type +JavaScript。

ts和js的区别

1.JavaScript 属于动态编程语言,而ts 属于静态编程语言
● js:边解释边执行,错误只有在运行的时候才能发现
● ts:先编译再执行,在写的时候就会发现错误了(ts不能直接执行,需要先编译成 js )
2.ts 完全支持 js ,可以直接转换

ts优势
类型安全:

TS引入了类型检查,可以在编译阶段发现类型错误,减少程序运行期间的错误。这有助于提高代码的稳定性和可维护性。
更好的代码维护性:TS支持模块化、命名空间、接口等特性,使得代码更加可读、可维护、可扩展。

面向对象编程:

TS支持类、继承、抽象类、接口等面向对象编程特性,让代码更加灵活和易于扩展。

编译时静态检查:

TS可以在编译过程中对代码进行语法和类型检查,减少运行时的错误。

兼容性:

TS可以编译成ES5、ES6、ES7等不同版本的JavaScript,可以兼容各种浏览器和Node.js。

易于学习:

对于已经熟悉JavaScript的开发者来说,TS的学习曲线相对较低。

社区支持:

TS拥有庞大的社区支持和丰富的第三方库,这有助于提高开发效率和代码质量。

与JavaScript的互操作性:

TS最终编译为JavaScript,因此在使用TS开发时,可以直接利用现有的JavaScript生态系统。

安装

如果本地环境已安装了npm工具,那么直接使用以下命令安装TypeScript

npm install -g typescript

安装完之后检查是否出现版本号确认安装完毕

tsc -v
//Version 5.6.2

基本使用

新建一个app.ts文件,添加代码如下:

var message:string = "Hello World" 
console.log(message)

执行以下命令将ts文件转换成js文件

tsc app.ts

然后会在目录下生成同名js文件,此时运行js文件

node app.js

同时编译多个ts文件

tsc file1.ts file2.ts file3.ts

基础语法

TypeScript主要由以下几个部分组成

模块

模块是在自身作用域里执行,并不是在全局作用域,定义在模块里的变量,函数,类等在模块外部不可见,除非用export导出,同样,我们必须用import导入这些模块里的变量,函数,类。

导出
// 文件名 : app.ts 
export interface app { // 代码部分
}
导入
import app = require("./app");
函数
函数返回值
function function_name():return_type { // 语句return value; 
}

● return_type 是返回值的类型。
● return 关键词后跟着要返回的结果。
● 一般情况下,一个函数只有一个 return 语句。
● 返回值的类型需要与函数定义的返回类型(return_type)一致。

带参数函数
function func_name( param1 [:datatype], param2 [:datatype]) {   }

● param1、param2 为参数名。
● datatype 为参数类型。
可选参数和默认参数

可选参数

在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?

function buildName(firstName: string, lastName: string) {return firstName + " " + lastName;
}let result1 = buildName("Bob");                  // 错误,缺少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误,参数太多了
let result3 = buildName("Bob", "Adams");         // 正确

我们将 lastName 设置为可选参数

变量
语句和表达式
注释
// 这是一个单行注释/* 这是一个多行注释 这是一个多行注释 这是一个多行注释 
*/
空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。
空格、制表符通常用来缩进代码,使代码易于阅读和理解

大小写

TypeScript区分大小写

分号

分号是可选的,可以不用,但是语句写在同一行时,需要用分号分隔

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

探索MemGPT:AI界的新宠儿

文章目录 探索MemGPT:AI界的新宠儿1. 背景介绍2. MemGPT是什么?3. 如何安装MemGPT?4. 简单的库函数使用方法5. 场景应用场景一:创建持久聊天机器人场景二:文档分析场景三:多会话聊天互动 6. 常见Bug及解决方…

Nginx笔记-使用alias映射磁盘目录(nginx文件下载)

Nginx 配置中,alias 关键字用于指定一个路径作为请求的别名。当客户端请求该别名路径下的资源时,Nginx会将其映射到实际的文件系统路径进行访问。这种方式可以用来隐藏实际文件系统路径,或者将客户端请求重新定向到另一个路径。 如下例子&am…

【幸运数 / A】

题目 代码 #include <bits/stdc.h> using namespace std; bool check(int num) {int cnt 0;int x num;while (x){cnt;x / 10;}if (cnt % 2)return false;cnt / 2;int sum 0, half 0, i 0;x num;while (x){i;if (i < cnt)half x % 10;sum x % 10;x / 10;}if (…

LeetCode 热题 100 回顾17

干货分享&#xff0c;感谢您的阅读&#xff01;原文见&#xff1a;LeetCode 热题 100 回顾_力code热题100-CSDN博客 一、哈希部分 1.两数之和 &#xff08;简单&#xff09; 题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标…

vue3 + ts + pnpm:nprogress / 页面顶部进度条

一、简介 nprogress 是一个轻量级的进度条库&#xff0c;它适用于在网页上添加顶部进度条&#xff0c;用于指示页面加载进度或任何长时间的运行过程。这个库非常流行&#xff0c;因为它易于使用且视觉效果很好。 二、安装 pnpm add nprogress 三、在使用的页面引入 / src/v…

计算机毕业设计springboot+vue家居全屋家具定制系统

目录 功能和技术介绍系统实现截图开发核心技术介绍&#xff1a;使用说明开发步骤编译运行核心代码部分展示需求分析系统设计软件测试详细视频演示源码获取 功能和技术介绍 本项目包含程序源码和MySql脚本和文档,idea开发,支持Eclipse。使用vue的本质是SpringFramework【IoC&am…

深度学习——D2(数据操作)

N维数组 创建数组 访问元素 一列: [ : , 1 ] 反向累积、正向累积&#xff08;自动求导&#xff09; 梯度 梯度&#xff08;Gradient&#xff09;是微积分中的一个重要概念&#xff0c;主要用于描述一个函数在某个区域内的变化情况。以下是对梯度的详细解释&#xff1a; 一…

Vue(15)——组合式API②

生命周期函数 选项式组合式beforeCreate/createdsetupbeforeMountonBeforeMount mountedonMounedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmounted 父子通信 父传子基本思想&#xff1a; 父组件中给子组件绑定属性…

Stable Diffusion 使用详解(12)--- 设计师风格变换

目录 背景 seg模型&#xff08;语义分割&#xff09; 描述 原理 实战-装修风格变换 现代风格 欧式风格转换 提示词及相关参数设置 模型选择 seg cn 加持 效果 还能做点啥 问题 解决方法 出图效果 二次优化调整 二次出图效果 地中海风格转换 参数修改 效果 …

服务器离线安装python库包

conda安装参考服务器离线安装anaconda-CSDN博客 python离线安装参考服务器配置虚拟环境及离线安装python-CSDN博客 1.离线安装pip&#xff08;这里是因为后续使用pypi安装其他库更方便&#xff0c;如果不想用pip去conda下载其他安装包也可以&#xff0c;后面用conda安装和这里…

Python练习宝典:Day 2 - 选择题 -函数、文件与IO

目录 一、函数二、文件与IO 一、函数 1.在函数内部可以通过关键字()来定义全局变量: A.global B.all C.def D.lambda2.在Python中使用什么表达式创建匿名函数? A.global B.lambda C.def D.list3.使用形式参数的名字来确定输入的参数值,是指什么参数? A.位置参数 B.默认参…

CentOS Stream 9部署Redis

1、安装Redis sudo dnf install redis 2、启动Redis服务 sudo systemctl start redis 3、设置Redis开机自启 sudo systemctl enable redis 4、打开Redis配置文件&#xff1a; sudo vi /etc/redis/redis.conf 在配置文件中找到并修改以下两行&#xff0c;确保密码验证功能已启…

招联金融秋招-2025

【投递方式】 直接扫下方二维码&#xff0c;或点击内推官网https://wecruit.hotjob.cn/SU61025e262f9d247b98e0a2c2/mc/position/campus&#xff0c;使用内推码 igcefb 投递 【招聘岗位】 后台开发 前端开发 数据开发 数据运营 算法开发 技术运维 软件测试 产品策划 产品运营…

【AIGC】ChatGPT提示词助力广告文案、PPT制作与书籍推荐的高效新模式

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;高效广告推销文案提示词使用方法 &#x1f4af;AI自动生成PPT全流程提示词使用方法 &#x1f4af;精选书籍推荐爆款文案提示词使用方法 &#x1f4af;小结 &#x1f4af;…

数据结构之线性表——LeetCode:82. 删除排序链表中的重复元素 II,21. 合并两个有序链表,23. 合并 K 个升序链表

82. 删除排序链表中的重复元素 II 题目描述 82. 删除排序链表中的重复元素 II 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 运行代码 class Solution { public:ListNode* deleteDup…

招联金融秋招内推喇--18薪

【投递方式】 直接扫下方二维码&#xff0c;或点击内推官网https://wecruit.hotjob.cn/SU61025e262f9d247b98e0a2c2/mc/position/campus&#xff0c;使用内推码 igcefb 投递 【招聘岗位】 后台开发 前端开发 数据开发 数据运营 算法开发 技术运维 软件测试 产品策划 产品运营…

三个视觉领域常用数据标注工具:labelImg 解压安装基础使用、 label-studio 的安装和基础使用【检测数据标注】

&#x1f947; 版权: 本文由【墨理学AI】原创、在CSDN首发、各位大佬、敬请查阅&#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 本次博文主要对如下三个视觉领域常用数据标注工具进行初步整理 labelImglabel-studio 工具Robo…

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-22

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-22 引言: 全球最热销的国产游戏-《黑神话: 悟空》不仅给世界各地玩家们带来愉悦&#xff0c;而且对计算机人工智能研究也带来新的思考。在本期的论文速读中&#xff0c;我们带来一篇关于视觉语言模型&#xff0…

想学习下Python和深度学习,Python需要学习到什么程度呢?

想要学习Python和深度学习&#xff0c;Python的学习程度需要达到能够熟练运用这门语言进行编程&#xff0c;并能够理解和实现深度学习模型的基本构建和训练过程。以下是一些推荐的书籍&#xff0c;可以帮助你系统地学习Python和深度学习&#xff1a; Python学习推荐书籍 《Py…

Ubuntu清理内存导致的一系列错误及解决方法

文章目录 火狐浏览器和pycharm消失打不开 安不上 卸不掉后记 火狐浏览器和pycharm消失 打不开 安不上 卸不掉 清理内存后&#xff0c;火狐和pycharm的图标都消失了&#xff0c;在终端输入Firefox显示无法打开 应当先snap install firefox&#xff0c;然而snap install firefo…