web前端--TS基础理论及原理

概念：typescript就是在js的基础上对数据进行强制的类型检查，生成js代码的时进行编译，弱类型的静态语言。

类型注解：轻量级的为函数或变量添加约束的方式

静态语言：在编译过程中就能发现错误，对类型检查较为严格。

动态语言：bug的隐藏久，灵活度高。

基础类型：布尔值、数字、数组（数组里面都是number类型和js不同）、元组(数字、字符串类型混搭)、枚举（可迭代，理解为迭代器的一种）、字符串

let a: number = 1;
let b: string = "hello";
//布尔值的元组
let c: boolean[] = [true,false];
// 也可以不指明类型，编译时会进行类型推断
// 定义接口参数类型
interface User {name:stringage?:number// 说明这个参数的类型是只读的，修饰词// readonly id:number
}
function printUser(user:User):void{console.log(user.name,':',user.age)
}
const user1 = {name:'小刘',age:23
}
printUser(user1)interface UserFun  {(name:string,age:number):void;
}
const myFuntion:UserFun = (name,age)=>{console.log('SetUser');console.log(name,':',age);
}

接口：描述一个对象或者函数

ts中的类可以继承接口，对接口进行实现，多了一些修饰符（public status private protected）

泛型：不是一个固定类型，是一个模板类型，不预先确定具体类型，使用的时候确定下来

泛型和any不同，他可以通过继承来约束数据类型

interface User {name:stringage?:number// 说明这个参数的类型是只读的，修饰词// readonly id:number
}
function aaa<T extends User>(arg:T):T{return arg;
}
calss class1<T>{}
//同一个方法的T都是一个类型
//<>可以加在方法、类定义上
//最后一个T表示函数有返回值（不是void）

枚举：对数据的定义可以默认连下来，再中断

// 数字枚举的声明分为带有初始化器和不带初始化器件
// 1、不带初始化器 枚举成员默认从0开始 依次递增
enum NumEnum1 {one,two}
console.log(NumEnum1.one) // => 0
console.log(NumEnum1.two) // => 1
// 2、带有初始化器分为两种
// 2-1、带有初始化器并指定初始化常数
enum NumEnum2 {one = 10,two, //11three = 30,four //31
}
// 2-2使用初始化器并且初始化值是对已经声明的枚举的枚举成员的引用
enum NumEnum3 {one = NumEnum2.four, //31two, //32
}

迭代器（可以遍历的一种结构）和生成器（generator）两者一起使用 (// iterators():Iterator

// Generator)

装饰器（对方法或属性进行一定处理）：一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。类似高阶函数（可以进行函数嵌套）

class A {@testAA() //装饰器public aa;@testAbc() //装饰器method(){testAbc();}
}

多态：同一个父类的不同子类对同一个方法的实现具有差异（不同子类重写父类的同名方法，同参）

重载：同名不同参，方法名一样，参数个数、类型、位置不一样（这个方法可以在子类和父类中都有，也

可以只在父类中存在）

抽象类/抽象方法：只能定义类的基础方法和属性不能实现什么具体的功能，相当于做一个容器，后面继承它的子类可以在其基础上扩展具体的方法逻辑

abstract class Parent {abstract function B(){}
}
class Son extends Parent{B(){console.log(1231)}
}

ts只有编译成js语言才能运行

ts的编译原理

sourceCode -> 扫描仪 -> token流(大数组，一行的很多代码) -> 解析器 ->AST

funcion abc(){console.log(123);
}
//token流
[{value:'function',type:'keyword'},{value:'abc',type:'identifier'},{value:'.',type:'flag'}]
//逆波兰式进行token流的内容组合

web前端--TS基础理论及原理相关推荐

web前端常识之浏览器原理
一.HTTP协议定义 URL的组成例如:http://www.alimama.com/membersvc/index.htm.它的含义如下: http://:代表超文本传输协议,通知baidu.co ...
web 前端绘制折线_前端每日实战：苦练 CSS 基本功——图解辅助线的原理和画法...
在用 CSS 进行绘图和布局时,除了借助浏览器开发工具之外,还经常需要绘制一些辅助线,以便定位参考.今天就以第 170 号作品中使用的网格线为例,详细讲解一下辅助线的原理和画法. 为了使辅助线明显可见 ...
Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动上节回顾在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
前端如何实现网络速度测试功能_分析Web前端测试要点，从架构原理上进行分析，希望大家能够掌握...
基于Web前端分析过程,大概有十几个测试要点,我们今天主要来讲解结合前五个要点进行详细解说.前端测试点主要针对前端展开,什么叫前端分析呢?就是我们所有的分析和测试要点所站的视角都是针对客户端或者浏览器 ...
好程序员web前端分享MVVM框架Vue实现原理
好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js和react.js更加简洁 ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
矢量场可视化原理及Web前端风场流场的可视化实现
本文以风场流场为例介绍一种简单矢量场绘制方法,同时提供了三种Web前端风场与流场绘制的实践矢量场绘制原理 Web前端风场绘制的三种实践 Openalyers绘制 Geoserver发布并设置样式直 ...
前端性能优化之资源传输优化、渲染优化、Web 加载和渲染原理
一.资源传输优化使用压缩 Gzip,如下所示: 对传输资源进行体积压缩,可高达 90% 配置 Nginx 启用 Gzip 启用 Keep Alive,如下所示: 一个持久的 TCP 连接,节省了连接 ...
100本最棒的web前端图书推荐
100本最棒的web前端图书推荐 01.<JavaScript DOM编程艺术第二版(中文)> 语言:中文类型:pdf 简介:这本书作为被大家推荐的最多的前端入门书籍是有道理的. 他能真 ...
TypeScript——Web前端开发的救赎
JavaScript代码有多烂? 入职到现在做了6年js开发了(包括之前的2年一共写了8年js),现在我们团队有10几20号人写js(纯js开发),需要维护的js代码有40-50万行,不得不承认js代 ...

web前端--TS基础理论及原理

web前端--TS基础理论及原理相关推荐

最新文章

热门文章