1. <template>
    2.   <div class="about">
    3.     <h1>This is an about page</h1>
    4.   </div>
    5. </template>
    6. <script lang="ts">
    7. // ts 很好啊 开发人员要拥抱技术
    8. // 规定传递什么 就传递什么 目标比较明确
    10. // 规定它传入的属性 及属性的数据类型
    11. // 接口
    12. interface LabelValue {
    13.   name: string;
    14. }
    15. // 可选属性
    16. interface SquareConfig {
    17.   color?: string;
    18.   width?: number;
    19. }
    20. // 只读属性
    22. interface Point {
    23.   readonly x: number;
    24.   readonly y: number;
    25. }
    27. // 函数类型
    29. interface SearchFunc {
    30.   (source: string, substring: string): boolean;
    31. }
    32. // 接口也可以继承
    33. interface fa {
    34.   name: string;
    35. }
    36. interface child extends fa {
    37.   money: number;
    38. }
    40. // 混合类型
    42. import { defineComponent, onMounted } from "vue";
    43. export default defineComponent({
    44.   setup() {
    45.     let aa = (bb: LabelValue): void => {
    46.       console.log("结果:", bb.name);
    47.     };
    48.     let create = (config: SquareConfig): { color: string; area: number } => {
    49.       let newSquare = { color: "white", area: 1000 };
    50.       if (config.color) {
    51.         newSquare.color = config.color;
    52.       }
    53.       if (config.width) {
    54.         newSquare.area = config.width * config.width;
    55.       }
    56.       return newSquare;
    57.     };
    59.     let p1: Point = { x: 10, y: 20 };
    60.     // 只能读 不能改写
    61.     // p1.x = 5;
    63.     // 数组只读
    64.     let arr: number[] = [3, 2, 5];
    65.     let ro: ReadonlyArray<number> = arr;
    66.     // 数组只读
    67.     // ro[0] = 12; error
    68.     // ro.push(5) error
    69.     // ro.length = 100 error
    70.     // arr = ro error
    71.     // 可以采用类型断言覆写
    72.     arr = ro as number[];
    73.     arr[0] = 222;
    74.     console.log("结果:", arr, ro);
    76.     let mySearch: SearchFunc;
    77.     mySearch = (source, substring) => {
    78.       let result = source.search(substring);
    79.       return result > -1;
    80.     };
    81.     console.log("结果:333", mySearch("xiaohua", "p"));
    83.     let kk = <child>{};
    84.     kk.name = "kk";
    85.     kk.money = 20;
    87.     console.log("结果:kk", kk);
    89.     onMounted(() => {
    90.       let obj = {
    91.         name: "xiaoming",
    92.       };
    93.       aa(obj);
    95.       console.log("结果:", create({ color: "black", width: 5 }));
    96.     });
    97.   },
    98. });
    99. </script>