不废话的将ts一篇文章写完

写在前面

网上很多写ts的教程的,但是我觉得写的太繁琐了,这里我直接将基础用法写上,包括编译后的js代码,以便于你们进行对比, 包括一些常见的报错信息,你们可以对比一下报错信息, 我尽量不废话的将ts一篇文章写完!

解释一下:

ts全称typeScript,别名 anyScript , 是js的一个超集,你可以理解为js有的他都有,js没有的,他也有,后面会具体说到,js是一种非强类型语言,ts就相当于将js强制类型,这样做的好处就是编译期间就可以发现类型错误,他可以通过类型进行静态类型检查,最大程度的避免代码中出现的一系列类型错误,当然还是一样,你学我建议,不用也可以,开讲

基本(原始)类型定义
const str: string = "tom"
const bol: boolean = true
const num: number = 123
const und: undefined = undefined
const nul: null = null编译为js结果:"use strict";
const str = "tom";
const bol = true;
const num = 123;
const und = undefined;
const nul = null;
  • 一旦做了类型限制,后面是不可以进行非该类型赋值的,比如(其他同理):
下面是一个错误示例 ⚠️
let stre: string = "stre"
stre = "123  // Error:Unterminated string literal.
数组类型定义
let numArr: number[] = [1,2,3]
let strArr: string[] = ['1','1','2']
let bolArr: boolean[] = [true,false]编译为js结果:"use strict";
let numArr = [1, 2, 3];
let strArr = ['1', '1', '2'];
let bolArr = [true, false];
  • 一旦类型做了限制,数组里面不可以进行非该类型的赋值,比如(其他同理):
下面是一个错误示例 ⚠️
let numArr: number[] = [1,2,3,"jim"] // Error  Type 'string' is not assignable to type 'number'.
numArr.push("tom") // Error Argument of type 'string' is not assignable to parameter of type 'number'.
元组定义

如果想在数组里面进行定义不同的类型,可以使用元组,元组在js中本身是不存在的,ts中存在的一种数据类型

let tuple: [number,string,boolean,null] = [1,"tom",true,null]编译为js结果:"use strict";
let tuple = [1, "tom", true, null];
  • 元组虽然可以定义不同类型的数据放到数组里面,但是也是受到限制的,初始化必须按照数组的下标进行赋值,同时受到个数的限制,后续push等操作是不受到下标(位置)限制的,但是push受到类型本身的限制,不受到个数的限制,比如:
下面是一个错误示例 ⚠️
tuple.push(undefined) // Error Argument of type 'undefined' is not assignable to parameter of type 'string | number | boolean | null'.
接口

ts中的接口是用于限制对象的,他规定了对象的key和类型的最初的样子(属性【属性的类型】和方法【参数的类型和返回值的类型】的样子),接口本身是不参与运行的,他在编译期间起限制和静态类型检查的作用,你也可以理解为编译结束,接口本身就已经没有用了(因为接口是Interface[Java中的定义],所以一般定义的时候都是大写I开头)

interface Iobj  {brand : string,num : number
}let obj: Iobj = {brand: "吉利",num: 18
}编译为js结果:"use strict";
let obj = {brand: "吉利",num: 18
};

这里如果一个对象很多人用,但是数量不确定的话,可以将不确定的属性定义为一个可选属性

interface Iobj  {brand : string,num? : number // 此时的num就是一个可选属性
}let obj: Iobj = {brand: "吉利",
}编译为js结果:"use strict";
let obj = {brand: "吉利",
};

如果对象中有一些你不希望被人改动的属性,你可以将该属性设置为只读属性,后续改动就会报错

interface Iobj  {readonly id: 0, // 此时的Id是一个只读属性brand : string,num? : number
}let obj: Iobj = {id : 0,brand: "吉利",
}编译为js结果:"use strict";
let obj = {id: 0,brand: "吉利",
};
  • 接口限制之后对象是不可以添加或者赋值非该类型的数据,包括数量也会被限制,如下:
下面是一个错误示例 ⚠️
let obj: Iobj = {brand: "吉利",num: 18,age : 18,
} 
// Error Object literal may only specify known properties, and 'age' does not exist in type 'Iobj'.let obj: Iobj = {brand: "吉利",num: "18",
} 
// Error Type 'string' is not assignable to type 'number'.let obj: Iobj = {brand: "吉利",
}
// Error Property 'num' is missing in type '{ brand: string; }' but required in type 'Iobj'.obj.id = 1 // Error Cannot assign to 'id' because it is a read-only property.let obj: Iobj = {id : 1,brand: "吉利",
}
// Error Type '1' is not assignable to type '0'.
函数类型限制
/*** (x:string,y: number) 两个入参  第一个是string类型, 第二个是number类型 z?: boolean 是一个可选参数 * string 返回值是string类型*/
function func(x:string,y: number , z?: boolean) : string {return (x + y)
}
func("3",4)编译为js结果"use strict";
function func(x, y, z) {return (x + y);
}
func("3", 4);
  • 这样参数和返回值都受到对应的类型限制,比如下面的例子:
