Pigeon Vue

环境搭建

安装TypeScript解释器，如使用vue3学习不用单独安装

bash

npm i  -g  typescript

基础类型

定义类型

typescript

// 数字
let age: number = 18;
// 字符串
let name: string = "ll";
// 布尔值
let isShow: boolean = true;
// 数组基础写法
let list: Array<number> = [1, 2, 3];
// 数组常用写法
let list: number[] = [1, 2, 3];
// 对象
let obj: any = { name: "ll", age: 18 };
// 对象的标准写法
interface ObjIF {
  name: string;
  age: number;
}
let obj: ObjIF = { name: "ll", age: 18 };

any

可以赋予任意类型的值，可以在任意值上访问任何属性,调用任何方法

将变量标记为any后，代码编写等同于使用JavaScript，TypeScript将不会对其进行类型检查。

let anyAny: any = 4;
anyAny = "ll";
anyAny = false;
anyAny.name;
anyAny.getName();

联合类型

typescript

let age: string | number;
age = 18;
age = "18";
age = true; //ERROR

let type: "success" | "fail";
type = "success";
type = "fail";
type = "info"; //ERROR

类型断言

// 类型断言 as
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

Function

基本写法

const fn1 = (param: string): void => {
  console.log("给我传的值必须是字符");
  console.log("我是没有返回值的箭头函数");
};

function fn2(param: string): void {
  console.log("给我传的值必须是字符");
  console.log("我是没有返回值的函数");
}

返回参数

function getId(): number {
  return 1001;
}
const getId = (number) => {
  return 1001;
};

可选参数

//参数后加个问号，代表是可选参数,
//可选参数必须要放在函数入参的最后面，不然会导致编译错误。
function fn4(x: number, y: number, z?: number): number {
  console.log("给我传的值必须是数字x和y,你可以选择传数字z也可以不传");
  return x + y;
}

默认参数

let fn5 = (x: number, y: number = 100): number => {
  return x + y;
};
fn5(100);

剩余参数

function fn7(...args: number[]): number[] {
  return args;
}
console.log(fn7(1, 2, 3, 4, 5)); //[1,2,3,4,5]

void

没有返回值的函数可以用 void 声明

const fn1 = (param: string): void => {
  console.log("我是没有返回值的函数");
};

枚举

数字枚举

//数字枚举如果没有初始化，默认初始化值为0，每项+1
enum Direction {
  Up, // 0
  Down, // 1
  Left, // 2
  Right, // 3
}
// 初始化数字，后续每项+1
enum Direction {
  Up = 1, // 1
  Down, // 2
  Left, // 3
  Right, // 4
}

字符串枚举

// 在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。
enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

//字符串枚举
enum message {
  success = "恭喜你，成功了",
  fail = "抱歉，失败了",
}

接口

// 定义接口后，固定传入的数据必须包含的值
interface Shape {
  name: string;
  width: number;
  height: number;
  color?: string;
}
// 接口继承
interface Circle extends Shape {
  r: number;
}
// 类[实现/继承]接口
class CustomShape implements Circle {
  name: string;
  width: number;
  height: number;
  color?: string;
  r: number;
}

function area(shape: Shape) {
  var area = shape.width * shape.height;
  return "I'm " + shape.name + " with area " + area + " cm squared";
}

类

class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log("我是" + this.name + "，今年" + this.age + "岁");
  }
}

定义 TS（可跳过）

// index.ts 板块
export interface PersonInter{ //约束格式
    id:string, // 此处为小写
    name: string,
    age: number,
}

// 定义一个自定义类型
export type Persons:Array<PersonInter>
// or
export type Persons = PersonInter[]

//Person.vue 板块
<template>
  <div class="person">
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref} from 'vue'
  //此处的 PersonInter 是一种类型  而不是值  在其前面应该加上 type
  import {type PersonInter，type Persons} from '@/types（此处为index.ts的固定文件路径）'
   // person 要符合 PersonInter 的接口规范(person格式与PersonInter不符的时候报错)
  let person:PersonInter = {id:'sdqasd12312',name:'张三'，age:12} //限制一行代码的规范

  //personList(注释:数组名)
  //Array(注释:定义personList为数组)
  //PersonInter(注释:此处为泛型，定义数组里面对象的格式)
  let personList:Array<PersonInter>=[
    {id:'sdqasd12312',name:'张三'，age:12},
    {id:'sdqasd12312',name:'张三'，age:12},
    {id:'sdqasd12312',name:'张三'，age:12},
  ]

// 可优化为：
let personList:Persons=[
    {id:'sdqasd12312',name:'张三'，age:12},
    {id:'sdqasd12312',name:'张三'，age:12},
    {id:'sdqasd12312',name:'张三'，age:12},
  ]
</script>

常见错误（可跳过）

TS 定义中 String 和 string 的区别

