TypeScript学习笔记——第一节

最新推荐文章于 2024-09-14 19:44:09 发布
最新推荐文章于 2024-09-14 19:44:09 发布
阅读量409 收藏
点赞数
分类专栏： ts学习 文章标签： javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Twi_TiAmo/article/details/120703894
版权
本文简述了TypeScript的基础介绍，重点讲解了其作为JavaScript超集增加的类型系统、ES6新特性和开发工具支持。一步步指导读者如何搭建TypeScript开发环境，包括下载Node.js、安装并全局安装TypeScript，以及创建和编译第一个TypeScript文件的过程。
摘要由CSDN通过智能技术生成

TypeScript学习笔记——简介

1. TypeScript的简介

TypeScript(以下简称ts)是由微软公司开发，以JavaScript(以下简称js)为基础构建的一门语言，属于js的一个超集，它使得js由动态类型的语言转变为静态类型的语言，扩展了js，它可以在任何支持js的平台中执行，但是，ts不能被js解析器直接执行，需要先编译为js文件再执行。

2. TS增加了什么？

1. 类型
2. 支持ES6新特性
3. 添加ES不具备的新特性
4. 丰富的配置选项
5. 强大的开发工具

3.TS开发环境搭建

1. 下载Node.js

搜索node进入官网，根据自己设备选择安装即可

2. 安装Node.js

命令行输入node -v查看是否安装成功（显示版本即表示安装成功）

3. 使用npm全局安装typescript
  • 命令行输入npm i -g typescript安装typescript
  • 命令行输入tsc -v查看是否安装成功（参考2.）

4.第一个TS文件

1. 创建ts文件

创建demo_1.ts文件，使用vscode打开，输入一些简单的js代码

1. 编译ts文件

  • 进入到对应目录下的命令行，输入tsc demo_1.ts进行编译
    在这里插入图片描述

  • 会产生一个同名的js文件，如下
    在这里插入图片描述
    该js文件可以当做普通js文件直接执行