下面是错误的示例 ⚠️
func(2,4) // Error Argument of type 'number' is not assignable to parameter of type 'string'.func(4) // Error Expected 2 arguments, but got 1.function func(x:string,y: number) : string {return Boolean(x + y) // Error Type 'boolean' is not assignable to type 'string'.
}
使用接口对函数进行类型限制
interface Ifunc {(x: string,y: number,z?: boolean):string
}let toFcun: Ifunc;
toFcun = function(x,y){return x + y
}
toFcun("5",8)编译为js结果"use strict";
let toFcun;
toFcun = function (x, y) {return x + y;
};
toFcun("5", 8);
  • 错误示例如上
联合类型 (这不是一种类型,而是一个变量需要多种类型的时候,可以使用|进行分割)
let cls : number | string = "tom"
cls = 5编译为js结果"use strict";
let cls = "tom";
cls = 5;
  • 不在联合类型中的不可以定义
下面的是错误示例 ⚠️
cls = true // Error : Type 'boolean' is not assignable to type 'string | number'.
类型断言 (当我不知道这个变量是什么类型,但是我希望他作为一个我预期的类型进行处理的时候,可以使用断言)
function func(params: string | number){params.toString;params.valueOf;const str = params as string // 当我直接使用params.length 的时候  不存在这个属性,但是我可以将他作为一个string进行处理 从而获得我希望的到的属性str.length
}编译为js 结果"use strict";
function func(params) {params.toString;params.valueOf;const str = params;str.length;
}
下面是一个错误的示例 ⚠️
function func(params: string | number){params.toString;params.valueOf;params.length
}
// Error Property 'length' does not exist on type 'string | number'. Property 'length' does not exist on type 'number'.// 注意⚠️ 虽然可以使用断言进行类型的强制使用,但是也需要符合联合类型的限制
function func(params: string | number){params.toString;params.valueOf;const str = params as Boolean
}
// Error Conversion of type 'string | number' to type 'Boolean' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.Type 'number' is not comparable to type 'Boolean'.
泛型

又叫做动态类型,当我不确定我的函数入参类型的时候,可以使用一个广泛的类型,简称泛型,在使用函数的时候决定该入参的类型

function genericity<T>(params: T): T{return params
}
genericity("8") // 此时的T 就是string
genericity(8)   // 此时的T 就是number 
genericity(true) //此时的T 就是boolean// 这里的T可以理解为Type的简写,不强制,约定的写法,你可以写任意值编译为js结果"use strict";
function genericity(params) {return params;
}
genericity("8");
genericity(8);
genericity(true);
泛型示例2
/*** <S,N> 两个参数,我都不确定类型 使用s和n 是为了我为了演示效果使用的string 和number* (params:[S,N]) 入参 是一个数组,数组有两个值,和我前面的泛型保持一致* [N,S] 函数返回的值 是类型转换之后一个结果 数组第一位是string 返回的第二位就是string 第二个同理*/
function changePlaces<S,N>(params:[S,N]): [N,S]{return [params[1],params[0]] // 此时的0 和1 的位置就是固定的,因为N无法赋值给S,S也无法赋值给N
}changePlaces(["tom",0])编译为js结果function changePlaces(params) {return [params[1], params[0]];
}
changePlaces(["tom", 0]);
下面是一个错误的示例 ⚠️
function changePlaces<S,N>(params:[S,N]): [N,S]{return [params[0],params[1]]
}
// Error Type 'S' is not assignable to type 'N'.'N' could be instantiated with an arbitrary type which could be unrelated to 'S'.
// Error Type 'N' is not assignable to type 'S'.'S' could be instantiated with an arbitrary type which could be unrelated to 'N'.
使用接口做泛型约束

动态类型虽然是根据实际调用的时候进行类型判断的,但是也是可以对泛型做一定约束的

function constc<T>(params: T): boolean{return Boolean(params) 
}编译为js结果function constc(params) {return Boolean(params);
}
  • 此时的返回值是boolean类型,那么想要访问一个params.valueOf 属性显然是不现实的,这个时候可以使用继承接口属性的方式实现
