前端学习笔记

学习时易忘

CSS

基础

• translate 对行内元素无效
• 块元素宽度继承父元素，高度由内容撑起
• 过渡写到本身上，谁做过渡给谁加
• transform要先写位移，因为旋转改变轴的方向
• 透视perspective写在被观察元素的父盒子上面
• text-align 对文字和行内块元素（img、input）以及行内有效，对块元素无效
• vertical-align 只能写给行内元素或行内块元素img本身，写给父元素继承不到
• before、after伪元素绝对定位时，也需要父元素有定位，否则还是相对与body定位。
• fixed定位的盒子必须要有宽度
• 行内元素给margin: 0 auto; 没有用
• 如下例所示，当没给a标签宽高，给img宽度为100%时，如果img宽度超过了div的宽度，则img的宽度为div的宽度。如果img宽度不超过div的宽度，则img保持原有宽度。

<div class="test" style="width=100px height=100px">
    <a href="#">
        
        <img src="" alt="">
    a>
div>

flex布局

• 当为父盒子设置flex布局后，子元素的 float、clear和vertical -align属性将失效，行内元素也可以给宽高
• align-items单行有效。align-content多行有效（通常配合flex-wrap:wrap）
• 所有孩子的flex：1 就是宽度平分，高度继承

Boostrap

• 列嵌套加一个行row，可以取消父元素的padding值，而且高度和父亲一样

移动端适配

why：比如在PC端一个100*100的盒子，在移动端显示的很小，这是因为PC端的页面为了完全展示在在移动端，移动端将整个页面同比例缩小以显示到视觉视口中。

移动端的默认布局视口大小是980剖析。如果所有的网页都按照980px在移动端布局，那么都会被缩小显示。而我们希望设置100x100就显示100x100。

通过设置理想视口（布局视口=视觉视口）实现上述内容。

二倍图：在PC端1px等于1物理像素，而在手机端1px可能由4个物理像素（二倍）或9个物理像素（三倍）来表示，所以PC端一个50px x 50px的图片，在移动端对应的物理像素为 100px x 100px，造成图片模糊。所以直接准备一个二倍图，即100px x 100px的图片，在移动端手动缩小为50px x 50px。

JS

基础

• alert 和 prompt 会在页面渲染前执行
• 变量命名中只能包含&和_ 这两个特殊符号
• arr.length 没有括号，和Java一样
• 常量声明时必须赋值
• 基本数据类型（number、string、boolean、undefined、null）和引用数据类型（object）
• NaN代表一个计算错误，是一个不正确的或者一个未定义的数学操作得到的结果，任何对NaN的操作都返回NaN
• 表单、prompt取出来的值默认都是字符串类型
• 隐式转换 ，+‘123’ 转换为数字型
• Nan===Nan 结果为false
• arr.sort( compareFunction(a,b) ) 比较函数小于0，a在b前面，大于0，a在b后面。
• 函数内部的变量没有声明直接使用则会作为全局变量
• 函数表达式（let fun = function（）{}） 不能在声明前调用，而具名函数（function fun（）{}）可以。
• 立即执行函数必须加分号。
• 空字符串为false和0。null转换为0，Undefined转换为NaN，null==undefined 结果为true。

API

• innerText不解析标签，innerHTML解析标签
• 定时器声明用let
• 普通函数里，this指向window
• 页面的滚动事件添加给window，距离用document.documentElement.scrollTop(Left)来测。
• offsetHeight包含border和padding
• offsetTop是从border的外边缘到定位父级（最外面就是body）的距离

• 时间戳从1970年1月1日0时0分0秒起至现在 的毫秒数
• 所有通过var声明的全局变量和函数，都会变成window对象的属性和方法。
• JS的异步任务通过回调函数实现。同步任务都在主线程上执行，形成一个执行栈；异步任务添加到任务队列中。常见的异步任务包括：普通事件（click、resize），资源加载（load、error），定时器（setInterval、setTimeout）。
• 一旦执行栈中的所有同步i任务执行完毕，系统会按次序读取任务队列中的异步任务，于是异步任务结果等待状态，进入执行栈，开始执行。
• 事件循环：执行栈中的任务执行完后，去任务队列中读取一个异步任务至执行栈中执行，如此往复。不断获取任务，执行任务，再获取任务，再执行的循环过程。
• 事实上有专门的web API（属于浏览器，因为JS时单线程的，但是浏览器可以多线程）模块处理异步任务，当异步任务完毕后，推入到任务队列中。

