TypeScript基础

最新推荐文章于 2023-11-16 09:14:43 发布
最新推荐文章于 2023-11-16 09:14:43 发布
阅读量843 收藏 19
点赞数 3
文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xihuanlilia/article/details/124750276
版权

TS

什么是typeScript

ts是以js为基础构造出来的语言
可以说ts是js的升级版

  1. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
  2. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
  3. TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。
  4. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

TypeScript 开发环境搭建

在搭建环境之前 我们必须有Node.js
这里我把下载地址附上
. 下载Node.js

  • 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
  • 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
    . 安装Node.js

node建议下载稳定版
下完以后
输入：npm i -g typescript在这里插入图片描述
此处使用yarn也可以

命令为 yarn global add typescript
然后我们输入 tsc -v
查看安装是否成功
在这里插入图片描述
我们新建一个文件夹来书写ts文件
然后使用终端 tsc + 你的ts文件名
系统会自动给我们转化为js文件
在这里插入图片描述

自动编译

自动编译的命令为 tsc --watch
我们在终端输入后
js就会更具我们ts 的变化而变化
在这里插入图片描述
在这里插入图片描述

错误不自动更新

命令行输入 tsc --noEmitOnError --watch
在这里插入图片描述

基本类型

TS的一个重要特点
就算需要类型声明
简单的说 就是
声明一个变量 在赋值之前
需要通过类型声明来指定TS中的变量类型（参数和形参也属于变量）
这里的变量类型指的是以下类型
在这里插入图片描述

指定类型之后 ts编译器会自动判断我们声明变量的值是否符合声明 的类型 是则赋值 不是则报错
在这里插入图片描述
简单的说
类型声明给变量设置了什么类型 变量就必须是什么类型

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
  • 在这里插入图片描述
    在这里插入图片描述

数组类型

数组类型和js相比比较特殊
我们需要在赋值前声明数组内的元素是什么数据类型
他有以下两种写法

写法1

在这里插入图片描述

写法2

在这里插入图片描述

联合类型

联合类型就像即又
比如说一个数组中 既有数字类型 又有 字符串类型
如下所示
在这里插入图片描述
中间使用一个 | 符号隔开
当我们作用于数组时
在这里插入图片描述

类型别名

当一个复杂类型或者联合类型过多或者被频繁使用时，可以通过类型别名来简化该类型的使用
在这里插入图片描述

函数类型

除了变量，我们常见的类型指定还有针对函数的类型声明
函数类型需要指的是 函数参数和返回值的类型，这里分为两种写法

方法一

单独指定参数返回值的类型
在这里插入图片描述

方法2

同时指定参数和返回值
这里要用到上文中的类型别名
在这里插入图片描述

void类型

当我们的函数没有返回值的时候
可以用关键词 void
在这里插入图片描述
在这里插入图片描述

函数可选参数

当我们定义函数时，有的参数可传可不传，这种情况下，可以使用 TS 的可选参数来指定类型
比如我们数组的方法
我们这边一slice方法为例
这边附上slice方法简介
在这里插入图片描述
参数可以直接使用或者传入两个
简单的说 就算参数不是必要的
这时候 我们就要用到符号 ？
我们以代码呈现
在这里插入图片描述这里需要注意的是
可选参数只能出现在参数列表的最后， 即必须参数必须在可选参数之前

对象类型

js中的对象类型是属性和方法组成的
而ts中对象类型是对象中属性和方法的描述
在这里插入图片描述
属性采用属性名：类型形式

函数可以采用 方法名(): 返回值类型 或者 函数名: Function（不指定返回值）的形式

使用类型别名

直接使用{}会降低代码可读性，不具有辨识度，更推荐使用类型别名添加对象类型
在这里插入图片描述

接口interface

当一个对象类型被多次使用时，一般使用接口（interface）描述对象的类型，达到复用的目的
我们使用interface关键字来声明接口
接口名称推荐以I为开头
声明接口之后，直接使用接口名称作为变量的类型
在这里插入图片描述

接口与自定义类型的区别

共同点： 都是用来给对象指定类型
不同点： 接口只能为对象指定类型， 类型别名可以为任意类型指定别名

推荐用 type（自定义类型) 来定义

接口的继承

在这里插入图片描述
我们这里使用extends来进行继承
在这里插入图片描述
这里我们两个接口都有xy
这时候我们可以让point3d继承point2d

在这里插入图片描述

降级编译

在这里插入图片描述
在这里更改target降级编译
值为es的版本
一般用来兼容旧版本