interface IConstraint {length: number,name : string
}
/*** <T extends IConstraint> T泛型 继承了接口IConstraint 的类型限制,拥有了length 的属性*/
function constraint<T extends IConstraint>(params: T): boolean{return Boolean(params.length)  
}// 用法
const validObject: IConstraint = { length: 1,name:"jim" };
constraint(validObject);编译为js结果"use strict";
/*** <T extends IConstraint> T泛型 继承了接口IConstraint 的类型限制,拥有了length 的属性*/
function constraint(params) {return Boolean(params.length);
}
const validObject = { length: 1, name: "jim" };
constraint(validObject);
下面是一个错误示例 ⚠️
function constc<T>(params: T): boolean{return params
}
// Error Type 'T' is not assignable to type 'boolean'.
个人建议

ts是一种可用可不用的技术,他的弊端是开发成本升高,入门比较难受,难度不大,但是写起来较为恶心,因为所有的类型都需要进行限制,当然也有很多人是喜欢使用any的,经常使用any的话,直接使用js比较好,优势是后期的运行的稳定,报错的可能性大大的降低,因为在编译阶段就已经将类型校验过了,js中很多的错误都是来源类型不对导致的,我的建议是学习还是要学习的,但是自己的项目可以不用,使用自己熟悉的技术栈即可,但是如果不学习的话,难免会接手别人的ts项目,到时候会比较麻烦,毕竟很多开源的框架都是ts实现的,最新的vue3也是针对ts做了很多的优化,这个看个人,和我前面说的tailwindcss的建议是一样的,你学可以,不学也不会对你的开发造成实质性的影响!

众多网友对待ts的看法

在这里插入图片描述

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

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

相关文章

【模型微调】| 各类微调模型总结 P-Tuning,Prefix,P-tuning v2,LoRA

文章目录 1 微调背景1.1 Full fine-tuning 全参数微调&#xff08;FFT&#xff09;1.2 parameter-Efficient-fine-tuning 部分参数微调&#xff08;PEFT&#xff09; 2 提示词调整训练法2.1 P-Tuning2.2 Prefix2.3 P-Tuning v2 3 结构调整训练法3.1 Adapter tuning3.2 LoRA 微调…

PySimpleGUI 综合应用|英语文本朗读以及转换为语音Mp3

PySimpleGUI 综合应用 目录 PySimpleGUI 综合应用 应用界面 完整代码 所需模块 PySimpleGUI pyttsx3 pyaudio rapidfuzz 字典格式 应用界面 完整代码 英语朗读器.pyw import PySimpleGUI as sg import pyttsx3,pyaudio,pyperclip import os,re,datetime,wave,threa…

java基础(面试用)

一、基本语法 1. 注释有哪几种形式&#xff1f; //单行注释&#xff1a;通常用于解释方法内某单行代码的作用。 //int i 0;//多行注释&#xff1a;通常用于解释一段代码的作用。 //int i 0; //int i 0;//文档注释&#xff1a;通常用于生成 Java 开发文档。 /* *int i 0; …

springboot139华强北商城二手手机管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

静态时序分析:时序弧以及其时序敏感(单调性)

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 在静态时序分析中&#xff0c;不管是组合逻辑单元&#xff08;如与门、或门、与非门等&#xff09;还是时序逻辑&#xff08;D触发器等&#xff09;在时序建模时…

算法-排序(sort)

[NOIP2009]分数线划定 题目描述 世博会志愿者的选拔工作正在 A 市如火如荼的进行。为了选拔最合适的人才&#xff0c;A 市对所有报名的选手进行了笔试&#xff0c;笔试分数达到面试分数线的选手方可进入面试。面试分数线根据计划录取人数的150%划定&#xff0c;即如果计划录取…

如何提高工业数据采集的效率和准确性-天拓四方

随着工业4.0和智能制造的兴起&#xff0c;工业数据采集的重要性日益凸显。通过数据采集&#xff0c;企业能够实时监控生产过程&#xff0c;优化资源配置&#xff0c;提高生产效率。在实时监控、生产优化、质量控制等方面&#xff0c;有效的数据采集系统能够为企业提供宝贵的洞察…

幻兽帕鲁服务器多少钱一台?腾讯云新版报价

腾讯云幻兽帕鲁服务器4核16G、8核32G和16核64G配置可选&#xff0c;4核16G14M带宽66元一个月、277元3个月&#xff0c;8核32G22M配置115元1个月、345元3个月&#xff0c;16核64G35M配置580元年1个月、1740元3个月、6960元一年&#xff0c;腾讯云百科txybk.com分享腾讯云幻兽帕鲁…

java实现六大排序算法

