TypeScript

最新推荐文章于 2023-08-11 10:25:16 发布
原创 最新推荐文章于 2023-08-11 10:25:16 发布 · 883 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

一、邂逅TypeScript

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

TS的编译环境

注意：默认情况下，所有的ts文件都是在同一个作用域下编写的，如果想把每一个ts文件当做一个单独的作用域的时候，可以使用export {},这样这个文件就是一个单独的作用域，当然，这只是其中的一种方式

在这里插入图片描述

npm install typescript -g
安装typescript之后自动就安装了tsc。
然后就可以通过tsc typescript.ts命令 把typescript.ts转成js代码
在这里插入图片描述

ts的运行环境

在这里插入图片描述

方式二：通过ts-node库，为ts的运行提供环境

在这里插入图片描述
安装好之后就可以通过ts-node typescript.ts 命令在node环境中运行ts文件了
在这里插入图片描述

二、ts的语法

变量的声明

在这里插入图片描述

typescript
在这里插入图片描述

三、数据类型

1、number

在这里插入图片描述

2、boolean

在这里插入图片描述

3、string

在这里插入图片描述

4、array

在ts中，数组中存放的数据类型最好是固定的,在一个数组中存放不同的数据类型是不好的习惯

在这里插入图片描述

5、object

实际开发中，不建议这样写 const obj:object = {name:‘哈哈’,age:19}。因为这样不能获取数据也不能设置数据。可以直接写const obj = {name:‘哈哈’,age:19}

在这里插入图片描述

6、null和undefined

在这里插入图片描述

7、symbol

在这里插入图片描述

8、any

any类型表示可以是任意类型
在不想给某些javascript添加具体的数据类型时，可以使用any类型
还有一种情况，当创建了一个数组，刚开始不知道里边应该存放什么样的数据类型的时候，可以这样：（不推荐，因为数组中尽量存放确定的数据类型）
在这里插入图片描述

在这里插入图片描述

9、unknown

unknown类型的变量只可以赋值给any类型和unknown类型；
any类型的变量能赋值给任意数据类型的变量

在这里插入图片描述

10、viod

在这里插入图片描述

11、never

在这里插入图片描述

12、tuple （元组类型）

元组一般用在函数的返回值最多

在这里插入图片描述

13、函数的参数类型

在这里插入图片描述

14、函数的返回值类型

在这里插入图片描述

15、匿名函数的参数类型

在这里插入图片描述

16、对象类型

在这里插入图片描述

17、可选类型

在这里插入图片描述

18、联合类型

在这里插入图片描述
在这里插入图片描述

上边这张图中的print()和print(null)hi报错，但是不是编译器报的错

19、类型别名

在这里插入图片描述

20、类型断言

类型断言用到的最多的场景是：把相对来说比较宽泛的类型转成比较具体一点的类型，这样就可以调用具体类型的特殊的属性或者特殊的方法

在这里插入图片描述

把一个字符串类型的变量赋值给number类型的变量肯定会报错，但是可以通过as,用as先把message转成any或者unknown再转成number（实际开发中不推荐这样做，因为会造成类型的混乱）
在这里插入图片描述

21、非空类型断言

在这里插入图片描述

22、可选链

在这里插入图片描述

23、?? 和 !!

在这里插入图片描述

??和!! 这两个操作符不是ts特有的，js也有这两个操作符。??和三元运算符差不多

24、字面量类型

字面量类型必须和它的值保持一致

在这里插入图片描述

字面量推理

在这里插入图片描述

25、类型缩小

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

26、函数类型

在这里插入图片描述

上边这个修改的地方，按照原来的返回void也是不会报错的，因为返回void意味着返回任何类型都可以，但是严格来说应该返回number

27、参数的可选类型

在这里插入图片描述

注意：可选类型的参数必须写在后边

28、默认参数

在这里插入图片描述

注意：一般参数的顺序都是必传参数放在最前边，接着是有默认值的参数，最后写可选参数

29、剩余参数