类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型
所谓断言就是断定、确定、绝对的意思；所以简单来讲，类型断言就是保证数据类型一定是所要求的类型
在这里插入图片描述

使用 as 关键字实现类型断言
关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了

数据的类型断言

从上我们可以得知
类型断言通过as关键字 断言为一个差不多的类型 或者 更加具体的类型
但是如果直接断言则会报错

在这里插入图片描述
我们要先给我们的数据 定义一个类型

在这里插入图片描述
unknown 代表任意安全的any（any代表所有类型）

文字类型

在这里插入图片描述
这里我们解释以下ts的类型
变量1的类型是 string
变量2的类型是‘李四’
我们这么理解
str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
str2 是一个常量(const)，它的值不能变化只能是 ‘张三’，所以，它的类型为:‘张三’
这里 str2常量的 “李四” 就算一个字面量类型
就是某个特殊的字符串也可以作为TS中的类型
任意的 JS 字面量（对象，数组，数字）都可以作为类型使用
在这里插入图片描述
在这里插入图片描述

枚举

ts特有功能
枚举的功能类似于字面量类型+联合类型组合的功能
也可以表示一组明确的可选择
简单的说
枚举定义一组命名常量 他描述一个值
这个值可以是这些命名常量中的一个

我们通过enum关键字来创建一个枚举
在这里插入图片描述

数字枚举

这里我们需要知道一点
枚举成员是有值的，默认为：从 0 开始自增的数值
在这里插入图片描述
在这里插入图片描述

字符串枚举

字符串枚举指的是枚举成员是字符串
这里需要注意的是
字符串枚举没有自增
所以字符串枚举必须每个成员都有初始值
在这里插入图片描述
在这里插入图片描述

枚举的实现原理

枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
因为：其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值(枚举成员都是有值的)
也就是说，其他的类型会在编译为 JS 代码时自动移除。但是，枚举类型会被编译为 JS 代码
如下所示
ts中我们写的
在这里插入图片描述
接下来我们看看js转译的
在这里插入图片描述
一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效

typeof

typeof是用来获取数据类型
实际上，TS 也提供了 typeof 操作符：可以在类型上下文中引用变量或属性的类型（类型查询）
使用场景:根据已有变量的值，获取该值的类型，来简化类型书写
案例如下
在这里插入图片描述