• 本地存储，数据存储在用户浏览器中。只能存储字符串数据类型，无法直接存储复杂数据类型。
• sessionStorage声明周期为关闭浏览器窗口。
• 正则表达式中，^a& 表示精确匹配，只能包含一个a。¹&， ab为false，因为只能包含一个字母，[] 表示匹配其中的任一字符.
• children返回元素节点，childNodes返回文本节点和元素节点（不返回属性节点）。
• mouseenter、mouseleave没有冒泡，mouseover、mouseout有冒泡

进阶

• 作用域链的本质时底层的变量查找机制。优先查找当前函数作用域中的变量，否则以此逐级查找父级作用域直到全局作用域。
• 子作用域能够访问父作用域，父无法访问子作用域。
• JS中内存声明周期：内存分配，内存使用，内存回收
• 全局变量关闭页面回收。
• 闭包：内层函数+外层函数的变量。内层函数用到外层函数的变量则产生闭包。作用：封闭数据，实现数据私有，外部也可以访问函数内部的变量，允许将函数与其所操作的某些数据关联起来。可能产生内存泄漏。
• 变量提升：代码执行前，会将当前作用域下var声明的变量提升到最前面（只提升声明，不提升赋值）。
• 函数提升：在定义之前调用。把所有函数的声明提升到当前作用域的最前面（只提升声明，不提升定义）。函数表达式必须先声明赋值后调用，否则报错。
• 动态参数arguments是伪数组。剩余参数是真数组。提倡使用剩余参数。箭头函数中没有arguments。
• 展开运算符 … 不会改变原数组。
• 箭头函数不会创建自己的this，只会从作用域链的上一层沿用this，即指向上一级的调用者。事件回调函数不太推荐使用箭头函数。
• 必须加分号的情况：立即执行函数，以数组开头的数组结构。
• 构造函数内部无需写return，因为无效，默认返回新对象。
• 实例化过程：new创建新的空对象，构造函数的this指向新对象，执行构造函数中的代码给新对象添加属性，返回新对象。

Ajax

基本内容

• 传统请求的弊端：刷新整个页面；服务器的处理需要花费时间，造成空窗期，降低用户体验。

• Ajax是异步请求，一个页面中可以发送多个ajax请求，多个请求是异步的，即同时执行，谁都不需要等谁。

• 默认是异步，open方法的第三个参数设置为false则为同步。同步请求执行时，不能执行其它请求。

• 现主流JSON的形式传输数据，也可能是普通文本、XML字符串。

• 优点：页面不刷新的情况下与服务器通信。允许根据用户事件更新部分页面内容。

• 缺点：没有浏览历史，不能回退。存在跨域问题。SEO不友好（爬虫爬不到响应的数据）。

• HTTP（hypertext transport protocol，超文本传输协议）。详细规定了浏览器和万维网服务器之间互相通信的规则。

• 请求报文

  • 行
  • 头
  • 空行
  • 体

• readyState 记录XMLHttpRequest对象的状态。0：请求未初始化（还未调用open方法）；1：请求准备就绪（已调用open方法）；2：已发送请求（已调用send方法）；3：正在接受响应数据；4：收到全部响应数据。

• get请求在请求行上提交数据 “http://www.xxx.com?username=admin&pwd=123456”

• post请求提交表单需要的固定代码（必须写在open后面）xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)

• 常见状态码。404找不到资源；500服务器内部错误。

  • 1XX：请求处理中
  • 2XX：请求成功
  • 3XX：请求重定向
  • 4XX：客户端错误
  • 5XX：服务器错误

• 同源策略：网页的url和请求的目标资源的url两者之间的协议、域名、端口号必须完全相同。Ajax默认遵循同源策略（同源策略是浏览器的一种安全策略）。根本原因：两个站点不允许共享同一个XMLHttpRequest对象，因为这样做是不安全的。

• 可以跨域的行为：a标签的超链接；form表单提交；window.location.href；script标签。

• Ajax跨域访问解决方案

  • 设置响应头。核心原理：站点允许跨域访问。
  • jsonp（json with padding）。其实不是ajax请求，只是可以完成类似ajax的局部刷新效果，只支持get请求，因为script标签只能发送get请求。利用script可以跨域访问的特点响应一段JS代码（通常是调用前端某个函数，通过参数传数据）。函数在前端定义好，并且通过url的参数将函数名传给后端。
  • 后端代理机制。先访问本站点的服务，然后本站点的服务跨域请求获取数据，再传给网页。

