@shixinde/vuepress-theme-init
Version:
212 lines • 81.8 kB
HTML
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.14" />
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html,
body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme')
const systemDarkMode =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true)
}
</script>
<link rel="icon" href="/favicon.ico"><title>TypeScript 笔记 | Guoguo-notes</title><meta name="description" content="袁果锅笔记">
<link rel="preload" href="/guoguo-notes/assets/style-35EaXqtH.css" as="style"><link rel="stylesheet" href="/guoguo-notes/assets/style-35EaXqtH.css">
<link rel="modulepreload" href="/guoguo-notes/assets/app-Dx9bNbfq.js"><link rel="modulepreload" href="/guoguo-notes/assets/TypeScript.html-D-Qjaudh.js">
<link rel="prefetch" href="/guoguo-notes/assets/index.html-D6hY1Pr0.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React.html-DpSypgmq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java jdk 管理.html-UyxKEztz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/lingzhi.html-DrDRjKEH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/临时使用.html-D81L-GXB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/新公司.html-Bp4Oxj5H.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目架构升级版.html-CpJwv32O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/风扬小记.html-BTKAsyQB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python代码片段.html-3rxV2C-F.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python笔记.html-DfxyADl3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/AjaxResult.html-CcB1SHt9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 基础.html-C0Mw79YJ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 注解.html-DMhJ2pfz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MyBatis Plus.html-DXaupZNq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MySQL完整.html-E-VKR_Bm.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Mybatis 语法.html-BtyLUnj2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/StringBoot.html-IewOkkS1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea 插件.html-yFlZz-2q.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea快捷键.html-CI1PJIaN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java 代码片段.html-mGveOiyh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/mySql.html-mha8lKTS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页插件使用.html-BpMDhHym.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目初始化.html-TexbaFDo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/02_react案例_笔记.html-BzISG9Ro.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/03_react-router_教程.html-CiEuDnOl.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/04_react-UI_教程.html-CptRBAn1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/05_redux笔记.html-BBtVc0mQ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 笔记.html-BPeqw1PX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 项目配置流程.html-BXl6Ye6r.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷React扩展笔记.html-CCxyveD2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷react-redux笔记.html-DYzvAaxv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-3ZVA3kn7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element Plus --vue3.0.html-DXuv_b9N.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element ui 笔记.html-sVqlVk_V.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Taro.html-CA8JB-of.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 代码片段.html-DKeMa5iO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 全局封装 main.js.html-D9vo-8hy.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 笔记.html-DGHKF3_K.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3 .html--oEgCjOt.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3_Element Plus.html-BVAoHXff.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/element plus 本地启动.html-CgsgPmvg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 代码片段.html-G1ShCdaZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 笔记.html-BtuYzmC-.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp笔记.html-ok2vMZAr.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite 笔记.html-D-EBkJ0C.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite手写插件.html-Cggy24Oh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vue.js 下载文件.html-B1uCoFDS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vueuse笔记.html-DS6eTZ6y.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vxe-table笔记.html-yUGgZHig.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/代码片段 - 解析数学公式.html-DdcBDyRv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用插件.html-CZkTIVvE.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/汇智腾远笔记.html-moZCMq7M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/视频播放插件.html-BcEFDEgf.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS笔记.html-fAv9dNNH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Echarts.html-Cge55fid.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git 代码管理.html-B63UoB0T.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Html 笔记.html--NntXjWX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/axios 请求拦截.html-D1TCv2Mj.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-Ka8coTuF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/npm.html-B-EmKZd8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/sh 笔记.html-B3G_4KZW.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/valibot校验学习.html-BBH2-2ZH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/云开发教程.html-DRtT7hW1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/公共API接口.html-p1pxjePH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/小程序笔记.html-BJbLxiMh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/插件库.html-CZ-6S-Qp.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器.html-BNfIswB8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器部署教学.html-T1qkai4O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/浏览器px to rem适配.html-DPzD4TkF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/登录逻辑.html-D5sdqJbb.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/网站配色.html-B_2Exge9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/跨域代理.html-BYkKrkY7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/接入AI.html-DVRrF1MA.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/查看 编辑对话框组件.html-zEZcOjWH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/简易电影选座.html-TuQVklis.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-1f6p3-c_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS--common.html-D0ck7nMZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/ES6.html-wEFap9Uq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git提交.html-CHssaRZs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Js获取当前时间的方法.html-BRnoMyWs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-App笔记.html-BUy_Af_M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-app API.html-CAzH1d66.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uniapp-插件.html-DB8eOvmu.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/VueX 笔记.html-BrvLUsYq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js函数封装.html-Cc5d9Th4.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-CIq-xlv8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uView基本使用.html-CCsyyvNN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp 引入组件库.html-BnVxGutO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用正则表达式.html-AS2O_lcX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/界面类.html-BEOhA9U_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/笔记.html-DcjAVSiK.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/组件封装.html-BF9gShal.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/编程逻辑整理.html-CZRD3wTo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/调用接口.html-DniVQnty.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SSH 配置.html-9u6Q-DHg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Editor.html-CfSL24h8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页组件.html-DcRa4Q6p.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/拖拽组件.html-D6yjy7lX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-LinbGCk2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/GIt 代码提交规范及步骤.html-w7f6_4N9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/命名_ 开发期间的命名规范.html-DhnWSrsL.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/大佬项目组织规范.html-B32Km5um.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/重要_框架 - 初始化项目约束.html-Sw9ULLk3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/404.html-BZdzN0T2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SearchResult-DqPIHYal.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="vp-theme-container external-link-icon"><!--[--><header class="vp-navbar"><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href="/guoguo-notes/"><!----><span class="vp-site-name" aria-hidden="true">Guoguo-notes</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><button class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!--[--><button type="button" class="search-pro-button" aria-label="搜索"><svg xmlns="http://www.w3.org/2000/svg" class="icon search-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="search icon" name="search"><path d="M192 480a256 256 0 1 1 512 0 256 256 0 0 1-512 0m631.776 362.496-143.2-143.168A318.464 318.464 0 0 0 768 480c0-176.736-143.264-320-320-320S128 303.264 128 480s143.264 320 320 320a318.016 318.016 0 0 0 184.16-58.592l146.336 146.368c12.512 12.48 32.768 12.48 45.28 0 12.48-12.512 12.48-32.768 0-45.28"></path></svg><div class="search-pro-placeholder">搜索</div><div class="search-pro-key-hints"><kbd class="search-pro-key">Ctrl</kbd><kbd class="search-pro-key">K</kbd></div></button><!--]--></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar"><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active">常用笔记 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/CSS%E7%AC%94%E8%AE%B0.html" aria-label="1. CSS笔记.md"><!---->1. CSS笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/Echarts.html" aria-label="2. Echarts.md"><!---->2. Echarts.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/Git%20%E4%BB%A3%E7%A0%81%E7%AE%A1%E7%90%86.html" aria-label="3. Git 代码管理.md"><!---->3. Git 代码管理.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/Html%20%E7%AC%94%E8%AE%B0.html" aria-label="4. Html 笔记.md"><!---->4. Html 笔记.md<!----></a><!----></li><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/TypeScript.html" aria-label="5. TypeScript.md"><!---->5. TypeScript.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/axios%20%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA.html" aria-label="6. axios 请求拦截.md"><!---->6. axios 请求拦截.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/js%E5%B8%B8%E8%A7%84.html" aria-label="7. js常规.md"><!---->7. js常规.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/npm.html" aria-label="8. npm.md"><!---->8. npm.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/sh%20%E7%AC%94%E8%AE%B0.html" aria-label="9. sh 笔记.md"><!---->9. sh 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/valibot%E6%A0%A1%E9%AA%8C%E5%AD%A6%E4%B9%A0.html" aria-label="10. valibot校验学习.md"><!---->10. valibot校验学习.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E4%BA%91%E5%BC%80%E5%8F%91%E6%95%99%E7%A8%8B.html" aria-label="11. 云开发教程.md"><!---->11. 云开发教程.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E5%85%AC%E5%85%B1API%E6%8E%A5%E5%8F%A3.html" aria-label="12. 公共API接口.md"><!---->12. 公共API接口.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html" aria-label="13. 小程序笔记.md"><!---->13. 小程序笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E6%8F%92%E4%BB%B6%E5%BA%93.html" aria-label="14. 插件库.md"><!---->14. 插件库.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E6%9C%8D%E5%8A%A1%E5%99%A8.html" aria-label="15. 服务器.md"><!---->15. 服务器.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%83%A8%E7%BD%B2%E6%95%99%E5%AD%A6.html" aria-label="16. 服务器部署教学.md"><!---->16. 服务器部署教学.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E6%B5%8F%E8%A7%88%E5%99%A8px%20to%20rem%E9%80%82%E9%85%8D.html" aria-label="17. 浏览器px to rem适配.md"><!---->17. 浏览器px to rem适配.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%99%BB%E5%BD%95%E9%80%BB%E8%BE%91.html" aria-label="18. 登录逻辑.md"><!---->18. 登录逻辑.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="19. 网站配色.md"><!---->19. 网站配色.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E8%B7%A8%E5%9F%9F%E4%BB%A3%E7%90%86.html" aria-label="20. 跨域代理.md"><!---->20. 跨域代理.md<!----></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h2 id="初始化定义" tabindex="-1"><a class="header-anchor" href="#初始化定义"><span>初始化定义</span></a></h2><blockquote><p>从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JS 属于动态类型的编程语言。 静态类型:编译期做类型检查;动态类型:执行期做类型检查。 代码编译和代码执行的顺序: 1编译2执行。 对于JS来说:需要等到代码真正去执行的时候才能发现错误(晚)。 对于TS来说:在代码编译的时候(代码执行前)就可以发现错误(早)。 并且，配合VSCode等开发工具, TS可以提前到在编写代码的同时就发现代码中的错误，减少找Bug、改Bug时间。</p></blockquote><h2 id="ts-js-转换" tabindex="-1"><a class="header-anchor" href="#ts-js-转换"><span>[TS --> JS] 转换</span></a></h2><blockquote><h3 id="eg-tsc-hello-ts" tabindex="-1"><a class="header-anchor" href="#eg-tsc-hello-ts"><span>eg: tsc .\hello.ts</span></a></h3></blockquote><h2 id="简化转换步骤" tabindex="-1"><a class="header-anchor" href="#简化转换步骤"><span>简化转换步骤</span></a></h2><blockquote><p>2.3简化运行TS的步骤 问题描述:每次修改代码后，都要重复执行两个命令,才能运行TS代码，太繁琐。 简化方式:使用ts-node包，直接在Node.js中执行TS代码。 安装命令: npm i -g ts-node (ts-node 包提供了ts-node命令)。 使用方式: ts-node hello.ts。 解释: ts-node 命令在内部偷偷的将TS->JS,然后，再运行JS代码。</p></blockquote><h2 id="typescript-基础类型" tabindex="-1"><a class="header-anchor" href="#typescript-基础类型"><span>TypeScript 基础类型</span></a></h2><p>TypeScript 包含的数据类型如下表:</p><table><thead><tr><th style="text-align:left;">数据类型</th><th style="text-align:left;">关键字</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;">任意类型</td><td style="text-align:left;">any</td><td style="text-align:left;">声明为 any 的变量可以赋予任意类型的值。</td></tr><tr><td style="text-align:left;">数字类型</td><td style="text-align:left;">number</td><td style="text-align:left;">双精度 64 位浮点值。它可以用来表示整数和分数。<code>let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制</code></td></tr><tr><td style="text-align:left;">字符串类型</td><td style="text-align:left;">string</td><td style="text-align:left;">一个字符系列，使用单引号（<strong>'</strong>）或双引号（<strong>"</strong>）来表示字符串类型。反引号（**<code>**）来定义多行文本和内嵌表达式。</code>let name: string = "Runoob"; let years: number = 5; let words: string = <code>您好，今年是 ${ name } 发布 ${ years + 1} 周年</code>;`</td></tr><tr><td style="text-align:left;">布尔类型</td><td style="text-align:left;">boolean</td><td style="text-align:left;">表示逻辑值：true 和 false。<code>let flag: boolean = true;</code></td></tr><tr><td style="text-align:left;">数组类型</td><td style="text-align:left;">无</td><td style="text-align:left;">声明变量为数组。<code>// 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array = [1, 2];</code></td></tr><tr><td style="text-align:left;">元组</td><td style="text-align:left;">无</td><td style="text-align:left;">元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。<code>let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob</code></td></tr><tr><td style="text-align:left;">枚举</td><td style="text-align:left;">enum</td><td style="text-align:left;">枚举类型用于定义数值集合。<code>enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2</code></td></tr><tr><td style="text-align:left;">void</td><td style="text-align:left;">void</td><td style="text-align:left;">用于标识方法返回值的类型，表示该方法没有返回值。<code>function hello(): void { alert("Hello Runoob"); }</code></td></tr><tr><td style="text-align:left;">null</td><td style="text-align:left;">null</td><td style="text-align:left;">表示对象值缺失。</td></tr><tr><td style="text-align:left;">undefined</td><td style="text-align:left;">undefined</td><td style="text-align:left;">用于初始化变量为一个未定义的值</td></tr><tr><td style="text-align:left;">never</td><td style="text-align:left;">never</td><td style="text-align:left;">never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。</td></tr></tbody></table><p>**注意：**TypeScript 和 JavaScript 没有整数类型。</p><h2 id="类型注解-let-age-number-18" tabindex="-1"><a class="header-anchor" href="#类型注解-let-age-number-18"><span>类型注解 let age： number = 18</span></a></h2><blockquote><h2 id="变量加类型" tabindex="-1"><a class="header-anchor" href="#变量加类型"><span>变量加类型</span></a></h2></blockquote><p>注意：</p><p>数组类型也要写类型注解</p><p>下面这两种方法都可以，一般使用上面的这种写法</p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">let</span> numbers<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">let</span> numbers2<span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator"><</span><span class="token builtin">number</span><span class="token operator">></span> <span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>如果数组需要多个类型的话，可以使用下面的这种写法</p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">let</span> numbers3<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span><span class="token string">'15'</span><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><h2 id="函数加类型-function-const" tabindex="-1"><a class="header-anchor" href="#函数加类型-function-const"><span>函数加类型 function|const</span></a></h2></blockquote><blockquote><h3 id="function-方式" tabindex="-1"><a class="header-anchor" href="#function-方式"><span>function 方式</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span>num1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> num2<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> num1<span class="token operator">+</span>num2</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="const-方式" tabindex="-1"><a class="header-anchor" href="#const-方式"><span>const 方式</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> <span class="token function">add</span><span class="token punctuation">(</span>num1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> num2<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> num1<span class="token operator">+</span>num2</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//第二种方法</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">add2</span><span class="token operator">:</span> <span class="token punctuation">(</span>num1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> num2<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function-variable function">number</span> <span class="token operator">=</span> <span class="token punctuation">(</span>num1<span class="token punctuation">,</span> num2<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> num1<span class="token operator">+</span>num2</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>如果函数返回值没有类型的话 可以是用void</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span>num1<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> num2<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">66666</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>特殊类型 元组(一个可以指定数量的数组)</p></blockquote><p>可以用来存储一些类似于经纬度等只有几个参数的数组</p><h2 id="类型别名-type-定义" tabindex="-1"><a class="header-anchor" href="#类型别名-type-定义"><span>类型别名 type 定义</span></a></h2><blockquote><h3 id="数组对象使用类型别名-type-定义" tabindex="-1"><a class="header-anchor" href="#数组对象使用类型别名-type-定义"><span>数组对象使用类型别名 type 定义</span></a></h3></blockquote><p>首先定义一个变量 ，是这个变量指向一个类型，然后将这个类型加以引用即可</p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">type</span> <span class="token class-name">CustomArray</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> </span>
<span class="line"><span class="token keyword">let</span> numbers4<span class="token operator">:</span> CustomArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">123</span><span class="token punctuation">,</span> <span class="token string">'11'</span><span class="token punctuation">]</span></span>
<span class="line"><span class="token keyword">let</span> numbers5<span class="token operator">:</span> CustomArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'11'</span><span class="token punctuation">,</span> <span class="token string">'123'</span><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="只有接口可以使用两个方法来定义" tabindex="-1"><a class="header-anchor" href="#只有接口可以使用两个方法来定义"><span>只有接口可以使用两个方法来定义</span></a></h3><p><code>interface | type</code></p></blockquote><blockquote><h3 id="对象接口别名-interface-定义" tabindex="-1"><a class="header-anchor" href="#对象接口别名-interface-定义"><span>对象接口别名 interface 定义</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token comment">// 接口:</span></span>
<span class="line"><span class="token keyword">interface</span> <span class="token class-name">IPerson</span><span class="token punctuation">{</span></span>
<span class="line"> name<span class="token operator">:</span> <span class="token builtin">string</span></span>
<span class="line"> age<span class="token operator">:</span> <span class="token builtin">number</span></span>
<span class="line"> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token keyword">void</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> person<span class="token operator">:</span> IPerson <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> name<span class="token operator">:</span> <span class="token string">'黎明'</span><span class="token punctuation">,</span></span>
<span class="line"> age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> person1 IPerson <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> name<span class="token operator">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span></span>
<span class="line"> age<span class="token operator">:</span> <span class="token number">32</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="对象接口使用-类型别名-type-定义" tabindex="-1"><a class="header-anchor" href="#对象接口使用-类型别名-type-定义"><span>对象接口使用 类型别名 type 定义</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token comment">// 类型别名:</span></span>
<span class="line"><span class="token keyword">type</span> <span class="token class-name">IPerson</span><span class="token punctuation">{</span></span>
<span class="line"> name<span class="token operator">:</span> <span class="token builtin">string</span></span>
<span class="line"> age<span class="token operator">:</span> <span class="token builtin">number</span></span>
<span class="line"> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token keyword">void</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> person<span class="token operator">:</span> IPerson <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> name<span class="token operator">:</span> <span class="token string">'黎明'</span><span class="token punctuation">,</span></span>
<span class="line"> age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> person1 IPerson <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> name<span class="token operator">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span></span>
<span class="line"> age<span class="token operator">:</span> <span class="token number">32</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="接口继承-extends" tabindex="-1"><a class="header-anchor" href="#接口继承-extends"><span>接口继承 <code>extends</code></span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">interface</span> <span class="token class-name">Point2D</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> y<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">interface</span> <span class="token class-name">Point3D</span> <span class="token keyword">extends</span> <span class="token class-name">Point2D</span> <span class="token punctuation">{</span> z<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">let</span> p3<span class="token operator">:</span> Point3D <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line"> y<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>
<span class="line"> z<span class="token operator">:</span><span class="token number">3</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p3<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="让用户可以自己选择值-字面量类型" tabindex="-1"><a class="header-anchor" href="#让用户可以自己选择值-字面量类型"><span>让用户可以自己选择值 ，字面量类型</span></a></h2><blockquote><p>字面量类型 : 让用户从所给变量中选择一个值，如果选择其他的值就会报错</p><p>此案例用于定义函数</p></blockquote><p><img src="https://s1.ax1x.com/2022/08/11/v8GKk6.png" alt=""></p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">changeDirection</span><span class="token punctuation">(</span>direction<span class="token operator">:</span> <span class="token string">'up'</span> <span class="token operator">|</span> <span class="token string">'down'</span> <span class="token operator">|</span> <span class="token string">'left'</span> <span class="token operator">|</span> <span class="token string">'right'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> </span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">changeDirection</span><span class="token punctuation">(</span><span class="token string">'up'</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>提前声明 <code>命名常量</code> 枚举</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">enum</span> Direction<span class="token punctuation">{</span></span>
<span class="line"> up<span class="token punctuation">,</span></span>
<span class="line"> down<span class="token punctuation">,</span></span>
<span class="line"> left<span class="token punctuation">,</span></span>
<span class="line"> right</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">changeDirection</span><span class="token punctuation">(</span>direction<span class="token operator">:</span> Direction<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">changeDirection</span><span class="token punctuation">(</span>Direction<span class="token punctuation">.</span>up<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>使用<code>枚举法</code> 是有<code>值</code>的</p><p>如果不指定的话，<code>默认值</code>为0</p><p>当然可以指定值，指定值后，下面的值还是会自增长</p><p>如果指定值为字符串的话，将不会有自增长</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">enum</span> Direction<span class="token punctuation">{</span></span>
<span class="line"> up<span class="token operator">=</span><span class="token number">13</span><span class="token punctuation">,</span></span>
<span class="line"> down<span class="token punctuation">,</span></span>
<span class="line"> left<span class="token operator">=</span><span class="token number">18</span><span class="token punctuation">,</span></span>
<span class="line"> right</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">changeDirection</span><span class="token punctuation">(</span>direction<span class="token operator">:</span> Direction<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>direction<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> </span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">changeDirection</span><span class="token punctuation">(</span>Direction<span class="token punctuation">.</span>down<span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// 打印为 14 </span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="类型上下文-typeof-的两个作用" tabindex="-1"><a class="header-anchor" href="#类型上下文-typeof-的两个作用"><span>类型上下文 typeof 的两个作用</span></a></h2><blockquote><p>用于测试 后面变量的类型</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//String</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><p>用于引用上文中的类型，来限制下面的类型</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">formtPoint</span><span class="token punctuation">(</span>point<span class="token operator">:</span> <span class="token keyword">typeof</span> p<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token function">formtPoint</span><span class="token punctuation">(</span><span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">111</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">626</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// string</span></span>
<span class="line"><span class="token comment">// { x: 111, y: 626 }</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="class类-构造函数" tabindex="-1"><a class="header-anchor" href="#class类-构造函数"><span>Class类 构造函数</span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">person</span> <span class="token punctuation">{</span></span>
<span class="line"> age<span class="token operator">:</span> <span class="token builtin">number</span></span>
<span class="line"> gender<span class="token operator">:</span> <span class="token builtin">string</span></span>
<span class="line"> <span class="token function">constructor</span><span class="token punctuation">(</span>age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> gender<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age</span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>gender <span class="token operator">=</span> gender</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">person</span><span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token string">'男'</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>age<span class="token punctuation">,</span>p<span class="token punctuation">.</span>gender<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 结果： 18 男</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="class类-实例方法" tabindex="-1"><a class="header-anchor" href="#class类-实例方法"><span>Class类 实例方法</span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span></span>
<span class="line"> x <span class="token operator">=</span> <span class="token number">1</span></span>
<span class="line"> y <span class="token operator">=</span> <span class="token number">2</span></span>
<span class="line"> <span class="token function">scale123</span><span class="token punctuation">(</span>n<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">*=</span> n</span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">*=</span> n</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">p<span class="token punctuation">.</span><span class="token function">scale123</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>x<span class="token punctuation">,</span> p<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 结果： 10 20</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="class类-继承" tabindex="-1"><a class="header-anchor" href="#class类-继承"><span>Class类 继承</span></a></h2><blockquote><p><code>extends</code>使用这个关键子</p><p><code>子类</code>就可以使用<code>父类</code>的所有的方法</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Animal</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'没事走两步'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span><span class="token punctuation">{</span></span>
<span class="line"> name<span class="token operator">=</span> <span class="token string">'二哈'</span></span>
<span class="line"> <span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'汪汪！！！'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">d<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">d<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">//结果: </span></span>
<span class="line"><span class="token comment">// 二哈</span></span>
<span class="line"><span class="token comment">// 没事走两步</span></span>
<span class="line"><span class="token comment">// 汪汪！！！</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h2 id="接口继承" tabindex="-1"><a class="header-anchor" href="#接口继承"><span>接口继承</span></a></h2></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">interface</span> <span class="token class-name">Single</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">sing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token keyword">void</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token keyword">implements</span> <span class="token class-name">Single</span> <span class="token punctuation">{</span></span>
<span class="line"> name<span class="token operator">=</span><span class="token string">'Jack'</span></span>
<span class="line"> <span class="token function">sing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'你是我的小可爱'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> </span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">p<span class="token punctuation">.</span><span class="token function">sing</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// 结果：</span></span>
<span class="line"><span class="token comment">// Jack</span></span>
<span class="line"><span class="token comment">// 你是我的小可爱</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="class类-可见性修饰符" tabindex="-1"><a class="header-anchor" href="#class类-可见性修饰符"><span>Class类 可见性修饰符</span></a></h2><blockquote><h3 id="public-公共的-默认" tabindex="-1"><a class="header-anchor" href="#public-公共的-默认"><span>public 公共的 [ 默认 ]</span></a></h3></blockquote><blockquote><h3 id="private-私有的" tabindex="-1"><a class="header-anchor" href="#private-私有的"><span>private 私有的</span></a></h3></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">private</span> <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'没事走两步'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="protected-受保护的" tabindex="-1"><a class="header-anchor" href="#protected-受保护的"><span>protected 受保护的</span></a></h3><p>protected:表示<code>受保护的</code>，仅对其<code>声明所在类</code>和<code>子类</code>中(非实例对象)可见。</p><ol><li>对自己本身的子方法可以使用</li><li>对于实例化的对象不可以使用</li></ol></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">protected</span> <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'没事走两步'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><h3 id="readonly-只读修饰符" tabindex="-1"><a class="header-anchor" href="#readonly-只读修饰符"><span>readonly 只读修饰符</span></a></h3><p>readonly 只能够修饰属性，不能够修饰方法</p></blockquote><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">readonly</span> name <span class="token operator">=</span> <span class="token string">'二哈'</span></span>
<span class="line"> <span class="token keyword">protected</span> <span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'汪汪！！！'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link label" href="https://github.com/shixindea/shixinde-notes/edit/main/常用笔记/TypeScript.md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg class="edit-icon" viewbox="0 0 1024 1024"><g fill="currentColor"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></g></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 2914310412@qq.com">袁果锅</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/Html%20%E7%AC%94%E8%AE%B0.html" aria-label="4. Html 笔记.md"><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span>4. Html 笔记.md</span></div></a><a class="route-link auto-link next" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/axios%20%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA.html" aria-label="6. axios 请求拦截.md"><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span>6. axios 请求拦截.md</span></div></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!----><!--]--><!--]--></div>
<script type="module" src="/guoguo-notes/assets/app-Dx9bNbfq.js" defer></script>
</body>
</html>