在这里插入图片描述

24、this

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

25、函数的重载

函数的重载：就是函数的名称相同，参数不同（参数的个数不同或者参数的类型不同）的几个函数

在这里插入图片描述
在这里插入图片描述

在函数的重载中，有实现体的函数不能直接调用
在这里插入图片描述

typescript的类型转化
weixin_42349568的博客
05-06 2512
1，数字数组转化为字符串 let arr:number[]=[1,2,3,4] let str:string=arr.map(String).join('') console.log(str) //'1234' 2,字符串数组转化为数字数组 let arr:string[]=['1','2','3','4'] let arr2:number[]=arr.map(Number) console.log(arr2) //[1, 2, 3, 4] ...
TypeScript String（字符串）
m0_74760716的博客
05-05 604
String 对象用于处理文本（字符串）。
ts不同类型对象对应方法
12-29 2533
Number 方法 toExponential()把对象的值转换为指数计数法。 toFixed()把数字转换为字符串，并对小数点指定位数。 toLocaleString()把数字转换为字符串，使用本地数字格式顺序。 toPrecision()把数字格式化为指定的长度。 toString()把数字转换为字符串，使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。 valueOf()返回一个 Number 对象的原始数字值。 Stri
对象转换原始值
lncci的博客
04-28 1209
再总结一下JavaScript的数据类型：原始类型和引用类型原始类型：数字、字符串、布尔值、null、undefined引用类型：不是原始类型的都是引用类型，比如：数组、函数、对象原始类型和引用类型的区别：原始值直接存放在变量之中，引用类型是在内存中的其他地方存放着数据，而在变量中放的是这片内存的地址。我们现在来具体讨论怎么将一个对象转换为原始值对象转换为布尔值：对象到布尔值的转换是非常简单的，所...
Ts 对象转post字符串
XLucas
08-11 252
对象转 'ID=1&Name=枭龙&EnName=Lucas' 格式 post 接收格式。
数据类型
ZZZ___jh的博客
09-22 381
数据类型数据类型获取数据类型 : typeof(指定变量名或者值)数值型 number布尔类型 boolean对象object数组 array函数 function空 null未定义 undefined数据类型的转换 数据类型 分类 包含 基本数据类型 字符串string, 数值型number, 布尔类型boolean 复合数据类型 对象object, 数组array 其他数据类型 函数function, 空null, 未定义undefined 获取数据类型 : typeof(指
script写入html文件夹,javascript – 是否可以使用TypeScript将HTML文件作为字符串导入？...
weixin_39707478的博客
06-03 169
我想知道是否可以像标题那样做.例如,假设我们正在处理一个Angular2项目,我们希望避免将模板设置为外部URL,以减少http请求.仍然我们不想在组件中写入所有的HTML,因为它可能足够大,或者我们希望设计人员在不同的文件中工作,而不是开发人员.所以这里是第一个解决方案：文件template.html.ts将文件转换为.ts到这样的东西：export const htmlTemplate = `...
TypeScript中文手册.zip
05-05
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，添加了可选的静态类型和基于类的面向对象编程。TypeScript提供了类型系统和对ES6+新特性的支持，这使得它在大型应用开发中能够提供更强的代码...
typescript-handbook.pdf
05-22
《TypeScript Handbook》是微软官方维护的权威指南，旨在为开发者提供从基础到进阶的TypeScript学习资源。这本手册被迁移到了全新的TypeScript官方网站仓库，并采用了模块化结构与交互式代码示例，以确保学习者能够...
TypeScript教程
02-22
### TypeScript 数据类型详解 #### 基础数据类型 在 TypeScript 中，基础数据类型是构建更复杂类型的基础。这些类型包括但不限于布尔值、数字、字符串等。 ##### 布尔值（boolean） 布尔值用于表示逻辑实体，在 ...
TypeScript中文入门指南详解案例教程.pdf
05-05
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，添加了可选的静态类型和基于类的面向对象编程。TypeScript提供了类型系统和对ES6+新特性的支持，旨在编译成干净、可读的JavaScript代码。...
精选资源
【TypeScript编程】从入门到实战：涵盖环境搭建、核心语法、面向对象编程、模块化开发及项目实战TypeScript教程.pdf
06-06
内容概要：本文档《TypeScript教程.pdf》详细介绍了TypeScript的基础知识、高级特性和实际应用。从TypeScript简介开始，涵盖了环境搭建、基本类型、函数与类型注解、类与面向对象编程、接口与类型别名、数组与元组、...
数组扁平化、去重、排序
ii窝窝头的博客
04-17 311
已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; 编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组一个升序且不重复的数组 方法1： var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9...
TypeScript 基础类型 —— Object
且听风吟的博客
06-06 2753
声明为 Object 类型表示非原始类型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的类型。
Object转String好用方法
ZiXiaFan的博客
07-11 421
java16以上写法。
TS的数据类型
阿牛哥的博客
10-17 1360
TS的数据类型
【后端】Object转String的4种方法
HolaOrange的博客
04-10 8437
Object转String的4种方法, Object转Long或者int , Object怎么转成String , Java转换String的方法 , Java怎么转String , 怎么转换成String类型
object转string的四种方式
ystyaoshengting的专栏
04-11 3266
通常object到string有四种方式：(假设有object obj) obj.ToString， Convert.ToString， (string)obj, obj as string。 他们都能将object对象转换成string对象。我就讲讲他们的异同以及在实际中应该使用哪个。 前两个方法通常是由别的对象得到string对象，它们间的区别只表现在要转换的对象为null时，
Object转为String的几种简易形式详解
wodezuiaidxp的博客
10-09 2030
在项目的实际开发和应用中，常常需要用到将对象转为String这一基本功能。本文将对常用的转换方法进行一个总结。常用的方法有Object.toString()，(String)要转换的对象，String.valueOf(Object)等。下面对这些方法一一进行分析。 方法1：采用 Object.toString()方法 请看下面的例子： Object object = getObject(); Sy...
typesCRIPT
最新发布
09-16
### TypeScript 入门指南与常见问题解决方案 #### 什么是 TypeScript？ TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的功能并引入了静态类型系统。通过这种方式，TypeScript 提供了更强的类型检查能力，在编写代码阶段就能发现潜在的错误[^5]。 #### 如何安装 TypeScript？ 要开始使用 TypeScript，可以先通过 npm 安装其命令行工具： ```bash npm install -g typescript ``` 安装完成后可以通过 `tsc --version` 来验证是否成功安装[^3]。 #### TypeScript 的基本语法 TypeScript 支持多种数据类型，包括原始值类型和复杂类型。以下是常见的几种类型定义方式： - **原始值类型** ```typescript let num: number = 10; let str: string = "Hello"; let bool: boolean = true; ``` 这些类型的声明是可选的，因为 TypeScript 能够通过上下文推断出变量的类型[^4]。 #### 使用 TypeScript 编写模块化代码 TypeScript 支持 ES6 模块标准，允许开发者将代码分割为多个文件以便于管理。例如： ```typescript // math.ts export function add(a: number, b: number): number { return a + b; } // main.ts import { add } from './math'; console.log(add(2, 3)); ``` 以上代码展示了如何导出函数以及如何在其他文件中导入该函数[^5]。 #### 解决方案：如何理解和使用项目中的风格指南？ 为了使团队协作更加高效，遵循统一的编码规范是非常重要的。TypeScript 风格指南提供了许多关于命名约定、代码结构等方面的建议。例如，推荐使用 PascalCase 表示类名，而 camelCase 则用于方法和属性名称[^2]。 #### 工具支持 得益于丰富的插件生态，大多数现代集成开发环境 (IDE)，如 Visual Studio Code 和 WebStorm，都内置了对 TypeScript 的良好支持。这不仅限于语法高亮显示，还包括实时错误检测、智能感知等功能[^5]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值