NodeJS

• 运行在服务端的JS
• 特点：单线程、异步、非阻塞、统一API
• nvm：管理node版本的工具。npm：node包的管理工具。
• 和JS的区别：JS由ECMAScript、DOM、BOM（DOM和BOM是宿主对象，浏览器提供的。）三部分组成。Nodejs没有DOM和BOM

Promise

• 并发、并行、同步、异步、多线程
  • 并发：单处理器环境下，多个进程同一时间段被执行。宏观上多个进程同时被执行，微观上（线程角度），处理器高速切换线程，交替执行各个任务，让人感觉在同时运行。每个处理器某一时刻只能运行一个线程。
  • 并行：在多处理器或者多CPU的环境下，多个进程同一时刻被执行。每个处理器同时执行不同的线程。
  • 多线程：计算机上每启动一个应用就有一个对应的进程（或多个），而每个进程包含一个或多个线程。多线程就是指一个进程中包含多个线程。
  • 同步：多个任务按顺序执行，前一任务完成之前，后一任务不能执行。（Java、Python）通过多线程解决同步的缺点。
  • 异步：后一任务无需等待前一任务的完成。实现异步不一定要多线程。
  • JS中的同步是代码按顺序执行，异步是将耗时的代码交给浏览器去执行，不用等待结果而继续往下执行，执行完后取浏览器的执行结果。
• 异步带来的问题：JS中的异步代码无法通过return设置返回值，必须通过回调函数返回结果。
• 回调函数：由于事件循环机制同步代码先于异步代码执行，在同步代码中拿不到异步代码的执行结果。所以在同步代码中加入回调函数（在该函数中处理结果），在异步代码中调用回调函数，并把数据作为回调函数的参数传进去。
• 某些情况下需要多次调用异步代码。 如果某个异步curr调用需要用到前一个异步调用prev的结果，则curr就要写到前一个异步调用prev的回调函数里，本次异步调用的结果也需要回调函数接收，进而形成回调函数套回调函数的现象，即回调地狱。代码可读性极差，可调试性差。
• Promise：一个可以用来存储数据的对象。存取数据的方式比较特殊，使其可以存取异步调用的数据。构造函数中传一个函数。
• Promise构造函数的回调函数，会在创建Promise时调用，回调函数有两个参数（也是函数）resolve、reject。resolve在执行正常是存储数据，reject在执行异常时存储数据。
• 通过resolve、rehect函数向Promise中添加数据的好处是可以存储异步数据。
• Promise中维护了两个隐藏的属性。
  • PromiseResult 存储数据（resolve和reject的数据都存在其中）。
  • PromiseState记录Promise的三种状态：fulfilled完成（对应resovle）、rejected拒绝（对应rejected和异常）、pending等待。PromiseState初始值为pending，只能修改一次。即先用resolve存数据后，再用rejected存数据是无效的
• 用then读取数据时，为Promise设置两个回调函数。如果PromiseState为fulfilled调用第一个回调函数，为rejected调用第二个回调函数。then中的回调函数在同步代码执行完后才执行。
• catch专门处理异常的方法，只需要一个回调函数，回调函数只会在rejected状态下被调用。相当于then(null, reason()=>{})
• finally（用的不多），无论是fulfilled还是rejected状态，都会执行。但是finally中的回调函数中不会接收到数据。
• then、catch、finally都会返回一个新的Promise 。then和catch回调函数的返回值会存到新的Promise中。finally不会。
• 无异常，中间的catch会被跳过，即穿透效果。
• 当发生异常时，并且整个调用链中没有catch，则异常会抛出。一般调用链中只有一个catch写在最后（粗糙处理，细腻处理需要多个catch）。
• Promise的静态方法。
  • Promise.resolve(10) 立即执行的Promise。
  • Promise.reject(10) 立即拒绝的Promise。
  • Promise.all([Array]) 结果result是一个数组，对应多个Promise的执行结果。如果Array中有一个异常或是reject，则全都不会返回结果。
  • Promise.allSettled([Array]) 结果result是一个对象{status: ,value(reson):}数组，对应多个Promise的执行结果。如果Array中有一个异常或是reject，仍然会返回一个对象数组。
  • Promise.race([Array]) result是执行最快的Promise对应的结果。如果最快的发生异常或reject，则抛出异常给后续catch处理。即只要最快的，不管是否异常。
  • Promise.any([Array]) result是执行最快的Promise对应的结果。但只要最快的正常执行的Promise。如果数组所有热Promise都异常或reject，则抛出异常。