1.string 基本类型
    1.1 string 是 TypeScript 的基本类型之一，表示文本数据.
    1.2 它是原始类型，通常用于大多数情况下的字符串操作.

2.String 对象类型
    2.1 String 是 JavaScript 的内置对象类型，表示字符串对象。
    2.2 它是 JavaScript 的全局对象之一，可以通过 new 操作符创建一个字符串对象实例。

3.示例
// 使用 string 类型
let myString: string = "Hello, world!";
console.log(myString.toUpperCase()); // "HELLO, WORLD!"

// 使用 String 对象类型
let myStringObject: String = new String("Hello, world!");
console.log(myStringObject.toUpperCase()); // "HELLO, WORLD!"

// 类型检查
let anotherString: string = "Test";
anotherString = myStringObject; // 错误：Type 'String' is not assignable to type 'string'

4.总结：
在接口定义中，通常使用 string 而不是 String，因为它是基本类型，更加常见且高效
在 TypeScript 中，推荐使用小写的 string 作为类型注解，因为它是原始类型，性能更好，使用起来也更符合开发习惯。
只有在特定情况下才需要使用 String 对象类型。

编程题（必做）

函数、枚举、接口、数组考察

定义接口类型为 PersonIF 得,PersonIF 属性有 id,name,age,type；其中 type 的类型为枚举 SEX,1 为男 2 为女，参考数据如下

[
  { id: "123", type: 1, name: "张三", age: 18 },
  { id: "124", type: 2, name: "李四", age: 20 },
  { id: "125", type: 1, name: "王五", age: 19 },
  { id: "126", type: 1, name: "赵六", age: 21 },
  { id: "127", type: 2, name: "钱七", age: 22 },
  { id: "128", type: 1, name: "钱八", age: 23 },
  { id: "129", type: 1, name: "钱九", age: 24 },
  { id: "130", type: 2, name: "王十", age: 25 },
];

定义一个函数，传入 PersonIF[],返回 PersonIF[]，通过 age 排序；
定义一个函数，传入 PersonIF[],返回 number[]，取出人员的 id；
定义一个函数，传入 id，PersonIF[]，返回 PersonIF，取出 id 对应的人员；如果不存在则返回 null；
定义一个函数，传入 name，PersonIF[]，返回 PersonIF[]，判断与 name 相似的数据，传入‘王’需返回‘王五’，‘王十’对应的数据；
定义一个函数，传入 age 和 PersonIF[]，返回 PersonIF[]，取出年龄大于 age 的数据；
定义一个函数，传入 type 和 PersonIF[]，返回 PersonIF[]，取出对应性别的数据；
定义一个函数，传入 type 和 PersonIF[]，返回 PersonIF，取出对应年龄最大的数据；如不传值，默认取出男性。

类、基础算法考察

建立一个节点 Node 类，属性 position，为数组，如[0,1]；代表第 0 列，第 1 行。属性 color，为堆叠 COLORS（自行创建，红黄蓝黑白 5 种颜色），如 COLORS.RED。
建立一个平面 Plane 类，用于管理节点类，有属性 nodes，其中 nodes 为节点类数组，如[ Node1,Node2,Node3 ]；
平面类中有一个 init 方法，传入一个数组，如[5,5]，生成一个 5x5 的平面，每个节点都为有一个 Node 类；
平面提供一个 print 方法，根据平面位置打印颜色；如 3x3 的格子

console

红 蓝 白
红 蓝 蓝
红 黑 黄

平面类提供一个 drawBlack 方法，传入一个 position 数组，如[0,0],那么将与[0,0]位置的节点相连的所有同色节点颜色设定为黑色。如果全部为黑色则翻转，将所有的节点颜色设定为白色。

console

黑 蓝 白
黑 蓝 蓝
黑 黑 黄

编写一个测试方法，init后print结果，然后for循环10次，每次随机生成一个position 数组，调用 drawBlack 方法，然后 print 结果。

环境搭建 ​

基础类型 ​

定义类型 ​

any ​

联合类型 ​

类型断言 ​

Function ​

基本写法 ​

返回参数 ​

可选参数 ​

默认参数 ​

剩余参数 ​

void ​

枚举 ​

数字枚举 ​

字符串枚举 ​

接口 ​

类 ​

定义 TS（可跳过） ​

常见错误（可跳过） ​

TS 定义中 String 和 string 的区别 ​

编程题（必做） ​

函数、枚举、接口、数组考察 ​

类、基础算法考察 ​

环境搭建

基础类型

定义类型

any

联合类型

类型断言

Function

基本写法

返回参数

可选参数

默认参数

剩余参数

void

枚举

数字枚举

字符串枚举

接口

类

定义 TS（可跳过）

常见错误（可跳过）

TS 定义中 String 和 string 的区别

编程题（必做）

函数、枚举、接口、数组考察

类、基础算法考察