一.TS介绍

1.1 简介

ts是2012年由微软开发,在js的基础上添加了类型支持

1.2 优劣势

优势 :任何位置都有代码提示,增加效率;类型系统重构更容易;使用最新的ECMAscript语法

劣势:和有些库的结合并不是很完美;学习需要成本需要理解接口、泛型、类型等知识

1.3 与js区别

首先要明确,ts的存在只是为了让编程更便捷,并不是用来取代js的,是因为js是一个弱类型没有接口泛型而已。

二.环境安装

首先安装ts,直接安装包即可

注意是全局安装

然后安装完后记得初始化ts

初试化完之后有一个ts的配置文件,先修改两个东西

rootdir表示我们的输入也就是写的代码所在的位置

outdir表示代码会在此文件输出

2.1 js的缺陷

有这样一段js的代码

当我们运行会发现执行完了第一句就报错了

原因就不用多说了,这就是js的一个缺陷

这个时候上ts

直接将原代码放到ts里面来会发现报错

这里提示什么错误用到插件error lens

第一个报错是我们要把参数规定数据类型

然后发现我们的参数有不符合类型的

所有错误清除

注意关键步骤来了:

刚才我们定义了一个代码所在目录,需要把ts文件放进去

然后 tsc -watch开启ts检测,一旦发现这个ts文件变化就会有输出文件

可以看到我们的ts文件已经到输出文件的dist目录下,并且已经转换成js文件了

这个时候我们直接运行转换出来的文件

三.数据类型

3.1 基础数据类型

首先加一段话

意思表示,如果当我们在src下创建了一些ts文件有命名冲突的时候不加的话就会报错,加上就相当于添加了一个模块作用域不会报命名冲突的错误

这是ts三种基础数据类型,数值、布尔、字符串

一定要声明类型才能够赋值,而且声明了什么类型就给什么值

3.2 数组

数组有几种定义的方式

首先单独定义

单独定义还有一种方式

第二种是混合定义就是可以定义多个类型

跟第一种有点类似,然后用括号括起来中间用|隔开

最后一种是任意类型

但是并不推荐这种,因为也就失去了ts矫错的意义

3.3 元祖

用于保存定长长度的数组和数据类型

tuple

首先它的定义

这个时候就定长了,长度固定少一个不行,多一个不行

而且对应位置的数据类型也固定了,不能颠倒

3.4 any与void

首先any表示任意类型,当我们不清楚值的数据类型时可以用any

场景一:

当变量的值会动态改变,比如用户的输入时

可以看到我们这里不论是什么类型都不会报错

场景二:

改写现有代码时,想要去包含或者是移除类型检查

可以看到我们并没有定义这个函数,但是也不会报错,这个时候用any来移除类型检查,但是要注意这种方式不太安全

场景三:

定义或存储各种类型数据的数组

像这样一个数组会有限制

这样就不会了

void

某种意义上来说,void与any是相反的,因为他表示没有任何类型

常常用于当一个函数没有返回值时

比如这样一个正常函数是没有问题的

当我加上了void来声明后

就会报错return这一行

删除后我们才可以正常执行

还有一个点就是当给一个变量声明为void类型,那么他的值就只能为undefined和null

为null报错是以为我们开启了严格模式,需要在ts配置文件中将这一行注释

3.5 null和undefined

他们的作用就不用多说了

首先他们也是一种数据类型要赋值给变量也要进行定义

但是要注意:在非严格模式下,他可以赋值给其他数据类型

3.6 never和object

never类型就是一些总是会抛出异常或者根本就不会有返回值的函数,像这些就可以定义为never类型

object就是定义为一个对象

3.7 枚举

枚举是js标准数据类型的一个补充,可以为一组 数值赋予友好的名字

通过enum来定义

这个时候我将一个变量定义为这个类型,

他就只能为这个类型里面的别名或者说是数值

然后第一个注意点,我给他赋值数值并不会出错,因为枚举本身就是为数值取一个好听的别名,它的本质就是数值

而且他默认就是从0开始的

第二个注意点,虽然默认从0开始,但是我们可以手动修改他的起始值,注意虽然这里{}包裹,但是里面是写为等号赋值

这个时候再去打印

如果修改的是第二个值

如果修改的各自的值

3.8 bigInt和symbol

bigint是用来弥补我们number数据类型最大只能到2^53-1的整数的缺陷

他的定义方法可以直接在后面加n或者调用bigint这个方法

注意这是es2020新增的类型,所以要将我们的ts转到2020来

json文件里面改

symbol的值是唯一的,独一无二的

并不相等,即使里面的值都一样但是他们都为各自的值