• JS中有两种任务队列：宏任务队列（大部分代码），微任务队列（Promise的回调函数then、catch、finally）。
• JS事件循环流程
  • 执行调用栈中的代码。
  • 清空微任务队列。、
  • 从宏任务队列中取出一个任务至栈中执行，同样把在此期间产生的宏任务和微任务分别入队。
  • 重复2、3
• 浏览器的事件循环
  • 执行第一个宏任务：全局 Script 脚本，产生的的宏任务和微任务进入各自的队列中
  • 清空微任务队列。
  • 取出一个宏任务执行，同样把在此期间产生的宏任务和微任务分别入队。
  • 重复2、3

async和await

• 通过async可以创建异步函数，异步函数返回值会自动封装到一个Promise中返回。
• 当通过await调用异步函数时，会暂停代码的执行，直到异步代码执行完毕，将异步函数的结果返回，才继续往下执行。
• await只能用于async声明的函数中，或es模块的顶级作用域中。
• await会阻塞async函数内部位于其后面的代码，不会影响外部代码。
• 通过await调用的代码，需要通过try-catch处理异常
• 如果async中没有写await，那么它里面的代码就会依次执行。先于函数后面的同步代码执行。
• 当使用await调用函数后，当前函数后面的所有代码会在当前执行完毕后被放入到微任务队列中。

commonJS模块化规范（更广泛）

• 非官方规范，node默认的。
• 在定义模块时，模块中的内容默认是不能被外部看见的。但可以exports可以暴露变量。
• 同时暴露多个变量 module.exports = {} 。注意必须要带module. 改对象的属性和给变量赋值的区别。
• 引入模块 require() 函数
  • 引入自定义模块时，模块名要以 ./ 或 …/ 开头，即相对路径。扩展名可以省略。因为node会自动补全。查询顺序 .js .json .node
  • 引入核心模块（node自带）时，直接写名字即可。也可以在名字前加 node:
  • 引入文件夹模块时，只需要引入主文件。默认引入index.js文件。
• 扩展名为cjs的文件，表示是一个commonjs规范的模块，引入时不能省略扩展名。
• 原理：所有的commonjs的模块，都会被包装到一个函数中，exports、require、module作为参数被传进来。
• __filename 表示当前模块的绝对路径。dirname当前模块所在目录路径。

ES6模块化规范

• 默认情况下，node中的模块化标准是CommonJS，要想采用ES6模块化。
  • 使用mjs作为扩展名。
  • 修改package.json，将模块化规范设置为ES6规范，则扩展名为js的文件都默认为ES6规范。{“type”: “module”}
• 导出 export let a = 10;
• export default value，一个模块中只有一个默认导出。默认导出内容在导入时可以随意命名，
• 导入 import {a as hello, b, c} from “path”。 import * as a from “path”(不建议使用*，建议按需引用)自定义es模块不能省略扩展名
• 导入内容为const常量，所以不能重新赋值。
• ES模块化在浏览器中同样支持，但需要考虑兼容性问题。

常用核心模块

• 核心模块是node中自带的模块，可以在node中直接使用。
• global是node中的全局对象，作用类似于window。
• peocess表示当前node的进程，可以获取进程信息或对进程操作。
• process是全局变量，可以直接使用。
• process.exit(code) 结束当前进程，终止node。code为自定义的结束状态码（通常不用）。
• process.nextTick(callback) 将回调函数插入到tick队列中。 调用栈、tick队列、微任务队列、宏任务队列。tick队列在下一次事件循环之前进行。
• path需要先引入。 const path = require(“node: path”);
• path.resolve([…paths])生成绝对路径。不传参则返回当前工作目录。
• 常用：path.resolve(__dirname, “./file name”);
• const fs = require(“node: fs”);
• fs.readFileSync() 同步读取。返回Buffer对象。不推荐使用。
• fs.readFile(path, callback) 异步读取。读取完毕会调用回调函数callback(error, buffer)。
• 通常使用Promise版本的。 const fs = require(“node: fs/promises”);
• fs.appendFile(path, string) 添加或创建（没有文件则创建）

npm

• npm install xxx 后发生了什么：
  • 将包下载在当前目录下的node_modules文件夹下
  • 在package.json中添加依赖
  • 自动添加package-lock.json
