都2023年了你还不学ts (一)

TypeScript基础语法入门

TypeScript究竟是什么?

他主要就是想把JavaScript里面不完美的一些语法来进行一个提升

就像官网中所说的

TypeScript is JavaScript with syntax for types.

例如我们看下面的这段代码

if ("" == 0) {console.log('hello')
}

在JavaScript里面,会打印出来hello,因为在比较的时候,会进行类型转换。

下面在看一个更加诡异的

function compare(x){if (1<x<3){console.log('hello')}
}
compare(41)

image-20230912145043418

这个很简单。首先是比较1是否小于41 之后会转换为true

true<3这个会转换为1<3 所以就会进行打印了

typescript就是在JavaScript的基础上。引入了类型的概念。做了一些优化

我们把之前写的代码放入到ts中

可以发现有明显的报错

image-20230912145520217

之后我们再看一个例子,首先看他的JavaScript版本

function getDistance(point1, point2) {return [point2.x - point1.x, point2.y - point1.y]
}getDistance({x: 1,y: 1
}, {x: 2,y: 2
});

下面来看typescript

type Point={x:number,y : number}
function getDistance(point1:Point, point2:Point) {return [point2.x - point1.x, point2.y - point1.y]
}
getDistance({x: 1,y: 1
}, {x: 2,y: 2
});

假设我们再JavaScript里面,传了一个字符串。一个错误的参数,JavaScript里面是无法校验的。

但是在ts里面

image-20230912150326304

就会直接报错了

所以我们来进行一个总结,对于typescript他的特点:

  • 更容易帮助我们发现程序里的问题
  • 语法提示更加完善,有了类型之后,写代码非常爽
  • 语义更强,代码可读性更高

从静态类型校验的角度理解

在官网中。写的这门语言的一个特点

Static Type Checker 静态类型校验能力

一门语言,在代码执行之前。就能做错误预警,那么我们就说这个语言具有静态校验能力

TS 约等于 JS+ Static Type Checker

基础类型快速入门

首先看几个基础的类型的定义

//基础类型 String number boolean
const teachName:string="zhang san"
const teachAge:number=28
const isMale:boolean=true

下面我们来看数组类型如何定义

//数组类型
const numberArr:number[]=[1,2,3,4,5,6]
const stringArr:string[]=['a','b','c']
const booleanArr:Array<boolean> = [true,false] //泛型

之后我们再来看看对象类型

//对象类型
const user:{name : string,age : number
}={name:'zhangsan',age:18
}
const userOne:{name : string,age? : number//添加问号代表着age可选
}={name:'dell',}

以及联合类型

//联合类型
function union(id:string|number){//id既可以是string也可以是numberif (typeof id === 'string'){ //类型收窄 Narrowingconsole.log(id.toUpperCase())}else {console.log(id)}
}

除了这些之外,还有一些代码上的快捷。

例如类型别名

//类型别名
type User = {name:string,age : number
}
const userTwo:User={name : 'dell',age:18}
const userThree:User={name : 'dell',age:18}

这是为了解决类型复用所产生的一个用法

下面我们来看any类型 如果不写any类型的话,默认也会推断成any类型的,但是最好也是手动的去写上。这样有利于代码的可读性

function showMessage(message:any){//any代表什么类型都可以console.log(message)
}

之后我们来看函数类型

//函数类型
function abc(message:string):number{return 123
}

这个就是约定了返回值。

还可以用箭头函数这样写

const def:(age:number)=>number=(age : number)=>{//接受一个number类型的age参数,返回值必须是numberreturn age
}

下面我们来讲接口类型 interface

//接口类型 Interface
interface Stu{age:number;sex:string;
}
const stu:Stu = {age : 18,sex : '男'}

有点像刚才的对象类型其实很类似。包括和类型别名也很相似。

但是接口有一个特点就是可以继承

interface OldStudent extends Stu{name : string;
}

下面来看交叉类型

//交叉类型
type Employee=User&{salary:number}
const employee:Employee = {age : 18,name : 'zhangsan',salary:1}

之后来看断言

//断言 Assersion
const dom:undefined=document.querySelector('#root') as undefined
const testString:string=123 as any as string;
const dom1:undefined=<undefined> document.querySelector(' #root')

之后来看字面量类型

//字面量类型
const str:'asd'='asd'
const truthy:true=true
function getPosition(position:'left'|'right'):string {return position
}
getPosition('left')

这个类型很有意思。我们来看一个练习题。

function request(url:string,method : 'GET'|'POST'):string{return 'sending request'
}
const params:{url : string,method : string}={url:'immoc.com',method : 'GET'}
request(params.url,params.method)

