TypeScript 模版字面量与类型操作

下面这段代码是Vue3中的一些用法
TypeScript 复制代码
<template>
    <div class="title">
        <el-text class="txt">模版语法</el-text>
    </div>
    <div class="content">
        <div class="section">
            <el-text class="section-title">模版字面量基本语法</el-text>
            <el-text class="section-content">{{ myShirt }}</el-text>
        </div>
        <div class="section">
            <el-text class="section-title">工具类型组合</el-text>
            <el-text class="section-content">MouseEvent 类型: {{ mouseEvent }}</el-text>
            <el-text class="section-content">keyEvent 类型: {{ key_Event }}</el-text>
            <el-text class="section-content">FullName 类型: {{ fullName }}</el-text>
        </div>
        <div class="section">
            <el-text class="section-title">组合多个类型操作</el-text>
            <el-text class="section-content">Getter 和 Setter 示例: {{ getName }}, {{ setAge }}, {{ getEmail }}</el-text>
        </div>
        <div class="section">
            <el-text class="section-title">标签函数类型</el-text>
            <el-text class="section-content">{{ greeting }}</el-text>
        </div>
    </div>
</template>

<script setup lang="ts">
import { type } from "os";

// 模版字面量基本语法示例代码
type Color = 'red' | 'green' | 'blue';
type Size = 'small' | 'medium' | 'large';
type Shirt = `${Size} ${Color} Shirt`;

const myShirt: Shirt = 'medium red Shirt'; // 有效
// const myShirtInvalid: Shirt = 'extra large yellow Shirt'; // 无效，会报错


// 工具类型组合
type EventName<T extends string> = '${T}Changed';
type Concat<T extends string, U extends string> = `${T}_${U}`;
type MouseEvent = EventName<"mouse">; // "mouseChanged"
type keyEvent = EventName<"key">; // "keyChanged"
type FullName = Concat<"firstName", "lastName">; // "firstName_lastName"

const mouseEvent: MouseEvent = "mouseChanged";
const key_Event: keyEvent = "keyChanged";
const fullName: FullName = "firstName_lastName";

// 组合多个类型操作
type GetterName<T extends string> = `get${Capitalize<T>}`;
type SetterName<T extends string> = `set${Capitalize<T>}`;
type Accessor<T extends string> = GetterName<T> | SetterName<T>;
type propers = "name" | "age" | "email";
type Accessors = Accessor<propers>;
const getName: Accessors = "getName";
const setAge: Accessors = "setAge"; 
const getEmail: Accessors = "getEmail";

// 标签函数类型
type TemplateTagFunction<T extends string[]> = (strings: T, ...values: any[]) => string;
const myTemplateTagFunction: TemplateTagFunction<['Hello, ', '!']> = (strings, ...values) => {
    return strings[0] + values.join('') + strings[1];
};
const greeting = myTemplateTagFunction`Hello, ${'World'}!`; // "Hello, World!"



</script>

<style lang="scss" scoped>

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  margin-bottom: 20px;

  .txt {
    font-size: 34px;
    font-weight: bold;
    color: #333;
  }
}

.content {
  .section {
    margin-bottom: 20px;

    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #555;
      display: block;
    }

    .section-content {
      font-size: 16px;
      color: #666;
      margin-left: 20px;
      display: block;
    }
  }
}

</style>