• -g 全局安装。全局安装的包卸载时也要加-g。 npm uninstall xxx -g
• -D 开发依赖，不会添加到package.json中的依赖中
• 通过yarn进行全局安装时，默认的安装目录并未加到环境变量中

HTTP

• 在浏览器中输入地址后发生了什么（网址组成：协议、域名、资源路径）
  • DNS解析，根据域名查询网站的IP地址。
  • 浏览器需要和服务器建立连接（TCP/IP）三次握手。
  • 向服务器发送请求（遵循HTTP协议）
  • 服务器处理请求并返回响应（遵循HTTP协议）
  • 浏览器解析响应数据并渲染出页面
  • 断开连接，四次挥手。
• 三次握手过程（建立连接）
  • 客户端向服务器发送连接请求。SYN（同步）
  • 服务器响应连接请求，同意并申请连接客户端。ACK（确认）、SYN
  • 客户端告知服务器同意连接。ACK
• 四次挥手过程（断开连接）。两者都可能发起断开请求，以客户端发起为例
  • 客户端向服务器发送请求，通知服务器我的数据发送完毕，请求断开连接。FIN
  • 服务器向客户端返回数据，知道了。ACK
  • 服务器向客户端返回数据，数据接收完了，可以断开连接。FIN ACK
  • 客户端向服务器发送数据可以断开了。ACK
• 网络通信过程
  • 应用层（浏览器服务器等软件）、传输层（将数据拆分成包或合成）、网络层（给包添加信息或去掉）、数据链路层（传输信息）
  • HTTP是应用层协议，规定客户端和服务器通信的报文格式。
  • 浏览器和服务器之间的通信是基于请求和相应的。
• 请求报文格式：
  • 请求首行
  • 请求头
  • 空行（区分头和体）
  • 请求体（只有post有）

express

• use中间件。app.use((request, response, next) => {})不区分请求方式。模糊匹配。有多个中间件时，可以调用next() 放行（不能在send后调用），否则只会由第一个中间件处理请求。
• 服务器中的代码对于外部浏览器来说是不可访问的，所以服务器中的html页面，浏览器无法直接访问。如要访问，需将页面所在的目录设置为静态资源 app.use(express.static(“public”))
• “/hello/:id” http://127.0.0.1:3333/hello 不行， /hello/123 可以 /hello/123/234 不行。在路径中已冒号命名的部分称为参数param，在get请求中可以用它来传参数。 可以通过request.params属性获取这些参数
• 默认情况下，express不会自动解析请求体，需要用中间件use为其增加功能。express.urlencoded()
• 模板引擎,服务器端渲染。render(template, object) object是一个对象，存储要在模板中渲染的数据 .
• router是一个中间件，可以在该中间件上绑定各种路由以及其它中间件。
• HTTP协议是无状态的协议，服务器无法区分请求是否来自同一个客户端。cookie来解决这种问题。
• cookie本质就是一个头，服务器已响应头的形式将cookie发送给客户端，客户端收到后会将其存储，并在下次向服务器发送请求时将其传回，达到识别的目的。
• cookie是服务器创建的。先npm install cookie-parser，然后中间件引入。
• 默认情况下，cookie的有效期是一次会话（session），会话指打开至关闭浏览器的过程。
• cookie一旦发送给浏览器，服务器就无法更改浏览器中存储的cookie。但是可以通过发送新的同名cookie替代，达到修改的目的。
• cookie的不足
  • 由服务器创建，浏览器保存，每次浏览器访问服务器时都需要将cookie发回，所以不能在cookie中存放较大的数据。
  • 不安全。cookie直接存储在客户端，容易被篡改盗用。
• 为了解决cookie的不足，希望将用户的数据统一存储在服务器中，每一个用户都对应一个唯一ID，只需要通过cookie将ID发送给浏览器，浏览器每次访问只需将ID发至服务器即可读取到数据。该技术为session（会话）。
• session是服务器中的一个对象，用来存储用户的数据，每一个session都有一个唯一的ID，以cookie的形式发送给浏览器。
• 先npm install express-session，然后中间件引入。
• 拿到浏览器发过来的cookie，再拿到cookie对应的数据存至request。
• session默认有效期是一次会话。cookie没了session也会失效。重启服务器时session对象会自动充值。
• 如何将session存储到本地文件中
  • npm install session-file-store
  • 引入const FileStore = require(‘session-file-store’)(session)
  • 设置为中间件
