TypeScript—详解、小案例（配合源代码）

于 2024-04-10 21:53:38 发布
阅读量563 收藏 7
点赞数 6
分类专栏： JAVA语言 VUE 文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wang_ning__/article/details/137599103
版权

简介：TypeScript是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言。

目录

1、TypeScript介绍

2、TypeScript优势

3、TypeScript常用类型

4、代码案例

4.1 字符串、数字、布尔

4.2 interface 接口

4.3 class类

4.4 class类-实现接口

4.5  class类-继承

5、总结

1、TypeScript介绍

图 1.1 TypeScript介绍
上图中展示的是TypeScript和JS之间的关系，即两者之间是包含的关系
图 1.2 TypeScript运行

上图中展示的是TypeScript运行，需要TSC转为JS文件才能运行。

这就需要在电脑中安装TSC文件。安装命令是 npm install -g typescript

2、TypeScript优势

图 2.1 TypeScript优势

上图中展示了TS语言的优势，总结一下，就是在开发过程中，开发工具可以提示语法错误。

3、TypeScript常用类型

图 3.1 TypeScript常用类型
上图中展示的是TS的常见数据类型
图 3.2 TypeScript类型标注位置
上图中展示是TypeScript类型标注位置，对变量、参数、函数返回值

4、代码案例

4.1 字符串、数字、布尔

图 4.1 字符串、数字、布尔

上图中展示的是字符串类型、布尔类型、数字类型和字面量类型的使用方法，其中字面量类型类似于枚举类型。

4.2 interface 接口

图 4.2 interface 接口

上图中展示的是TypeScript的 interface 接口类型。

4.3 class类

图 4.3 class类
上图中展示的是TypeScript的 class类型，这里的class和Java中的类相似，可以在类里面定义属性、函数。

4.4 class类-实现接口

图 4.4 class类-实现接口
上图中展示的在class类中实现接口，可以看到这里还是和JAVA语言是很相似的

4.5  class类-继承

图 4.5 class类-继承
上图中展示的是class类中的继承关系，即通过extends实现继承关系

5、总结

