泛型 泛型函数 定义一个泛型函数： function returnParameter<T>(param: T): T {  return param; } 调用函数： returnParameter<string>('hello'); 调用泛型函数时并不是一定要指定泛型类型，也可以省略泛型类型，让 TS 编译器根据实际参数的类型推断： returnParameter('world'); 但有时候遇到复杂的调用，TS 无法正确推断出泛型类型，就需要手动指定。 泛型函数类型 在 TS 中，可以用…

可以为对象类型的参数添加注解以规范对象定义： function printUser(user: { name: string, age: number }): void {    console.log("姓名：" + user.name + "，年龄：" + user.age); } printUser({name:"icexmoon",age:15}); 对象类型也可以用类型别名定义： type Person = { name: string, age: number }; function printUser…

函数类型表达式 可以用函数类型表达式表示一个函数的类型： function greeter(fn: (a: string) => void) {    fn("Hello, World"); } ​ function printToConsole(s: string) {    console.log(s); } ​ greeter(printToConsole); 这里的函数类型表达式(a: string) => void表示一个函数，它接收一个string类型名称为a的参数，且没有返回值。 需要注意…

在前篇文章中，提到过在使用联合类型时可能需要进行类型缩小，比如： function concatStr(prefix: string | number, context: string) {    if (typeof prefix === "number") {        // 如果前缀是数字，返回若干个空格和字符串拼接的结果        return " ".repeat(prefix) + context;   }    // 如果前缀是字符串，直接拼接后返回    return prefix + co…

在系统学习 TypeScript 前，需要先部署开发环境，具体可以查看TypeScript 简易指南。 基本类型 TypeScript 与 JavaScript 一样，常见的基本类型有： let name: string = "张三"; console.log(name.toUpperCase()); ​ let age: number = 42; console.log(age.toFixed(2)); ​ let isOk: boolean = true; console.log(isOk.valueOf())…

TypeScript 是 JavaScript 的超集，在 JavaScript 之上添加了类型检查等功功能，在运行时依然需要编译成 JavaScript 代码后运行。 环境准备 使用 TypeScript 需要先安装 Node.js 环境。 全局安装 ts： ❯ npm install -g typescript 需要管理员权限，否则会安装失败。 项目初始化 打开项目根目录，执行 tsc --init，在项目根目录下会生成一个tsconfig.json文件。其中比较重要的配置项： {  "target": "ES…

ShallowRef 一个简单示例： <template>    <div>        <h2>count:{{ count }}</h2>        <h2>person:{{ person }}</h2>        <button @click="count++">count++</button>        <button @click="person.name='李四'">修改名字<…

props 父组件要通过 props 传递信息给子组件，只要在子组件上添加相应的属性： <template> <div class="father"> <h3>父组件</h3> <Child :car="car"/> </div> </template> ​ <script setup lang="ts" name="Father"> import Child from './Child.vue' import { re…

Pinia 是一个 Vue3 的集中式状态（数据）管理库。 搭建测试项目 先创建一个 Vue3 项目，添加两个组件。 src\components\Count.vue： <template>  <div class="count">    <h2>当前求和为：{{ sum }}</h2>    <select v-model.number="n">      <option value="1">1</option>      <…

路由器和路由 新建一个 Vue3 项目，创建一个简单的 App.vue： ​ <template>  <div class="app">    <h2 class="title">Vue路由测试</h2>    <!-- 导航区 -->    <div class="navigate">      <a href="#" class="active">首页</a>      <a href="#">新闻<…