Skip to main content

moregeek program

ts的基础知识_issa的博客-多极客编程

1 基础知识


   1.1 作用


ts语言是对js的补充,使得js的可用性提高,同时也支持es6的语法,ts可以通过相应的编译器去变成我们可使用的js文件,不会引起一些错误。使得开发一些大型项目跟加容易。



   1.2 使用


ts的使用需要node.js的支持,通过node的虚拟服务器去运行,首先要安装npm,没有的化就在终端
npm install
如果不行的话,就需要去官网下载Node.js再安装
然后再安装
npm config set registry https:
最后
npm install -g typescript



2 新语法


   2.1 类型



  • any类型 :表示任何变量,也就是说可以任何类型的来给值。
  • never类型:never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。
  • enum类型:枚举类型,和java很类似enum color{red,blue,yellow},调用的话就直接调用,let get:String=color.red


   2.2 变量

  与js不同的时,Ts需要声明变量类型,函数也有返回值,也可以不声明,就默认为any类型


//变量名:类型
var i:String="ssss";

   2.3 函数

  ts中的函数会需要返回值,和java类似的


function name():return_type{
·····
}

ts中还可以使用es6的箭头函数


let nameBy=(name1:type1,name2:type2···)=>{return result}
//当函数没有参数或只有一个可以省略括号或这函数体只有一条语句可以去掉{}
let nameBy=name2:type2=>{return result}
let nameBy=>return result

   2.4 封装

  Ts里面有一些封装的类,和java一样的用法.可以把数据转换成类来对待


let numbers=new Number(value);
let string=new String(value);

这些封装的类提供了一些便捷的方法去处理数据。


   2.4 map对象

  和java中的map集合很像,同样使用键值对,但使用的用数组来存


let myMap = new Map([
["key1", "value1"],
["key2", "value2"]
]);
let maper=new Map([["1","sb"],["2","tsb"]]);



  • map.clear() – 移除 Map 对象的所有键/值对 。
  • map.set() – 设置键值对,返回该 Map 对象。
  • map.get() – 返回键对应的值,如果不存在,则返回 undefined。
  • map.has() – 返回一个布尔值,用于判断 Map 中是否包含键对应的值。
  • map.delete() – 删除 Map 中的元素,删除成功返回 true,失败返回 false。
  • map.size – 返回 Map 对象键/值对的数量。
  • map.keys() - 返回一个 Iterator 对象, 包含了 Map 对象中每个元素的键 。
  • map.values() – 返回一个新的Iterator对象,包含了Map对象中每个元素的值 。


   2.5 元组

  可以用来装不同类型的元素,调用就和数组差不多


let m=[26,"sb"];


push():向元组添加元素,添加在最后面。
pop():从元组中移除元素(最后一个),并返回移除的元素。



   2.6 联合变量

  ts中一个变量可以预先设置多个类型,等传入的参来判断该用那种类型。


let m:String|number|String[];

但是不能赋值不是预先设置的类型。


   2.7 接口

  ts可以设置接口,和java差不多,不过接口里的变量和方法需要全部实现


interface name {
name:String,
//这里时箭头函数
display:()=>string,
}
//实现
let person:name={
name:"issa",
display:():string=>{
·····
}
}

   2.8 类和对象

  ts允许我们去创建一个类,这样就不需要直接去创建很多对象,同时再ts转变的js文件中类


class person{
name:string;
constructor(name:string){
this.name=name;
}
display():string{
return this,name;
}
}
//使用
let person:Person=new Person("issa");
//js转换代码
var Person = /** @class */ (function () {
function Person(name) {
this.name = name;
}
Person.prototype.display = function () {
return this.name;
};
return Person;
}());

  类也是可以继承的,和java都是extend关键字,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。一个子类只能有一个父亲,而一个子类是可以有爷爷的,可以层层继承。


class Shape { 
Area:number
constructor(a:number) {
this.Area = a
}
}

class Circle extends Shape {
//里面有隐藏的Area字段,从父类遗传的
//disp()是子类的独有方法

disp():void {
console.log("圆的面积: "+this.Area)
}
}
//这里子类默认无参构造,会去调用父类的构造器(如果父类写了有参而无无参,就只有有参的构造器而已)
var obj = new Circle(223);
obj.disp()

   2.8 命名空间


目的:命名空间一个最明确的目的就是解决重名问题。
使用:用namespace来命名,用export去调用
范围:命名空间定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相干的。这样,在一个新的名字空间中可定义任何标识符,它们不会与任何已有的标识符发生冲突,因为已有的定义都处于其他名字空间中。



namespace name{
export interface person{
display();
}
}
//name.去引用
//如果不在同一个ts文件就用///去引用
//这个文件中有一个接口。
/// <reference path = "IShape.ts" />
class person implements IShape {

}

   2.9 模块


目的:TypeScript 模块的设计理念是可以更换的组织代码。
使用:使用import去引用,使用export去呈现内容,也就是导出。



// 文件名 : person.ts 
export interface person {
// 代码部分
}
//文件名:son.ts
//require中的为文件目录
import person = require("./person");

尾声


这些就是我所知的一些ts的知识,如有错误还希望能指出来。


©著作权归作者所有:来自51CTO博客作者ISSA2号的原创作品,请联系作者获取转载授权,否则将追究法律责任

【js】大道至简---来看看js中你最熟悉的变量和数值的知识吧_wx63311348dcab6的博客-多极客编程