Twi.Light
关注
专栏目录
TypeScript学习笔记——第四节
Twi_TiAmo的博客
10-14 120
TypeScript学习笔记——面向对象面向对象简介类（class）继承与多态抽象类与接口1. 抽象类2. 接口3. 抽象类与接口的对比属性的封装泛型 面向对象简介 面向对象是程序设计语言中一个非常重要的思想，初次接触是在学习java时，当时对于面向对象的学习没有很精通，索性借着学习ts的机会认真的研究一下。 所谓面向对象，首先将对象当做一个名词去理解，面向着他开发，程序之中的所有操作都需要通过对象去完成，举个例子，在前端开发中的： 操作浏览器需要借助window对象 操作网页需要使用document对象
TypeScript学习笔记——第二节
Twi_TiAmo的博客
10-11 303
TypeScript学习笔记-----类型1. 类型限制1. ts可以在变量声明时规定类型2. 如果变量的声明和赋值同时进行，ts会自动规定类型3. 对函数进行类型限制2. TS的类型1. 字面量类型2. any类型3. unknown类型4. void类型5. never类型6. object类型7. array类型8. tuple类型9. enum类型3. 其他有关于类型使用1. 类型的别名 1. 类型限制 1. ts可以在变量声明时规定类型 let a: number //规定了变量a的值只能是num
TypeScript学习笔记——第三节
Twi_TiAmo的博客
10-13 271
TypeScript学习笔记——编译选项1. 自动编译1. 自动编译文件2. 自动编译整个项目2. 配置选项1. include2. exclude3. extends（少用）4. files（少用）5. compilerOptions 1. 自动编译 1. 自动编译文件 编译文件时，添加-w指令（watch），TS编译器会自动监视文件的变化，并在发生变化时对文件进行重新编译 示例： tsc xxx.ts -w 2. 自动编译整个项目 直接使用tsc指令，则可以对当前项目下的所有t
TypeScript学习笔记——TypeScript的接口
bqiuer的博客
12-26 769
Ts的接口 TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 拓展：UI——User Interface 1、为什么要有接口？ function Fun(currObj:{a:String}):String{ console.log(currObj.a) return 'abc' } let f1 = Fun({a:'zxc'}) 上面定义
Typescript学习笔记——泛型
PrototypeOne的博客
01-19 425
## 一、什么是泛型 软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。 在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。 在定义函数或者类时，如果遇到类型不明确的情况可以使用泛型。 ## 二、函数中泛型的使用 这是是输入某个值，并将此制输出的过程，因为不清楚输入值的类型，所以可以使
TypeScript学习笔记——基本类型
Y____X的博客
11-02 99
TypeScript学习笔记 1、环境搭建 1.下载安装Node.js 2.npm全局安装typescript 3.创建ts文件 4.tsc编译 or creat-react-app npx create-react-app typescript-pro --template typescript cd typescript-pro npm install --save typescript @types/node @types/react @types/react-dom 2、基本类型声明 入门
TypeScript学习笔记（一）——TypeScript介绍与常用类型注解
weixin_56370772的博客
08-09 971
TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统。所有的 JS 代码都是 TS 代码。JS 有类型（比如，number/string 等），但是JS 不会检查变量的类型是否发生变化。而TS 会检查。TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。类型注解常用基础类型。
TypeScript学习笔记——基础篇
路漫漫其修远兮，吾将上下而求索。
07-22 382
类型推论 如果没有明确指定类型，typescript会根据类型推论的规则推断出一个类型。 注意： 如果定义的时候没有赋值，不管之后有没有赋值，都会被推断为any类型而完全不被类型检查 联合类型 联合类型表示取值可以为多种类型中的一种。 使用| 来分隔类型 示例代码： let myFavoriteNumber: string | number; 注意： 当不确定一个联合类型的变量到底是哪个类型的时候，只能访问此联合类型的所有类型共有的属性和方法。 接口 赋值的时候，变量的形状必须和接口的形状保持一致 可选
typescript学习笔记——（一）基础类型
铁臂阿凡达的博客
08-28 576
前段时间公司项目使用了ts做类型限制，虽然没有深入使用，但是已经能感受到ts的强大。遂将之前的学习笔记整理一遍以作复习。为vue3.0打好基础（大佬们别再学了，跟不上了-_-!!）。 你要知道的 TypeScript是JavaScript的超集，含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。 JavaScript是弱类型语...
TypeScript学习笔记——TS类型/高级用法及实战优缺点
Kepler_II的博客
07-31 1264
最近这两年，有很多人都在讨论 Typescript，无论是社区还是各种文章都能看出来，整体来说正面的信息是大于负面的，这篇文章就来整理一下我所了解的 Typescript。 TypeScript 类型 TypeScript有哪些类型 1、TypeScript 基本类型，也就是可以被直接使用的单一类型。 数字 字符串 布尔类型 null undefined any unknown void object 枚举 never 2、复合类型，包含多个单一类型的类型。 数组类型 元组类型 字面量类型 接口类型
TypeScript学习笔记（三）——贪吃蛇
qq_44743216的博客
06-02 471
配置文件 1、将之前写好的package.json、webpack.config.js、tsconfig.json 复制到当前目录下 2、使用 npm i 初始化环境 3、在src目录下新建 index.html 和 index.ts 4、安装工具：npm i -D less less-loader css-loader style-loader 5、修改相关配置文件： （1）webpack.config.js： // 指定webpack打包时要使用的模块 module:{ //
typescript学习笔记1 —— 接口（interface）
阿留申低压的博客
08-01 2853
typescript是微软出品的，javascript的超集。让javascript的写法很类似java，核心功能是让JavaScript这个弱类型的语言，增加类型检查，更适合编写企业级应用。之前的angular项目使用的是typescript，流行的框架vue和react也支持typescript的写法，甚至node的替代品deno也是用typescript开发的，这就让重新好好学习它成为必然。...
[学习笔记]TypeScript学习笔记
无知的圆的博客
07-01 874
文章目录1 前期准备工作1.1 TypeScript的简介1.2 TypeScript与JavaScript的关系1.3 TypeScript的优点1.4 TypeScript开发环境搭建2 基本类型2.1 类型声明2.2 基本类型种类3 编译选项3.1 自动编译文件3.2 自动编译整个项目4 用webpack配置TS5 Babel6 面向对象6.1 前言6.2 类（class）6.3 面向对象的特点6.4 接口6.5 泛型（Generic）项目实战代码地址参考 1 前期准备工作 1.1 TypeScrip
JavaScript and TypeScript学习总结
weixin_52467087的博客
07-07 239
JavaScript and typescript学习总结
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2817
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 853
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 441
【代码】【JavaScript】LeetCode：707设计链表。
记录开发一个英语听力训练网站
最新发布
业余程序员Blue的博客
09-14 400
目前只导入了雅思历年真题的听力音频，作为我日常练习英语听力的素材足够了。网站的主要功能其实就是英语句子精听，核心目的就是反复听每一句话，直到听懂为止，我觉得听力训练也没有太多技巧可言，就是老老实实地坚持去听，所谓网上经常说的“磨耳朵”吧。基于此，听力页面主要功能有：播放/暂停、上一句/下一句、播放次数选择、播放倍速选择、字体大小选择、是否显示原文、是否显示译文、是否自动播放下一句。而这些功能，基本上都是页面js操作。
TypeScript学习笔记
05-12
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，增加了可选的静态类型和其他面向对象编程的特性，如接口和类。以下是 TypeScript 学习笔记的一些主要内容： 1. 类型注解和类型推断 2. 接口和类的使用 3. 泛型的使用 4. 类型别名和枚举类型 5. 模块的导入和导出 6. 命名空间和声明合并 7. 装饰器的使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值