王大宁-真
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TypeScript入门案例
技术记录薄
10-17 646
TypeScript的安装与使用
十、TypeScript之下棋游戏（案例）
程序研博客
06-21 427
玩法：两个玩家，一个玩家使用（X），一个玩家使用（O），轮流在棋盘上下棋（点击单元格）。访问枚举（Gender）中的成员，作为变量（userGender）的值：注意：枚举成员是只读的，也就是说枚举中的成员可以访问，但是不能赋值！注意点：枚举中的成员是只读的，因此，只能访问不能赋值！问题：将枚举成员赋值给变量，变量的值是什么呢？3使用枚举修改当前玩家只要是数组用法都一样，比如：1.通过索引获取元素2.使用for循环遍历总结下棋游戏（XXOO）8.伪数组：具有长度（length）属性和索引（长得像、操作也像数组
【工具篇】高级 TypeScript 案例
qq_56402474的博客
09-17 318
TypeScript 简单使用。内容：联合类型、交叉、装饰器、混入 mixin、泛型、Promise
typeScript的函数实例
马优晨
11-25 416
// 1、遍历 const myBooks =['白菜','青菜','黄瓜']; myBooks.forEach((title, idx, arr) => console.log(idx + '-' + title) ); // 2、参数类型和返回类型 function createUserId(name: string, id: number): string { return name + id; } const createName = (name:string,age:numbe.
Java基础巩固——Java泛型
HZF
08-30 267
1、Java中的泛型 思维导图 1.1、为什么要使用泛型 例如下面这个例子，如果list不加泛型，先向其添加两个String的值，再向其中添加一个Integer的值，这是完全可以的，因为这是list默认的类型是Object的；但是平时开发当中，可能忘了还传入了一个Integer的类型，就会导致如下的错误： public static void main(String[] args) { List list = new ArrayList(); list.add("111")
typescript-generator最新源代码
06-16
最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码最新源代码...
typescript nodejs 依赖注入实现方法代码详解
01-02
今天分享的是用typescript语言实现的ioc模式，这边用到的主要组件是 reflect-metadata 这个组件可以获取或者设置元数据信息，它的作用是拿到原数据后进行对象创建类似C#中的反射，先看第一段代码： import reflect-...
TypeScript教程入门指南详解案例教程
01-11
TypeScript教程入门指南详解案例教程，适合TypeScript小白来学习
微信小程序Demo-插件 for TypeScript wxml config json-附完整源代码.rar
最新发布
03-20
微信小程序Demo-插件 for TypeScript 是一个集成了 TypeScript、WXML、WXSS 和 JSON 配置的完整微信小程序项目。该项目旨在帮助开发者快速上手和构建具有模块化、可扩展性的微信小程序。它包含了一个简单但功能完善...
【愚公系列】2021年12月 Typescript-爬虫案例
热门推荐
时光隧道
12-26 3万+
文章目录前言js配置文件TS配置文件一、自建网页爬取 前言 首先初始化两个文件 js配置文件 npm init -y 生成 { "name": "TypeScript", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "ts-node ./src/crowller.ts" }, "keywords": [], "author": "", "licen
TypeScript入门指南案例教程
11-15
高清PDF 快速学习TypeScript
TypeScript+Cocos creator连连看案例
03-25
自己做的小Demo，大家不嫌弃的话可以看看.
typescript例子-如何使用 jquery
09-01
typescript例子-如何使用 jquery
最全TypeScript中文入门指南详解案例教程
08-09
1、详细安装文章请看 http://blog.csdn.net/jilongliang/article/details/21942911 2、TypeScript官方手册 http://www.typescriptlang.org/Handbook 3、TypeScript官方例子 https://github.com/Microsoft/TypeScriptSamples http://typescript.codeplex.com/ 4、注意TypeScript的ts文件会多处有红色的XX，并不代表它有错误，如果是Myeclipse的话可以在 Myeclipse--->> Exclude From Validation忽略红色的问题 5、看TypeScript例子源碼情況.ts文件，javascript源碼是.js 6、参考博客.. http://ju.outofmemory.cn/entry/954 http://www.oschina.net/question/12_72250 http://www.cnblogs.com/whitewolf/p/4103328.html 7、注意事项: A、必须选择ECMAScript target version ES3或ES5，选择ES6版本太高，生成的js文件会有class关键字 B、eclipse设置默认.ts文件格式是TypeScript Window--->General-Editor--->File Associatior-->*.ts选择默认TypeScript C、 不要勾选Enable typeScript Builder，勾选了这个它不会帮你生成js文件 勾选Disable typeScript Builder即可 D、找到官方的jquery.d.ts文件拷贝到工程项目，在学习开发的时候会引用到.
typescript例子-Backbone.js MVC
09-01
typescript例子-Backbone.js MVC
TypeScript案例-贪吃蛇
每天进步一点点
03-13 1372
使用TypeScript + Webpack + Less实现贪吃蛇的案例
typescript小案例：井字游戏
Welcome to my csdn!
02-02 422
ts小案例：井字游戏 这是排版部分，一个比较简单的排版。 css样式 html,body{ background: rgb(84, 226,226); } #box{ width: 800px; height: 800px; margin:100px auto } .gameTit{ text-align: center; padding: 50px 0; color:aliceblue } .container .row{ displ
TypeScript案例
xiaomifeng_li的博客
11-01 611
全局变量 全局变量foo包含了存在组件总数。 代码 console.log("Half the number of widgets is " + (foo / 2)); 声明 使用declare var声明变量。 如果变量是只读的，那么可以使用declare const。 你还可以使用declare let如果变量拥有块级作用域。 /** 组件总数 */ declare var foo: num...
typescript配置详解
09-05
TypeScript配置详解可以通过编辑一个名为tsconfig.json的配置文件来实现。tsconfig.json是TypeScript编译器的配置文件，它允许您指定编译选项和项目设置。以下是一些常见的配置选项： 1. "compilerOptions"：这个选项包含了一系列配置项，用于指定编译器的行为。例如，您可以设置"target"来指定要编译到的JavaScript版本，设置"outDir"来指定输出目录，设置"strict"来启用严格的类型检查等等。 2. "include"和"exclude"：这两个选项用于指定要包含或排除的文件或文件夹。您可以使用通配符模式来匹配文件路径。 3. "files"：这个选项允许您直接指定要编译的文件列表。如果您不想使用"include"和"exclude"来匹配文件，可以使用这个选项。 4. "extends"：这个选项允许您继承其他配置文件的设置。这对于共享通用设置非常有用。 5. "references"：这个选项用于指定项目之间的引用关系。可以使用这个选项来构建具有多个项目的解决方案。 通过编辑tsconfig.json文件，您可以根据自己的需求配置TypeScript编译器的行为和项目设置。您可以指定编译选项、包含或排除文件、指定输出目录等等。通过这些配置，您可以更好地控制TypeScript项目的编译过程和行为。 要编译TypeScript代码，您可以使用tsc命令行工具。例如，要编译名为helloTypeScript.ts的TypeScript文件，您可以运行以下命令： tsc helloTypeScript.ts 这将使用tsc编译器将TypeScript代码转换为JavaScript代码。编译后的JavaScript文件将与输入文件位于同一目录中，并且具有相同的文件名，但扩展名为.js。通过这种方式，您可以在TypeScript和JavaScript之间进行无缝切换和集成。 请注意，tsc是TypeScript编译器的缩写，表示TypeScript Compiler。它是用于将TypeScript代码编译为JavaScript代码的命令行工具。您可以通过安装TypeScript来获取tsc编译器，并将其配置到系统或项目的路径中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [TypeScript环境配置详解](https://blog.csdn.net/qq_44749491/article/details/127419988)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值