TypeScript入门

最新推荐文章于 2024-11-02 12:42:04 发布
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量131 收藏
点赞数
分类专栏： 前端 文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lky8820/article/details/128727092
版权
文章探讨了TypeScript作为一种静态类型的JavaScript超集，如何通过提供更强的类型系统提升代码的可读性和可维护性。内容涵盖了基础语法，如数据类型、泛型、类型别名和断言，以及高级特性，如联合类型、交叉类型和类型保护。同时，文章还介绍了在实际工程中的应用，包括webpack配置和使用TSC进行编译。
摘要由CSDN通过智能技术生成

文章目录

  1. Typescript 见解
  2. Typescript 基础语法，包括类型、泛型、类型别名、类型字面量等
  3. Typescript 高级类型讲解及实例
  4. Typescript 工程应用介绍

Typescript 见解

JavaScript：动态类型-编译发生在执行时 弱类型语言

https://developer.mozilla.org/en-US/docs/Web/JavaScript

TypeScript：静态类型-编译发生在执行前 弱类型语言

什么是TypeScript？

静态类型：

  • 可读性增强：基于语法解析TSDoc，ide增强。
  • 可维护性增强：在编译阶段暴露大部分错误。
  • 多人合作大项目中，获得更好的稳定性和开发效率。

JS的超集：

  • 包含于兼容所有JS的特性，支持共存。
  • 支持渐进式引入与升级。

Typescript 基础语法

1、基础数据类型

image.png

2、对象类型

image.png

3、函数类型

image.png

4、函数重载

image.png

5、数组类型

image.png

6、TypeScript补充类型

image.png

7、TypeScript泛型

在使用之前不指定类型
image.png
image.png

8、类型别名&类型断言

image.png

9、字符串/数字 字面量

image.png

Typescript高级类型及实例

1、联合/交叉类型

image.png
image.png

2、类型保护与类型守卫

image.png
image.png

3、merge函数类型

image.png
image.png
image.png

4、函数返回值类型

image.png
image.png

TypeScript工程应用

webpack

  1. 配置webapack loader相关配置
  2. 配置tsconfig.js文件
  3. 运行webpack启动/打包
  4. loader处理ts文件时，会进行编译与类型检查

使用TSC编译

image.png

  1. 安装Node与npm
  2. 配置tsconfig.js文件
  3. 使用npm安装tsc
  4. 使用tsc运行编译得到js文件
小酒友
关注
专栏目录
超细致的TypeScript入门与实战
weixin_43805705的博客
08-22 1556
本文向大家介绍TypeScript基础知识及用法，帮助大家快速了解，在前端项目中使用这门技术。TypeScript的类型推断跟 VS Code 的良好搭配让代码效率有了极大提升。静态类型检测，会提示一些潜在的问题，使得开发者代码更严谨，低级错误早发现早解决。同时TypeScript类型定义使得代码的可读性增强，统一规范，可有效降低项目维护成本。
TypeScript入门教程——pdf文档
03-16
**TypeScript 入门教程** TypeScript 是一种由微软开发的强类型、静态类型的超集语言，它在 JavaScript 的基础上增加了许多新特性，如...阅读提供的 "TypeScript入门教程——pdf文档"，将能更全面地掌握这些知识点。
TypeScript 入门指南
2302_80412007的博客
09-28 797
TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，这意味着任何有效的 JavaScript 代码都是有效的 TypeScript 代码。类型表示那些永不存在的值的类型，例如总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数的返回值类型。是的，TypeScript 提供了类型系统和现代 JavaScript 特性，使得代码更加健壮和易于维护。映射类型可以用来创建类型，这些类型是其他类型的属性的映射。函数的类型签名定义了函数的参数类型和返回类型。
TypeScript入门教程
SoSalty的博客
03-06 951
TypeScript 是由微软公司在 2012 年正式发布，现在也有 8 年的不断更新和维护了，TypeScript 的成长速度是非常快的，现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集，也就是说 TypeScript 是建立在 JavaScript 之上的，最后都会转变成 JavaScript。TypeScript 的一个最主要特点就是可以定义静态类型，英文是 Static Typing。那到底是什么意思呢？
TypeScript入门基础
Better_Xing的博客
11-02 2281
TypeScript入门基础
TypeScript入门案例
技术记录薄
10-17 740
TypeScript的安装与使用
TypeScript 入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-27 1875
安装TypeScript：首先，你需要在本地安装TypeScript。你可以通过npm（Node Package Manager）来安装TypeScript。创建TypeScript文件：创建一个新的文件，例如hello.ts，并在文件中编写TypeScript代码。编译TypeScript文件：这将会在同一目录下生成一个hello.js的JavaScript文件。类型注解和类型推断：TypeScript是一种静态类型的编程语言，它引入了类型注解和类型推断的概念。
typescript入门
\@_@/?的博客
11-29 74
图片来源: 黑马程序员—鸿蒙开发教程—typescript入门。
TypeScript入门与区块链项目实战（TypeScript Quickly）阅读记录
热门推荐
yaocsu的专栏
12-26 1万+
TypeScript入门与区块链项目实战（TypeScript Quickly）勘误 p33 应用正方形公式 勘误：应用矩形公式 原文：Applies the formula for rectangles p34 要解决这个问题，需要运行上述代码。 勘误：要体验这个问题。 原文：To experience this issue, you need to run this code. p34 只是isPerson()保护获得一个错误对象 勘误：除非isPerson()保护获得一个错误对象 原文：This co
TypeScript入门指南初学者必备.zip
07-22
**TypeScript入门指南初学者必备** TypeScript是JavaScript的一个超集，由Microsoft开发，它引入了静态类型系统和一些高级编程特性，提升了代码的可维护性和可读性，尤其适合大型项目开发。对于初学者来说，掌握...
TypeScript 入门教程
01-06
### TypeScript 入门教程 #### 前言 在当今快速发展的前端开发领域，TypeScript 作为一种静态类型的编程语言，正逐渐成为许多大型项目和框架的首选语言。它通过为 JavaScript 添加可选的静态类型检查功能，使得...
TypeScript入门指南案例教程.zip
07-17
通过学习这个TypeScript入门指南案例教程，你将了解到如何在实际项目中应用上述概念，逐步掌握TypeScript的使用，从而提高开发效率，降低维护成本。同时，熟悉TypeScript也能为参与诸如Angular、React或Vue等现代...
typescript入门教程
02-05
TypeScript入门教程是由xcatliu编写，他根据自身学习TypeScript的经历，整理出了一系列的学习笔记。这本教程从JavaScript程序员的角度出发，帮助初学者循序渐进地理解TypeScript，并提供了一个与官方手册不同的视角...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2108
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1132
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 124
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1370
项目功能：商品分类,商品信息,用户。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 681
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值