一、冒泡排序算法 package com.xxx.order;public class maopao {public static void main(String[] args) {int[] arr {64, 34, 25, 12, 22, 11, 90};bubbleSort(arr);System.out.println("Sorted array: ");printArray(arr);}static void bubbleSort(int[] arr) {…

QT中一种隐蔽的死锁

造成死锁的情况只有两种: 1.单线程死锁:同一线程对同一个锁连续加锁两次会造成死锁; 延伸:在同一个线程中,一个事件分支中对锁A已经加锁,并且引用了QCoreApplication::processEvents(QEventLoop::AllEvents, 100)或者QCoreApplication::processEvents(QEventLoop::Exclud…

MongoDB安装以及卸载,通过Navicat 15 for MongoDB连接MongoDB

查询id&#xff1a; docker ps [rootlocalhost ~]# docker stop c7a8c4ac9346 c7a8c4ac9346 [rootlocalhost ~]# docker rm c7a8c4ac9346 c7a8c4ac9346 [rootlocalhost ~]# docker rmi mongo sudo docker pull mongo:4.4 sudo docker images 卸载旧的 sudo docker stop mong…

线上品牌展厅有哪些优点,如何打造线上品牌展厅

引言&#xff1a; 在当今数字化时代&#xff0c;品牌展示的方式也在不断演变&#xff0c;线上品牌展厅作为一种新型的展示方式&#xff0c;正逐渐成为品牌宣传的新宠。但是为什么需要线上品牌展厅&#xff0c;线上品牌展厅有哪些优势呢&#xff1f; 一&#xff0e;为什么需要线…

Java虚拟机内存模型概念

Java虚拟机的内存可以分三个区域&#xff1a;栈&#xff08;stack&#xff09;、堆&#xff08;heap&#xff09;、方法区&#xff08;method area&#xff09;。 虚拟机栈的特点&#xff1a; 1.栈描述的是方法执行的内存模型&#xff0c;每个方法被调用都会创建一个栈帧&…

学习python第三天

一.数据类型 1.获取数据类型 x 10 print(type(x))""" 输出 <class int> """2.复数类型&#xff08;complex&#xff09;详解 复数&#xff08;Complex&#xff09;是 Python 的内置类型&#xff0c;直接书写即可。换句话说&#xff0c…

前后端分离,RSA加密传输方案

1.原理 RSA是一种非对称加密算法。通过生成密钥对,用公钥加密,用私钥解密。对于前后端分离的项目,让前端获取到公钥对敏感数据加密,发送到后端,后端用私钥对加密后的数据进行解密即可。 2.实现 RSA工具类:提供秘钥对生成、公钥获取、私钥解密的方法。 public class R…

浅谈 Unix Timestamp 时间戳

Linux 时间戳通常指的是 Unix 时间戳&#xff0c;即自 1970 年 1 月 1 日 00:00:00 UTC 起经过的秒数。这个时间戳在许多 Unix 系统和类 Unix 系统&#xff08;包括 Linux&#xff09;中广泛使用。我们日常工作学习中也是很常用的。 但是很多刚学习的小伙伴对这一串数字不知道…

-代码分享-

归并排序的递归函数 void D_MereSort(int a[], int left, int right, int* tmp) { //left和right分别为递归区间的左右端点的下标 //把要归并的两边的区间递归到各只有1个元素就停 if (left > right) return; //mid为递归区间中间下标 int mid (left right) / 2; //递归…

软件工程知识梳理2-需求分析

需求分析时软件定义的最后一个阶段&#xff0c;它的基本任务时准确回答系统必须做什么的问题。 输出&#xff1a;本阶段必须的输出时软件需求规格说明书。 角色&#xff1a;需求分析员 参与者&#xff1a;用户、需求分析员 需求分析遵循的准则&#xff1a; 必须理解并描述问…

【阿里巴巴】【淘天集团天猫超市食品生鲜供应链】技术线-高级Java研发工程师-供应链计划

所属部门:淘天集团&#xff5c;学历:本科 | 工作年限: 3 年 职位描述 负责淘天集团天猫超市&食品生鲜供应链计划系统研发&#xff0c;包括经营计划&#xff0c;需求计划&#xff0c;补货计划&#xff0c;调拨计划&#xff0c;库存健康&#xff0c;资源计划等多个核心业务负…

各品牌主板快速启动热键对照表及CMOS进入方法

各品牌主板快速启动热键对照表 主板品牌 启动按键 笔记本品牌 启动按键 主机品牌 启动按键 华硕主板 F8 联想笔记本 F12 联想台式机 F12 技嘉主板 F12 宏碁笔记本 F12 惠普台式机 F12 微星主板 F11 华硕笔记本 ESC 宏碁台式机 F12 梅捷主板 F9 惠普笔…