• csrf攻击（跨站请求伪造）。现在大部分浏览器在跨域的情况下自动发送cookie。通过req.get(‘referer’) 检查请求来源。使用验证码。使用post请求结合token。
• token。在创建表单时随机生成一个token，将token存储到session中，并通过模板发送给用户，用户提交表单时，必须将token发挥，才可以进行后续操作。

TypeScript

基本介绍

• 基于jS构建，增加了语法限制，一个JS的超集，兼容所有的JS平台。
• TS不能被JS解析器直接执行。需要先编译。

类型

• 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测。
• 可以使用 | 连接多个类型或值。
• any表示任意类型，设置为any类型后相当于关闭了类型检测，可以赋值给任意类型的变量，不建议使用。
• 声明变量不指定类型则为any。
• unknownv表示未知类型。不可以直接赋值给其它类型的变量。
• 类型断言 语法： 变量 as 类型 或 <类型>变量
• never 表示永远不会返回结果
• let b: {name: string, age?: number, [key: type]: any} 指定对象b中必须包含的属性，?表示属性可选。[key: type]: any 可以有任意属性。
• 设置函数结构。语法： (形参：类型 …) => 返回值类型。
• 元组。语法：[类型，类型，类型]
• 枚举enum。
• &
• 类型别名。 type mytype = string

编译选项

• -w监视
• 监视项目下的所有JS文件。tsc -init 自动生成tsconfig.json文件，再-w。
• tsconfig.json
  • “include”：[“./src /**/*”] 指定哪些文件需要被编译 ** 表示任意目录， * 表示任意文件
  • “exclude”: [] 指定不需要被编译的。
  • “extend”: [] 继承某个配置文件

webpack

• 安装 npm i -D webpack webpack-cli typescript ts-loader

• 配置文件webpack.config.js。 所有配置信息都应写在module.exports中

  const path = require('path')
  const HTMLWebPackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
      // 指定入口文件
      entry: "./src/index.ts",
      // 打包后的文件
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: "bundle.js"
      }.
      // 指定打包时要使用的模块
      module: {
      	// 指定要加载的规则
      	rules: [
      		{
      			// 指定使规则生效的文件
      			test: /\.ts$/,
      			// 指定要使用的loader, 写在后面的先执行
      			use: [
      				{
      					loader: 'babel-loader',
      					options: {
  									persets:[["@babel/preset-env"], {targets:}]
  								}
  					}, 
      				'ts-loader'],
      			// 要排除的文件
      			exclude: /node-modules/
  			}
      	]
  	},
      // 配置插件
      plugins: [
          new CleanWebpackPlugin(),
          new HTMLWebPackPlugin({
              // 自定义title
              title: 'aaa',
             	// 自定义生成的html文件的参照模板
              template: './src/template.html'
          })
      ],
     	
      // 设置引用模块
      resolve: {
          extensions: ['.ts', '.js']
      }
  }
  

• npm i -D html-webpack-plugin 自动在html文件中引入css和js文件

• npm webpack-dev-server 开发服务器

• npm i -D clean-webpack-plugin 自动清除输出目录

• npm i -D @babel/core @bable/preset-env babel-loader core-js

类

• 直接定义的属性是是实例属性，需要通过实例对象访问，通过static定义的是静态属性或类属性，可以直接访问。readonly开头的是只读属性不能修改。
• 在构造方法中，this表示当前实例对象。
• 继承 extends。多个类中共有的代码写在父类中。
• 在类的方法中，super表示方法。子类中的构造函数必须对父类的构造函数调用。
• abstract 抽象类，不能用来创建实例对象。抽象方法没有方法体，只能定义在抽象类中，子类必须对抽象方法进行重写。
• 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，接口也可以当成类型声明使用。
• 接口中的所有属性都不能有实际的值，只定义结构。所有的方法都是抽象方法。
• implements 实现接口，使类满足接口的要求。
• 接口interface使TS独有的，JS没有。
• TS中设置getter方法 get name(){return this.name} 直接用.name 就可以访问。
• private 私有属性，只能在当前类中访问。protected只能在当前类和子类中访问。实例不能访问。
• 可以将属性直接定义在构造函数的参数中
• 定义函数或类时，不明确类型时，可以采用泛型。
• 泛型 function fn(a: T): T{return a} , 不指定泛型TS可以自动推断，也可以指定泛型。

---

1. a-z ↩︎