1 变量1.1 什么是变量?变量就是一个装东西的盒子。变量是用于存放数据的容器。我们通过变量名获取数据,数据可以被更改。1.2 声明变量1.2.1 定义单个变量js通过var来声明变量,var是一个JS关键字,用来声明变量(Variable变量的意思),使用该关键字声明变量后,计算机会自动会变量分配内存空间,不需要程序员管。程序员只需要通过变量名获取数据。var age = 3;计算机会为age分

#yyds干货盘点#vue的防抖_文本、的博客-多极客编程

在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。这些事件总是被频繁触发,可能 几秒一次。如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的。我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是防抖和节流。观察者 防抖我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的

requestvideoframecallback() 简单实例_devpoint:web开发技术点的博客-多极客编程

在文章《​​浏览器视频帧操作方法 requestVideoFrameCallback() 简介​​》中介绍了基本的使用情况,本文来体验一下其使用过程,后续将增加一些酷炫的实例。点击开始播放视频、暂停视频以读取元数据。在画布上绘制视频帧与实际视频帧速率同步的画面。​​GITHUB​​中包含整个代码实例,主要代码如下:<template> <div id="app">

#yyds干货盘点#数据可视化总结_文本、的博客-多极客编程

最近在做可视化相关的项目,借这篇文章今天谈谈数据可视化相关的技术解决方案。数据可视化旨在借助于图形化手段,清晰有效地传达与沟通信息(来源于bd).在我们生活中最常见的,就有各种统计数据做成图表、股票k线图、能力雷达图这些(上面那张个人能力分析图,图片数据纯属虚构);而对于前端开发者来说,就是用一些大神开发好的可视化图表组件将后端传过来的数据用一种直观,清晰的方式呈现在浏览器中,常用的可视化图表图库

#yyds干货盘点#vue3.2 新指令 v-memo解析_文本、的博客-多极客编程

v-memo 官方定义缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存,该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同,那么整个子树的更新将被跳过。举例来说:<div v-memo="[valueA, valueB]"> ...</div>当组件重新渲染,如果 ​​valueA​​​ 和 ​​valueB​​​ 都保

原生拖拽太拉跨了,纯js自己手写一个拖拽效果,纵享丝滑_品味前端的博客-多极客编程

前言 提到元素拖拽,通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现,它提供了一套完整的事件机制,看起来似乎是首选的解决方案,但实际却不是那么美好,主要是它的样式太过简陋,无法实现更高级的用户体验: 这是浏览器默认的拖拽效果,点住拖拽任意图片或文字都会产生。 笔者因为之前有个小项目需要经常参考稿定设计,一直有留意其元素拖拽的效果(如下图),所以接下来我将以这种效果

【js】大道至简---来看看js中你最熟悉的变量和数值的知识吧_wx63311348dcab6的博客-多极客编程

1 变量1.1 什么是变量?变量就是一个装东西的盒子。变量是用于存放数据的容器。我们通过变量名获取数据,数据可以被更改。1.2 声明变量1.2.1 定义单个变量js通过var来声明变量,var是一个JS关键字,用来声明变量(Variable变量的意思),使用该关键字声明变量后,计算机会自动会变量分配内存空间,不需要程序员管。程序员只需要通过变量名获取数据。var age = 3;计算机会为age分

uniapp 微信小程序开启发送好友和朋友圈_12502506的博客-多极客编程

引言最近在开发微信小程序的过程中,需要在页面开启分享功能——分享给好友或者是朋友圈的功能。 找了一圈的uniapp文档,决定在这里记录一下,分享给有缘人使用。效果在微信小程序中,这个默认是关闭状态的如下:开启的正确方式onShareAppMessage(res) { if (res.from === 'button') { console.log(res.target)

面试宝典(vue系列一)_嘎嘎宠粉的博客-多极客编程

🔥系列专栏:面试宝典 🎉欢迎关注👀点赞👍收藏⭐留言📝 🥇个人主页:hacker_demo的51CTO博客 💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请多关照,我的人生,敬请期待💖💖💖 (Vue面试题) 题目一 Vue如何添加自定义指令 👉考点 考察对Vue添加自定义指令方法的掌握 👉答案 添加自定义指令

#yyds干货盘点#数据可视化总结_文本、的博客-多极客编程

最近在做可视化相关的项目,借这篇文章今天谈谈数据可视化相关的技术解决方案。数据可视化旨在借助于图形化手段,清晰有效地传达与沟通信息(来源于bd).在我们生活中最常见的,就有各种统计数据做成图表、股票k线图、能力雷达图这些(上面那张个人能力分析图,图片数据纯属虚构);而对于前端开发者来说,就是用一些大神开发好的可视化图表组件将后端传过来的数据用一种直观,清晰的方式呈现在浏览器中,常用的可视化图表图库

#yyds干货盘点#vue3.2 新指令 v-memo解析_文本、的博客-多极客编程

v-memo 官方定义缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存,该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同,那么整个子树的更新将被跳过。举例来说:<div v-memo="[valueA, valueB]"> ...</div>当组件重新渲染,如果 ​​valueA​​​ 和 ​​valueB​​​ 都保

那些你不知道的炫酷导航交互效果_南城前端的博客-多极客编程

基于上次发布的 那些你不知道的炫酷按钮交互效果 反馈比较好,后续将继续收集那些炫酷的交互效果,希望可以给你的项目添砖加瓦,更上一层楼。 那些你不知道的炫酷交互效果系列: 那些你不知道的炫酷按钮交互效果 那些你不知道的炫酷导航交互效果 本文带来的炫酷的导航交互效果,一个结构层次清晰的导航是网站必不可少的功能之一,它可以帮助用户快速轻松的找到想要的信息。导航功能在PC端项目用到的比较多,国内一般的