摆烂波比
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3.0加上Typescript
enhengcys的博客
11-25 3777
vue3.0加上Typescript 1、使用npm或者yarn进行vue项目的搭建 //创建项目 vue create test cd test //下载依赖 npm install axios //或者 yarn add axios //启动项目 npm run serve //或者 yarn serve //项目打包 npm run build //或者 yarn build 创建好项目之后，使用vue3.0的特性进行项目构建，vue3.0中引入了一个setup()函数进行统一管理vue的data、
TypeScript基础知识点
06-20
TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载...
vue添加typescript方法以问题修复
weixin_50695596的博客
03-09 618
此问题意为typeScript配置文件没有正常的被你的webpack所编译，此问题在网上没有解释，你需要做的是将ts-loader降级，因为在8.2.0以上的版本不再支持。如果你在打包或者启动服务遇到此问题，证明你得typescript的版本过高，需要进行降低成。，降级为8.2.0 然后按照刚才的步骤完整过一遍，查看自己是否有遗漏的地方。
TypeScript
wwb0517的博客
07-12 260
一、JavaScript 强类型与弱类型 语言层面限制函数的实参类型必须与形象类型相同，由于这种强弱类型之分 根本不是某一个权威机构的定义，强类型有更强大的类型约束，而弱类型中几乎没有什么约束，强类型中不允许任意的隐式类型转换，而在弱类型语言则允许任意的数据隐式类型转换。 差异：强类型不允许随意的隐式类型转换，而弱类型是允许的。变量类型允许随时改变的特点，不是强弱类型的差异 弱类型的问题 1、异常需要等到运行时才能发现 2、类型不明确，函数功能可能发生改变 3、对象索引器的错误用法 强类型.
typescript add函数，要求参数类型相同，否则报错
Litwak
04-14 611
const add = (...res: Array<string>|Array<number>) => { return res.reduce((total, num) => total + num, 0); } add(1, 2, 3); add('a', 'b', 'c'); add('a', 1, 2);
TypeScript使用国内镜像cnpm直接安装以及使用yarn安装两种方法
xtho62的博客
09-29 8827
安装： 需要有Node环境，请先安装node环境，先下载node.js安装包，再选路径安装 安装后win键+R,打开cmd，查看Node和npm版本指令如下： node -v npm -v 效果如下： 有了以上环境之后由于npm下载比较慢，我们可以使用阿里的国内镜像cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 查看版本是使用cnpm -v 然后就可以快速安装TypeScript了，全局安装指令： cnpm i
typescript基础大全
最新发布
02-02
TypeScript 是一种由微软开发的强类型、面向对象的编程语言，它是 JavaScript 的超集，旨在为大型应用提供更好的可维护性和静态检查能力。以下是一些 TypeScript 基础语法元素
TypeScriptAcademind：TypeScript基础
02-12
**TypeScript基础知识详解** TypeScript是由Microsoft开发的一种强类型、静态类型的编程语言，它是JavaScript的超集，旨在提供更安全、可维护的代码，并且在编译时进行类型检查。TypeScript广泛应用于大型项目和...
IntelliWakeTSFoundation:IntelliWake TypeScript基础
03-07
**TypeScript基础知识** TypeScript是JavaScript的一个超集，由微软开发并维护，它为JavaScript带来了静态类型、类和接口等特性，提升了代码的可维护性和可靠性。本教程将深入讲解TypeScript的基础知识，帮助开发者...
UCTSBasics:终极课程TypeScript基础课程
04-14
此仓库充当Ultimate Angular的TypeScript基础课程的种子项目，以及分步分支中的最终解决方案，请与我们一起 ！ | |设置和安装从GitHub内部分叉此存储库，以便您可以直接提交到您的帐户，或仅下载内部包含内容的.zip...
TypeScript 基础类型
12-13
本篇文章将详细介绍 TypeScript 的基础类型，包括任意类型（any）、数字类型（number）、字符串类型（string）、布尔类型（boolean）、数组类型、元组类型（tuple）、枚举类型（enum）、void 类型、null 和 ...
egghead-advanced-typescript-fundamentals:我的“高级TypeScript基础知识” egghead.io课程的代码
05-14
《深入理解：高级TypeScript基础知识》 在编程领域，TypeScript作为JavaScript的超集，以其强大的类型系统和静态检查能力，赢得了广大开发者的青睐。"egghead-advanced-typescript-fundamentals"是一个针对...
nodejs-typescript-base：NodeJS + TypeScript基础项目
02-10
nodejs-typescript-baseNodejs基础项目使用： 打字稿表达开玩笑：单元测试打字机迁移tsyringe：依赖注入jsonwebtoken DDD和TDD handlebarsjs：邮件模板引擎节点邮件程序准备服务用户和个人资料控制密码：忘记并重置...
typescript 基础教程欢迎大家观看
03-07
typescript 基础教程欢迎大家观看
第一课 TypeScript基础实用课程介绍1
08-03
【第一课 TypeScript基础实用课程介绍1】 TypeScript（简称TS）是一种由微软开发的强类型、静态类型的编程语言，它是JavaScript的一个超集，也就是说任何有效的JavaScript代码都是合法的TypeScript代码。随着Vue 3....
TypeScript上手
qq_41923008的博客
11-04 118
快速上手 安装TS ： yarn add typescript --dev 编译 // 可以完全按照 JavaScript 标准语法编写代码 var hello = function (name) { console.log("Hello, " + name); }; hello('TypeScript'); 运行命令 yarn tsc [filename]在文件中就可以看到编译过后的js 文件 配置文件编译整个项目 1.运行 yarn tsc --init 生成配置文件 ...
vue cli 4 添加、移除typescript
huangpb的博客
11-03 1772
移除 .eslintrc.js extends 里的 '@vue/typescript/recommended'步骤一：移除npm依赖。将所有ts文件改为js。
搭建typescript_TypeScript 笔记（零） 入门知识
weixin_42231085的博客
12-25 92
本系列特点最近，我在给一个学弟在线下讲“如何入门 TypeScript”。由于事先没有准备讲稿，也没准备大纲，都是想到啥讲到啥，所以我得事后补上讲稿，所以就有了这一系列的笔记。所以本系列的讲述顺序，可能会和大部分的文档和教程不太一样。现在很多人没有接触过类型系统比较优秀的语言，可能不容易体会到 TypeScript 一些优秀的设计，所以我想把 TypeScript 中优秀的部分尽早地交给入门者。所...
TypeScript基础学习
m0_47114387的博客
11-16 67
typeScript 基础学习
TypeScript基础语法
07-08
下面是 TypeScript 的一些基础语法： 1. 变量声明和类型注解: ```typescript let num: number = 10; let name: string = "John"; let isTrue: boolean = true; ``` 2. 函数定义和类型注解: ```typescript ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值