3.9 变量声明与解构

ts的变量声明解构跟js是一样的

首先声明也是:var、let、const

数组解构:

第一种解构

第二种解构,将剩余的以一个数组存储

第三种解构,可以取到我们想要的一个位置的数据

对象解构:

3.10 类型断言

就是手动指定一个值的类型,不再让js判断,我说他是什么就是什么

两种方式

第一种方式

<>里面定义类型外面接变量名

我如果断言为number,它不具有length,所以就会报错

第二种方式

通过一个as相当于取别名的方式来定义

应用:

比如现在有个函数,他的参数类型为number或者string,但是number没有length所以会报错

我如果给她强制定义为string就不会出现错误

3.11 类型别名

就是给一个类型起一个新名字,里面可有多个数据,都是同一个类型

第一种:

以type开头声明,中间用|隔开

定义好后变量用别名来修饰,而且变量只能取定义好的数据,包括数据类型也要相同

第二种:函数

用类型别名声明了一个函数

我要用肯定也要用一个变量,然后用类型别名绑定给他,再去定义我们这个函数

它的作用就是定义好了后,这个函数就只能返回number类型,其他类型都不行

第三种:对象

定义好之后绑定给变量,我们的当前这个属性就只能用规定好的数据类型了

四.接口

4.1 接口基本使用

接口是一系列抽象方法的声明,是一些方法特征的集合

interface来定义,跟type很像,但是有区别的,后面会说

定义一个接口

然后我这边要用同样是绑定给他,声明自己的数据

函数的使用

参数采用解构赋值直接拿,然后通过定义好的接口去约束他们,再把函数定义为void类型,也就是没有返回值

4.2 可选属性与只读属性

在我们定义接口时,某些属性可以省略我们约束的时候可以不赋值叫做可选属性,用?修饰

没有修饰可选属性,不写的话会报错

写为可选

只读属性就是只能读取,不能修改,readonly来修饰

没有只读属性时是可以修改的

给到只读属性后

我们的const和readonly的区别

因为他们两个都是不可以修改只能够读取

虽然作用大致一样,但是用处不一样,一般一般要作为变量使用就是用const来修饰,如果要作为属性使用就用readonly

4.3 索引签名

用于描述那些通过索引得到的类型,解决参数问题

当我们定义好接口,如果少一个参数我们可以用可选属性来将其可要可不要

但是如果多一个参数呢?

三种方法

第一种:不推荐

可以看到我如果直接加在后面会报错

但是我给一个对象之后再加在后面就不会报错了

这是因为ts的检测是浅检测,我们直接加在后面是一层,但是中间有个对象对象里面再来一个对象,就属于深层次了,就检测不到了,所以这种理论上是不允许的,只是我们投机取巧,不推荐

第二种:

通过类型断言

我们说过类型断言,就是我自己来声明,加上了之后就相当于脱离了ts的校验规则,你想定义什么就定义什么没有人管得到你了,注意这里是给这个变量类型断言,所以只能断言为people或者any

第三种:

索引签名

给我们接口添加一个中括号里面props是变量名随便取,第一个string为我们属性名的类型定义,要注意对象属性名会自动给你变成字符串,就算你没添加引号也是字符串,后面则是规定我们值为什么类型

这样我们也可以随便添加任意类型的参数了

4.4 函数接口

函数的接口需要定义一个调用的参数的签名以及返回值的类型

接口与数组

注意一下我们的接口和数组怎么来使用,长得很像索引签名,但其实不是,前面定义的其实是我们数组的下标,所以只能为number类型,后面是数组里面每一项的值类型

4.5 接口继承

接口可以继承接口用到另一个接口上的属性约束 extends

单继承:

多继承:

用逗号隔开

4.6 接口的混合类型

就是可以将接口里面多个类型混合在一起定义,包括属性、函数等

因为我们之前都是单独对对象或者函数进行接口约束,那么如果要进行一个混合类型接口,以函数为例,先绑定给一个函数

函数里面先定义好我们的函数,并且提示需要返回值

添加返回值后提示缺少定义好的两个属性

直接将counter类型断言为Counter并将属性绑定上去

可以看到此时这个counter即为函数又为对象

又可以使用自己函数,又可以调用对象属性

4.7 接口和类型别名的异同点

主要是两同两异

相同一:

都可以描述属性或者方法

这里分别用类型别名和接口定义了两个属性一个方法,都没有报错

应用上去也没问题

相同二:

都允许扩展

注意类型别名扩展是用&连接

接口的扩展前面有说extends来连接

不同点一:

type可以声明基本数据类型、联合类型、数组等等,而接口只能声明对象,函数也是对象

注意:这是或者的意思,比如在数组那里有且只有第一个值,有第二个值就会报错

不同点二:

type不能进行合并,接口可以

TypeScript(基础篇)day01的更多相关文章

  1. g4e基础篇#3 Git安装与配置

    g4e 是 Git for Enterprise Developer的简写,这个系列文章会统一使用g4e作为标识,便于大家查看和搜索. 章节目录 前言 1. 基础篇: 为什么要使用版本控制系统 Git ...

  2. Java基础篇

    #JAVA day01 基础篇 字节类型的使用方法 byte b1 = 126+1; byte b2 = 127+1;//因为127+1得出的结果是int类型,所以不能转换,编译出错 byte b3 ...

  3. TypeScript基础以及在Vue中的应用

    TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue ...

  4. 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)

    背景 ​ 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...

  5. 好未来数据中台 Node.js BFF实践(一):基础篇

    好未来数据中台 Node.js BFF实践系列文章列表: 基础篇 实战篇(TODO) 进阶篇(TODO) 好未来数据中台的Node.js中间层从7月份开始讨论可行性,截止到9月已经支持了4个平台,其中 ...

  6. C#多线程之基础篇3

    在上一篇C#多线程之基础篇2中,我们主要讲述了确定线程的状态.线程优先级.前台线程和后台线程以及向线程传递参数的知识,在这一篇中我们将讲述如何使用C#的lock关键字锁定线程.使用Monitor锁定线 ...

  7. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  8. 2000条你应知的WPF小姿势 基础篇<15-21>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  9. ABP框架实践基础篇之开发UI层

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...

  10. C#多线程之基础篇2

    在上一篇C#多线程之基础篇1中,我们主要讲述了如何创建线程.中止线程.线程等待以及终止线程的相关知识,在本篇中我们继续讲述有关线程的一些知识. 五.确定线程的状态 在这一节中,我们将讲述如何查看一个线 ...

随机推荐

  1. 【Java】学习路径48-线程锁ReentrantLock

    与上一章学习的线程锁synchronized类似,都是为了解决线程安全的问题. 使用方法: 新建一个ReentrantLock对象.(如果使用Thread多线程,则需要声明static静态) 然后在需 ...

  2. Springboot重定向,没有位置没有加“/user”,但是url在请求位置的前面“/user”就出现了

    是因为":"后面没有加"/" 原先的 return "redirect:main.html"; 正确的 return "redir ...

  3. iOS WebRTC 点对点实时音视频流程介绍

    前言 公司某个项目需要接入音视频即时通讯, 功能类似微信的拨打视频通话,语音通话的场景.那么对于音视频通讯会用到什么技术呢?没错,它就是 WebRTC . 什么是WebRTC WebRTC,名称源自网 ...

  4. 常用的工具函数助力JavaScript高效开发

    前言 日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率. 1.校验数据类型 export const typeOf = func ...

  5. JavaScript 之 原型对象、对象原型 —— { }

    JavaScript -- 构造函数 // 构造函数 function Player(name, age) { this.name = name; this.age = age; } JavaScri ...

  6. Linux系统编程001--系统IO

    1. 文件系统:用来存储.组织.管理文件的一套方式.协议 2. 文件 文件的属性:i-node唯一表示一个文件的存在与否 文件的内容 3. Linux系统如何实现文件的操作? 点击查看代码 硬件层: ...

  7. 在Ubuntu 主机上使用 Cockpit 管理容器

    如果你管理着一台 Linux 服务器,那么你可能正在寻找一个可靠的管理工具.为了这个你可能已经看了 Webmin 和 cPanel 这类软件.但是,如果你正在寻找一种简单的方法来管理还包括了 Dock ...

  8. 220726 T1 树染色问题 (树的直径)

    题目描述 高钧在校园中漫步时,经过了一棵树.这时,几个同学突然冒出来控制住了他. 这棵树有 nn 个节点, 每个节点有黑白两种颜色, 为了更好的 alb , 需要把所有节点染成同一种颜色. 为了更好的 ...

  9. P1706 全排列问题 方法记录

    原题链接 全排列问题 题目描述 按照字典序输出自然数 \(1\) 到 \(n\) 所有不重复的排列,即 \(n\) 的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 输入格式 一个整数 \( ...

  10. 实现fastdfs防盗链功能

    目录 1.背景 2.实现原理 2.1 开启防盗链 2.2 重启 nginx 2.3 Java代码生成token 1.token生成规则 2.java生成token 3.测试 3.1 带正确token访 ...