假如是这样写的话,虽然说params.method是GET,但是因为在定义的时候method是string类型的。所以就会报错。

image-20230913091018618

如果修改method的类型定义,就不会报错了

function request(url:string,method : 'GET'|'POST'):string{return 'sending request'
}
const params:{url : string,method : 'GET'|'POST'}={url:'immoc.com',method : 'GET'}
request(params.url,params.method)

第二种我们可以用断言语法

request(params.url,params.method as 'GET')

下面我们来看null和undefined

//null undefined
const testobject:null=null
const test2object:null=undefined

默认情况下null和undefined是可以转换的。

之后来看void

//void
function getNumber():void{}

就是这个函数是一个无返回值

类型注解和类型判断

//TS开发准则:只要是变量,或者对象属性,都应该有一个明确的类型//类型注解 人工的告诉TS 变量或者对象的明确属性类型
const userName:string='123'//类型推断
const userAge=18//如果类型推断能够自动推断出来类型,就没有必要手写类型注解
const userNick='deel'function getTotal(paramOne:number,paramTwo:number){return paramOne+paramTwo
}

ction getNumber():void{

}


就是这个函数是一个无返回值### 类型注解和类型判断```ts
//TS开发准则:只要是变量,或者对象属性,都应该有一个明确的类型//类型注解 人工的告诉TS 变量或者对象的明确属性类型
const userName:string='123'//类型推断
const userAge=18//如果类型推断能够自动推断出来类型,就没有必要手写类型注解
const userNick='deel'function getTotal(paramOne:number,paramTwo:number){return paramOne+paramTwo
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/80624.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

X3E伺服转矩模式参数设置

X3E伺服速度控制模式参数设置,请查看下面文章链接: 外部模拟量速度控制模式(禾川X3E伺服驱动器)_RXXW_Dor的博客-CSDN博客比例随动专栏有系列文章介绍,大家可以查看相关文章,链接如下:绕线机-排线伺服比例随动功能块(梯形图+SCL代码)_RXXW_Dor的博客-CSDN博客S7-200 SM…

嵌入式-原码、补码,反码的存储

目录 一.原码 1.1简介 1.2存储规则 二.补码 2.1简介 2.2存储规则 三.反码 3.1简介 3.2存储规则 一.原码 1.1简介 原码是一种表示带符号整数的编码方式。在原码表示中&#xff0c;最高位表示符号位&#xff0c;0表示正数&#xff0c;1表示负数&#xff0c;其余位表示数…

实现按钮悬停动画

知识点与技巧 伪元素 使用伪元素来作为按钮悬停效果动画展示的元素 z-index 的使用技巧 使用z-index属性来控制按钮和伪元素的层次关系 transform、transition 复习 使用transform、transition两个属性来实现动画的展示 按钮边框动画 切换效果 核心代码 .btn.btn-border-…

Linux隐藏文件及含义

写在前面&#xff1a; Linux隐藏文件是非常重要的内容&#xff0c;创建、处理和管理隐藏文件的方法与非隐藏文件基本相同。针对常用的Linux隐藏文件&#xff0c;用户需要了解其作用和用途&#xff0c;以便于更好地使用Linux系统。 一、隐藏文件的概念 Linux系统下的隐藏文件&…

4.开放-封闭原则

这个原则其实是有两个特征&#xff0c;一个是说‘对于扩展是开放的(Open for extension)&#xff0c;另一个是说‘对于更改是封闭的(Closed for modification)[ASD]。

Valine表白动态心跳源码

动态心跳源码 给前女友表白写的网页现在用不着喽 &#xff08;主要功能&#xff09; 记录在一起的时长QQ头像自动同步集成随机古诗词Valine留言评论&#xff08;Valine是一款快速、简洁且高效的无后端评论系统&#xff09; 出售源码&#xff1a;50&#xff08;联系方式在图中…

【Effective Python】读书笔记-05类与接口

1. 让组合起来的类来实现多层结构&#xff0c;不用使用嵌套的内置类型 2. 让简单的接口接收函数&#xff0c;而不是类的实例 from collections import defaultdictcurrent {a: 1,b: 2,c: 3, }add_to_current {f: 4,e: 5, }def increment():count 0def missing():nonlocal …

CCF CSP题解:数字排序(201503-2)

链接和思路 OJ链接&#xff1a;传送门 本题仅需用一个辅助数据结构Tmp记录每1个数字的值&#xff08;value&#xff09;及其出现的次数&#xff08;cnt&#xff09;&#xff0c;然后重载运算符<并针对cnt排序输出即可。辅助数据结构Tmp定义如下&#xff1a; struct Tmp {…

《算法图解》阅读笔记

前言 问题解决技巧&#xff1a;分而治之 / 动态规划&#xff1b;贪婪算法书目&#xff1a;Grokking algorithms: an illustrated guide for programmers and other curious people中文名称&#xff1a;《算法图解——像小说一样有趣的算法入门书》 1 算法简介 二分查找&…

腾讯mini项目-【指标监控服务重构】2023-07-29

今日已办 根据导师代码评审的 comment 改进 修改命名 otelclient.otelExporterOtlpEndpoint to otelclient.endpoint禁用 TLS 加密&#xff0c;移除 otelclient.insecureMode避免命名缩写影响代码的阅读理解把两个函数&#xff08;createTraceExp和createTraceProvider&#…

VSCode 远程开发,再也不用带电脑回家了~

VS Code几乎是所有的程序员必备的工具之一&#xff0c;据说全球一般的开发者都使用过VS Code这款工具。 今天为大家介绍一下 VS Code 实现远程办公的方法。 1、概 述 通常&#xff0c;我们都是每天到工作的办公室进行办公&#xff0c;但是&#xff0c;如果下班回家&…

保密技术基础--北交大实验靶场2

由于第2、第3章的内部章节较少&#xff0c;所以我将其的体验感受一起写在这篇文章当中。 2.1 保密专用网络知识学习 这一小节也是一节的理论知识学习&#xff0c;学习过后有一个小测试&#xff0c;和第一章一样&#xff0c;学的知识和给的题目可以说是毫无关系。这一节的知识更…

shell 流程控制

流程控制 if条件判断 可以使用if来实现多路跳转&#xff0c;条件通常使用test命令 #if语句的语法if condition1then command1elif condition2 then command2else commandNfi 如果then需要和if放在同一行的话&#xff0c;使用;分隔 fi用来结束if语句&#xff0c;相当于…

Nginx部署前后端分离项目(Linux)

Nginx代理前端页面、后端接口 一、前端打包二、后端打包三、Linux部署Nginx启动、暂停、重启服务器部署文件地址&#xff1a; 一、前端打包 npm run build二、后端打包 通过Maven 使用package打包 三、Linux部署 安装Nginx 安装环境 yum -y install gcc pcre pcre-devel z…

【C语言】用冒泡排序实现my_qsort

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解如何用冒泡排序实现my_qsort&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一. 前言二. 冒泡排序三. 4个参数3.1 第一个参数void* base3.2 第二个参数…

erlang练习题(二)

题目一 替换元组或列表中指定位置的元素&#xff0c;新元素作为参数和列表或元组一起传入函数内 解答 replaceIdx(List, Index, Val) ->replaceIdx(List, Index, Val, 1, []).replaceIdx([], _, _, _, Acc) ->lists:reverse(Acc);%% 到达替换位置的处理replaceIdx([_ …

AOSP源码中Android.mk文件中的反斜杠符号(\)的作用和使用

简介 在AOSP&#xff08;Android Open Source Project&#xff09;源码中的Android.mk文件中&#xff0c;反斜杠符号&#xff08;\&#xff09;的主要作用是将一行代码拆分成多行&#xff0c;以提高可读性并帮助组织较长的代码块。这对于定义复杂的构建规则和变量时特别有用。…

uniapp-历史搜索记录

应用场景 很多搜索场景内都能用到这个功能 大概就是用户搜索了某个关键字 然后搜索的关键字可以持久的保存下来 下次打开搜索的时候可以达到快速点击搜索的效果 实现步骤 1. 先给输入框双向绑定数据和事件 <input v-model"keyWord"> 2. 给搜索按钮绑定点…

前后端分离--Vue的入门基础版

目录 一.前后端分离 二.Vue的简介 三.Vue的入门案例 四.Vue的生命周期 一.前后端分离 前后端分离是一种软件架构模式&#xff0c;将应用程序的前端&#xff08;用户界面&#xff09;和后端&#xff08;数据处理和业务逻辑&#xff09;独立开发、独立部署。在前后端分离的架…

1、风行内容仓的增效之路 - 前言

18年初&#xff0c;公司成立内容资源管理中心&#xff08;以下按内部习惯简称内容仓&#xff09;。 18年中&#xff0c;因异地管理不便&#xff0c;我开始参与内容仓的现场管理&#xff0c;主要是提供一些管理方面的建议&#xff0c;以及部分协调工作。 19年Q4&#xff0c;我…