ts 之 变量核数据类型（ 简单数据类型、any、unKnown类型 ）

ts 之 变量核数据类型

ts类型包含关系图 ( unknow,any为最顶层 )

定义ts的类型

• let num:String | Number = 10` 或

01：ts定义简单数据类型

app.ts

// 01 简单数据类型
let strName: string = "我是ts定义的";
console.log("strName", strName);

let num: number = 10;
console.log("num", num);

let flag: boolean = true;
console.log("flag", flag);

let underF: undefined = undefined;
console.log("underF", underF);

let nul: null = null;
console.log("null", null);

Test.vue

import { reactive, toRefs, ref, Ref } from "vue";
// 01 简单数据类型
let strName = ref<string>("我是ts定义的"); // 推荐使用
let strName2: Ref<string | number> = ref("我是ts定义的");
console.log("strName", strName.value, "strName2", strName2.value);

let num = ref<number>(0); // 推荐使用
console.log("num", num.value);

let flag = ref<boolean>(true);
console.log("flag", flag.value);

let underF = ref<undefined>(undefined);
console.log("underF", underF?.value);

let nul = ref<null>(null);
console.log("nul", nul?.value);

02：any 任意类型

app.ts

// 02定义任意类型 any类型 可以是任何类型
let str: any = "111";
str = 10;
console.log("str", str);

// 02定义任意类型 unknown类型 未知的类型
let str2: unknown = { a: "11" };
console.log("str2", str2.a); // 注意点：unknown不能去调用属性 与方法 因此报错 “str2”的类型为“未知”

.vue

// 02定义任意类型 any类型 可以是任何类型
let str = ref<any>("111");
let arr = reactive<any[]>([1, "22", true]);
str.value = 10;
arr[0] = "ppp";
console.log("str", str.value, "arr", arr); // str 10 arr {0: 'ppp', 1: '22', 2: true}

// 02定义任意类型 unknown类型 未知的类型
let obj: unknown = reactive({ a: "11" });
console.log("obj", obj.a); // 注意点：unknown不能去调用属性 与方法 因此报错 “str2”的类型为“未知”

03 对象 object Object {}

app.ts

let obj1: Object = 12;
let obj2: Object = "12";
let obj3: Object = true;
let obj4: Object = [12];
let obj5: Object = { a: 12 };

let aa: object = aa; // 错误 原始类型 （ string,number等不得行）
let aa1: object = { a: 11 }; // 引用类型 可以

let aaa: {} = 11; // => new Object 类型Object
let aaa1: {} = { a: 1 }; // => new Object 类型Object
aaa1.a = 10; // 注意点 字面量类型 无法被修改

04：定义数组

• 定义数组元素为 全Number 或 String 或者 any（任意类型）

04-1 app.ts

// 定义数组
let arr: number[] = [1, 2, 3];
let arr2: string[] = ["1", "2", "3"];
let arr3: Array<string> = ["1", "2", "3"];
let arr4: Array<any> = ["a", 10, { a: 10 }];

// 定义对象item的 数组
interface XXX {
  name: string;
  age: number;
}
let Arr: XXX[] = [{ name: "xx", age: 10 }];

// 定义二维数组 number[][] | 泛型
let Arr2: number[][] = [[1], [2]];
let Arr3: Array<Array<number>> = [[1], [2]];
// 大杂烩数组 | 元组
let Arr4: any[] = [1, "a", { a: 10 }];
let Arr5: [number, string, object] = [1, "a", { a: 10 }];

// 数组之函数
function aa(...args: any[]) {
  console.log("args", args);
} // args [ 1, 2, 3 ]
aa(1, 2, 3);

04-2 .vue

// 定义数组
let arr = reactive<number[]>([1, 2, 3]);
let arr2 = reactive<string[]>(["1", "2", "3"]);
let arr3 = reactive<any[]>(["1", 3, true]);
console.log("arr", arr, arr2, arr3);

// 定义对象item的 数组
interface XXX {
  name: string;
  age: number;
}
let Arr = reactive<XXX[]>([{ name: "xx", age: 10 }]);
console.log("Arr", Arr); // Arr [ {name: 'xx', age: 10}]

// 定义二维数组 number[][] | 泛型
let Arr2 = reactive<number[][]>([[1], [2]]);
let Arr3: Array<Array<number>> = [[1], [2]];
console.log("Arr2", Arr2, Arr3);

// 大杂烩数组 | 元组
let Arr4: any[] = [1, "a", { a: 10 }];
let Arr5: [number, string, object] = [1, "a", { a: 10 }];
console.log("Arr4", Arr4, Arr5);

// 数组之函数
function aa(...args: any[]) {
  console.log("args", args);
} // args [ 1, 2, 3 ]
aa(1, 2, 3);

05：定义元组

// 元组
let arr: [number, string] = [1, "aa"];
const arr2: readonly [number, string] = [1, "aa"];
// arr2.push(1) // 由于arr2 设置了只读，无法进行修改

06：定义枚举 （ 对象之中的key和value 可以用于常量的遍历啥 ）

// 枚举类型 enmu
// 使用对象的匹配 一项的数据 默认 0开始 依次+1
enum Gender {
  Boy,
  Girl,
  UnKnowm,
}
console.log("Gender", Gender.Boy, Gender.Girl, Gender.UnKnowm); // Gender 0 1 2

enum Gender2 {
  Boy = 1,
  Girl = 4,
  UnKnowm = 6,
}
console.log("Gender2", Gender2.Boy, Gender2.Girl, Gender2.UnKnowm); // Gender 1 4 6

// 接口枚举
interface A {
  Boy: Gender2.Boy;
}
let obj: A = {
  // Boy: Gender2.Girl, // 报错
  // Boy: 111, // 不报错？
  Boy: 1, //  Boy: 1, || Boy: Gender2.Boy
};

// if逻辑判断 可使用枚举
const enum Type {
  success,
  fail,
}
let code: number = 0;
if (code === Type.success) {
  console.log("是success");
} else if (code === Type.fail) {
  console.log("是fail");
}
// 结果 是success

// 反向映射 key => value ; value => key
enum TypeCode {
  success,
  fail,
}
let success: number = TypeCode.success;
let successKey: string = TypeCode[success];
let fail: number = TypeCode.fail;
let failKey: string = TypeCode[fail];

console.log("success", success, "successKey", successKey); // success 0 successKey success
console.log("fail", fail, "failKey", failKey); // fail 1 failKey fai

07：never 不存在的值类型 用于抛出异常 或者死循环 或者switch下的default兜底逻辑

ts之 类型推断、联合类型、交叉类型

01：或类型 与 联合类型

// .ts
let phone: number | string = 12333;
phone = "222";
console.log('phone',phone); // phone 222
// .vue
let phone = ref<number|string>(12333) ;
phone.value = "222";
console.log("phone", phone.value); // phone 222

// .ts | .vue
// 联合类型
interface People {
  name: string;
  age: number;
}
interface Man {
  sex: number;
}
const xzl = (man: People & Man): string => {
  return man.name + "-" + man.age + "-" + man.sex;
};
let res = xzl({ name: "xzl", age: 20, sex: 0 });
console.log('res',res); // res xzl-20-0

02：类型断言

// 类型断言
let fn = function (num: number | string): string {
  return (num as string).length + "_";
};

let res = fn("111222");
console.log("res", res); // 6_
let res2 = fn(111222);
console.log("res2", res2); // undefined_

interface A {
  run: string;
}
interface B {
  build: string;
}
let fn2 = (type: A | B): void => {
  console.log("参数", (type as A).run); // 参数 dev
  // console.log("参数", (<A>type).run);
};
fn2({ run: "dev" });

03：类型推论与类型别名

• 类型推论
  • 鼠标放在数组 arr 上面可以显示对于的ts类型，直接拿到做限制即可
  • 

04：类型别名 - type

type S = string | number;

let str: S = true == true ? "true" : 0;
console.log("str", str);

type S2 = {
  name: string;
  age?: number;
};
let man: S2[] = [
  {
    name: "ppp",
    age: 10,
  },
  {
    name: "ooo",
  },
];

type F = (type: string) => void;
let Fn: F = (type: string) => {
  console.log(type);
};
Fn("测试"); // 测试

//extends 包含的意思 => 判断 1 是否在number类型内
type num = 1 extends number ? 1 : 0; // type num = 1

ts - 接口 - 定义对象类型

• 接口: 是对象的状态(属性)和行为(方法)的抽象(描述)
  • 接口类型的对象
    • 多了或者少了属性是不允许的
    • 可选属性: ?
    • 只读属性: readonly

01：接口 的 只读、可选类型

app.ts

// 定义一个接口
interface Person {
  readonly id: number;
  name: string;
  age: number;
  sex?: string;
}

const person: Person = {
  id: 0,
  name: "1",
  age: 20,
};
const person2: Person = {
  id: 0,
  name: "1",
  age: 20,
  sex: "男",
};
// person.id = 100 // 报错 无法分配到 "id" ，因为它是只读属性。ts(2540)
console.log("person", person, person2); 
// person { id: 0, name: '1', age: 20 } { id: 0, name: '1', age: 20, sex: '男' }

.vue

// 定义一个接口
interface Person {
  readonly id: number;
  name: string;
  age: number;
  sex?: string;
}

const person: Person = reactive({
  id: 0,
  name: "1",
  age: 20,
});
const person2: Person = reactive({
  id: 0,
  name: "1",
  age: 20,
  sex: "男",
});
// person.id = 100 // 报错 无法分配到 "id" ，因为它是只读属性。ts(2540)
console.log("person", person, person2);
// person { id: 0, name: '1', age: 20 } { id: 0, name: '1', age: 20, sex: '男' }

02：接口 的 索引签名 （ 可以定义未知的参数的类型 以及 定义参数为函数方式 ）

app.ts | .vue

// 定义一个接口
interface Person {
  name: string;
  age: number;
  [propName: string]: any; // 索引签名 可以定义未知的其他属性
  readonly cb: () => boolean;
}

const person: Person = {
  name: "1",
  age: 20,
  ccc: true,
  ddd: 10,
  cb: () => {
    return true;
  },
};
console.log("person", person);
// person { name: '1', age: 20, ccc: true, ddd: 10 }

03：接口的 函数类型

interface SearchFunc {
  // source、subString 为参数 boolean为当前接口的返回值
  (source: string, subString: string): boolean
}
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
  return source.search(sub) > -1
}

console.log(mySearch('abcd', 'bc')) // true
console.log(mySearch('abcd', 'ba')) // flase

04：类接口

interface Run {
  run(): any
}
interface Rap {
  rap(): any
}

// ypeScript 也能够用它来明确的强制一个类去符合 某种契约
class person implements Run, Rap {
  // 也就是 person 类 implements 使用了 Run接口，需要满足当前Run接口的限制
  run() {
    console.log('我会跑')
  }
  rap() {
    console.log('我会rap')
  }
}
const p1 = new person()
p1.run() // 我会跑
p1.rap() // 我会rap

06：接口 - 继承与定义

interface Run {
  run(): any
}
interface Rap {
  rap(): any
}

// allAkun 接口 使用 extends 继承了另外的接口
interface allAkun extends Run, Rap {
  ikun(): any
}

// person类 使用了 allAkun接口
class person implements allAkun {
  ikun() {
    console.log('ikun')
  }
  run() {
    console.log('我会跑')
  }
  rap() {
    console.log('我会rap')
  }
}
const p1 = new person()
p1.run() // 我会跑
p1.rap() // 我会rap
p1.ikun() // ikun

ts函数篇

01：函数没有返回值 定义函数 （有返回值 与 没有返回值）

void 函数没有返回值 定义函数 （有返回值 与 没有返回值）

// 定义函数
function fun1():string{ // 返回值为 string 类型
  return "我是菜鸡"
}
console.log("fun1",fun1()); // fun1 我是菜鸡

function fun2():Number{ // 返回值为 Number 类型
  return 100
}
console.log("fun2",fun2()); // fun2 100 

function fun3():void{ // 无返回值
 console.log("无返回值"); // 无返回值
 
}
console.log("fun3",fun3()); // fun3 undefined

02：形参 与 实参

function fun1(arg1:Number,arg2:String):String {
  let res:String = "";
  res = arg1 + "" + arg2;
  return res
}
console.log("fun1",fun1(1,"001")); // fun1 1001

• 注意点
  

03：可选参数 （ 就是 可传 可不传 ）

function fun1(arg1:Number,arg2?:String):String {
  let res:String = "";
  res = arg1 + "" + arg2;
  return res
}
console.log("fun1",fun1(1,"001")); // fun1 1001
console.log("fun1",fun1(100)); // fun1 100undefined

默认值 （ 为函数 参数 设置默认值 ）

• 注意点：形参只要设置了默认值，那么就不需要设置 可选参数 配置了！

function fun1(arg1:Number = 1,arg2:String='01'):String {
  let res:String = "";
  res = arg1 + "" + arg2;
  return res
}
console.log("fun1",fun1(1,"001")); // fun1 1001
console.log("fun1",fun1()); // fun1 101
console.log("fun1",fun1(222)); // fun1 22201
console.log("fun1",fun1(undefined,"000")); // fun1 1000

04：剩余参数

function add(arg1:number=1 ,arg2:number=1,...arr3:Array<number>):number {
  let res:number = arg1 + arg2 ;
  for(let item of arr3){
    res += item
  }
  return res
}
console.log("add",add()); // add 2 
console.log("add",add(1,1,2,2,2)); // add 8
// 注意点 就是 add 函数之内，类型需要 定义为 number 不能定义为 Number（会报错）