本文引用《vue3+typescript组件开发 typescript vue3.0》，仅以作自己工作查阅使用
基础类型
字符串类型 string
// 普通字符串
let name = ref<string>("jeasu");
// 带变量的字符串
let msg = ref<string>(`my name is ${name.value}`);
// 拼接的字符串
let sentence = ref<string>("Hello, my name is " + name + ".\n\n" + "I'll be " + (age + 1) + " years old next month.");布尔类型 boolean
// 布尔类型
let isAdult = ref<boolean>(false);数字类型 number
// 数值类型
let age = ref<number>(17);任意值类型 any
如果是一个普通类型，在赋值过程中改变类型是不被允许的，任意值（Any）用来表示允许赋值为任意类型。
let a1 = ref<string>('seven');
a1 = 7; // error
// 但如果是 any 类型，则允许被赋值为任意类型。
let sim = ref<any>("seven");
sim = 7;
console.log(sim, "任意类型"); // 7
// 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型
let a3;
a3 = 'seven';
a3 = 7;
// 相当于
let a3:any;
a3 = 'seven';
a3 = 7;
// any 定义多元数组
let arr = reactive<any[]>([1, true, "hellow"]);
arr[1] = 100;
console.log(arr, "any定义多元数组"); // [1, 100, 'hellow']枚举类型 enum
//枚举类型
enum Color {red,blue,green}
// 取索引
let c11 = ref<Color>(Color.blue); // 1
// 取内容
let c21 = ref<string>(Color[2]); // green
// 枚举默认值，默认值可以为小数
enum Color2 {red = 1.5,blue = 10,green = 20}
let c111 = ref<Color2>(Color2.blue); // 10
let c222 = ref<string>(Color2[10]); // blue 根据默认值取对应内容
// 由此可见：
enum Color {red,blue,green} // => {red=0, blue=1, green=2}
// 若是只有一个添加默认值如下
enum Color3 {red,blue = 5,green}
let c333 = ref<Color3>(Color3.red); // 0 未加默认值，默认从 0 开始
let c444 = ref<Color3>(Color3.blue); // 5 // 默认值 5
let c555 = ref<Color3>(Color3.green); // 6 // 从默认值开始 +1
let c666 = ref<string>(Color3[6]); // green
// 取内容，根据默认值
let c555: string = Color3[6]; // green
// 任意值，任意值后面不能加别的类型（未赋予默认值）
enum Color4 {
red,
blue = 5,
green = <any>"abccc",
// green = <any>4, // 4
// green = <any>true, // true
// yellow, // undefined
yellow = "BALUE".length,
}
let c777 = ref<Color4>(Color4.blue); // 5
let c888 = ref<Color4>(Color4.green); // abccc
let c999 = ref<Color4>(Color4.yellow); // 5
let c100 = ref<string>(Color4[<any>"abccc"]); // green数组类型 array
// 第一种方式：元素类型后面加上[ ]
let list1 = ref<number[]>([1, 2, 3]);
let list2 = ref<string[]>(["1", "2", "a"]);
let list3 = ref<any[]>([1, true, 'abc', {id:2}])
// 第二种方式是使用数组泛型，Array<元素类型>：
let hobbies = ref<Array<string>>(["历史", "地理", "生物"]);
let list4 = ref<Array<number | string>>(['dasahk', 10])联合类型
一个变量定义可能的多种类型
// 联合类型
let collection1 = ref<number | string | boolean>(6);
let collection2 = ref<number | string | boolean>("good");
let collection3 = ref<number | string | boolean>(true);
// 联合类型数组
let collection4 = ref<(number | string | boolean)[]>(["hasd", true, 36]);
// 联合类型的注意点：对联合类型的数据的操作
// const fn = (str: string | number): number => {
// return str.length; // 红波浪线报错，原因是 number 没有 length 属性
// };
// fn("hello");元组类型 Tuple
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同，且数组各项类型与定义一一对应。元组的长度和类型不可变：
let arr1 = ref<[number, string]>([8, "haode"]);
// let arr1 = ref<[number, string]>(["haode", 10]); // ERRORVoid 类型
它表示没有任何类型
// 声明一个 void 类型的变量没什么大用，只能赋予 undefined 和 null 两种值
let unusable: void = undefined;
// 但是我们通常在定义函数的时候用它，当一个函数没有返回值时，你通常会见到其返回值类型是 void
const warnUser =(x:number,y:number): void=> {
console.log("This is my warning message");
if (x > y) {
console.log("x>y");
} else {
console.log("x<y");
}
}Null 和 Undefined
默认情况下 Null 和 Undefined 是所有类型的子类型。 就是说你可以把 Null 和 Undefined 赋值给 number 类型的变量
// undefind 类型
let u: undefined = undefined;
// null 类型
let n: null = null;Never 类型
表示永远不会存在值的类型，常用来定义抛出异常或根本就不会有返回值的函数
never 类型是任何类型的子类型，也可以赋值给任何类型；没有类型是 never 的子类型或者可以赋值给类型（除了 never 本身）
never 和 void 之间的区别是void 意味着至少要返回一个 undefined 或者 null ，而 never 意味着不会正常执行到 函数的终点
// 返回 never 的函数必须存在无法达到的终点
const error = (message: string): never => {
throw new Error(message);
};
const infiniteLoop = (): never=> {
while (true) { }
}
// 推断的返回值类型为 never
const fail = ()=> {
return error("Something failed");
}Object 类型
object 表示非原始类型，也就是除 number，string，boolean，symbol,null 或者 undefined 之外的类型，使用 object 类型，就可以更好的表示想 Object.create 这样的 API
const create = (o: object | null): void => {};
create({ prop: 0 }); // OK
create(null); // OK
// create(42); // Error
// create("string"); // Error
// create(false); // Error
// create(undefined); // Error类型断言
类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用
// 类型断言有两种形式。 其一是“尖括号”语法：
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 另一个为 as 语法：
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;类型别名 type
type abc = string | number[];
type n = number;
let n1: abc;
n1 = "4";
n1 = [1];
const fn1 = (str: abc): n => {
return str.length;
};
fn1("a");对象类型（引入概念：接口 Interfaces）
在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象。接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述
注意：顺序可以乱，但是定义的对象要受到接口的约束
// 定义对象属性
interface defineObj {
readonly name: string; // 只读属性
age: number; // 必填
sex?: string; // 选填
call(): string; // 有返回值，类型为 string
action(): void; // 必填、无返回值
[propName: string]: any; //任意属性
// 需要注意的是，一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性
}
const obj = reactive<defineObj>({
name: "abc", // 只读，不可修改
age: 18, // sex: '男',
a: "a",
b: 9,
c: true,
call: () => "call",
action: function () {
console.log("void 接口");
},
o: { id: 1 },
});
console.log(obj.call()); // call
obj.action(); // void 接口
return {
obj,
};函数类型
函数类型的定义有两点：参数类型、返回值类型
// 有返回值
const f1 = (x: number, y: number): number => {
return x + y;
};
console.log(f1(1, 3)); // 4
// 无返回值
const f2 = (n1: number, n2: number): void => {
if (n1 > n2) {
// 处理逻辑
console.log(n1 + ">" + n2);
} else {
// 处理逻辑
console.log(n1 + "<" + n2);
}
};
f2(9, 7); //9>7
// 有返回值,比较数据
const f3 = (n1: number, n2: number): boolean => {
if (n1 > n2) {
return true;
} else {
return false;
}
};
console.log(f3(1, 2)); // false
// 组合数据
const f4 = (n1: string, n2: string): string[] => {
return [n1, n2];
};
console.log(f4("a", "b")); // ['a','b']
// 数据判断校验
const f5 = (s1: string, s2: string): boolean => {
let i = s1.search(s2);
return i > -1;
};
console.log(f5("abc", "a")); // true
// 函数默认值
const f6 = (x: number = 1, y: number = 2): number => {
return x + y;
};
console.log(f6()); //3
// 可选参数,y 可以传，也可以不传，可选参数后面是不允许出现必填参数，只能放在最后
const f7 = (x: number = 1, y?: number, z?: number): number => {
// return x + y; // 报错，y 为可选参数，不能加减或拼接
return x + (y! ?? 0) + (z! ?? 0);
};
console.log(f7()); // 1接口 Interfaces
接口在函数中的运用
当传入的参数是对象类型的时候：
// 不用接口定义时
const fn = (obj: { id: number; name: string }): string => {
return obj.name;
};
const oh = reactive({ id: 3, name: "jeasu" });
console.log(fn(oh)); // jeasu
// 仅对函数入参做约束
interface params {
id: number;
name: string;
age: number;
}
const fn1 = (o: params): number => {
return o.age;
};
const oh1 = reactive({ id: 3, name: "jeasu", age: 18 });
console.log(fn1(oh1)); // 18
// 对整个函数的类型检查，建议对返回值类型也要定义
iinterface SearchFun {
(a: string, b: string): boolean;
}
const fn2: SearchFun = (s1, s2) => {
let i = s1.search(s2);
return i !== -1;
// return s1;
};
console.log(fn2("dsdahjk", "jk")); // true接口继承接口
// 二维坐标接口
interface TwoDPoint{
x: number,
y: number
}
// 三维坐标中的 z 坐标接口
interface ThreeDPoint{
z: number
}
// 四维坐标接口继承了二维坐标接口的 x，y 坐标和三维接口的z坐标
interface FourDPoint extends ThreeDPoint, TwoDPoint{
// 内还定义了四维坐标独有的时间坐标
time: Date
}
// 实例化四维坐标接口
const poi2 = reactive<FourDPoint>({
z: 100,
x: 200,
y: 300,
time: new Date(),
});
console.log(poi2, "poi2"); // Proxy 对象{{z: 100,x: 200,y: 300,time: Mon Oct 11 2021 15:29:15 GMT+0800 (中国标准时间)}}泛型 Generics
补充理解：《TS中的泛型》
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性
写法是 <变量类型>
泛型的产生条件：定义相同结构的函数时，如下
// 如果根据业务需要传入不同类型的数据，就需要一个类型一个类型的写
// 这样容易造成代码冗余
function fnn(x:number,y:number):number[]{
return [x,y]
}
function fnn(x:string,y:string):string[]{
return [x,y]
}
function fnn(x:boolean,y:boolean):boolean[]{
return [x,y]
}因此我们可以将类型用一个变量替代，在使用的时候，将变量类型传过去
泛型变量
泛型变量 T ，T 表示任何类型,也可以用其他字母代替
因此我们上面的代码可以写成
// 函数声明方式
function declaration<T>(x: T, y: T): T[] {
return [x, y];
}
// 函数表达式方式
const expression = <T>(n1: T, n2: T): T[] => {
return [n1, n2];
};
// 单类型
console.log(declaration<string>("1", "2")); // ['1', '2']
console.log(expression<boolean>(true, false)); // [true, false]
console.log(expression<number>(6, 7)); // [6, 7]
// 联合类型
console.log(expression<number | string>(6, "a")); // [6, "a"]
// 当我们不给传类型的时候，类型推断编译器会自动的帮我们判断传入的是什么类型，此时传入的数据只能为单一类型
console.log(expression(1, 23)); // [1, 23]
// 泛型的约束
// 错误示范 求变量的长度
// let variable1 = <T>(str: T): number => {
// return str.length; // T是变量，未指定类型，未必会有 length 这个属性
// };
// 修改：
// 给参数限制类型
let limit1 = <T>(str: string | T[]): number => {
return str.length;
};
console.log(limit1<number>([1, 3])); // 2
// 或者给泛型变量添加约束 extends
let limit2 = <T extends String>(arr: T): number => {
return arr.length;
};
console.log(limit2<string>("one")); // 3
// 泛型的接口约束：就是让这个变量必须有 length 属性,此时就限定了变量类型有 length 属性，只能为 string ，或者数组类型
interface ILengthNum {
length: number;
}
const limit3 = <T extends ILengthNum>(str: T): number => {
return str.length;
};
console.log(limit3<string>("oneworld")); // 8
console.log(limit3<string[]>(["dasjd", "dhksah", "dahskdha"])); // 3
console.log(limit3<number[]>([12, 456, 79, 465])); // 4
// 多个类型参数
const multi = <N, S>(sum: [N, S]): [S, N] => {
return [sum[1], sum[0]]; // 实现的是交换数组内两项的位置
};
console.log(multi<number, string>([1, "one"])); // ["one", 1]泛型接口
// 泛型接口
interface genface1 {
<T>(a: T, b: T): boolean;
}
const func1: genface1 = (x, y) => {
return x == y;
};
console.log(func1<number>(1111, 5)); // false
console.log(func1<string>("abc", "abc")); // true
// 另一种 把泛型参数提前放在接口名上
interface genface2<T> {
(a: T, b: T): boolean;
}
const func2: genface2<number> = (x, y) => {
return x == y;
};
console.log(func2(7, 5)); // false
// 另一种写法,先定义类型，再赋值函数
let func3: genface2<string>;
func3 = (x, y) => {
return x == y;
};
console.log(func3("abc", "abc")); // true
// 多类型泛型接口
interface createA3<N, T> {
(a: N, b: T): Array<T>;
}
let func4: createA3<number, string>;
func4 = function (i, s) {
let arr: string[] = [];
arr[i] = s;
return arr;
};
func4(1, "dqwy");
// 泛型约束
interface Length4 {
length: number;
}
interface createA4<N, T extends Length4> {
(a: N, b: T): string;
}
let func5: createA4<number, string>;
func5 = function (i, s) {
// var arr:string[] = []
// return arr
return s;
};
func5(2, "dqwy");用泛型变量和 any 的区别
// 使用泛型变量 T
function fun6<T>(x: T, y: T): T[] {
return [x, y];
}
fun6<string>("a", "b");
// 使用 any：缺点就是传入的类型和返回的类型不确定
function fun7(x: any, y: any): any[] {
return [x, y];
}
fun7("a", "b");Class类
ES5:构造函数方式
传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的
function Cat(name,color){
this.name = name;
this.color = color;
}
Cat.prototype.type = '动物'；
Cat.prototype.eat = function(){
console.log('吃')；
}
var c1 = new Cat('tom', 'blue')ES6:Class 类定义
从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员将能够使用基于类的面向对象的方式
class Cat1 {
name: string;
color: string; // 属性
constructor(name: string, color: string) {
// 构造函数
this.name = name;
this.color = color;
}
eat() {
// 方法
console.log("吃");
}
}
const cat1 = new Cat1("tom", "blue");
console.log(cat1.name); // tom
console.log(cat1.color); // blue
cat1.eat(); // 吃类的继承
class Animal {
type: string;
constructor(type: string) {
this.type = type;
}
eat() {
return "吃";
}
say() {
return "叫";
}
}
class Dog extends Animal {
name: string;
age: number; // 属性
constructor(type: string, name: string, age: number) {
// 构造函数
// Animal.prototype.constructor.call(this)
super(type); // 继承父类的属性和方法
this.name = name;
this.age = age;
}
action() {
console.log("hsgdajsd");
}
}
// 实例化
let d = new Dog("犬", "tom", 2);
console.log(d.type); // 犬
console.log(d.name); // tom
console.log(d.age); // 2
// d.eat();
// d.say();
d.action(); // hsgdajsd修饰符
static 静态方法
不需要通过实例化处理，可以直接通过类来调用
class Obj {
static str: string = "abc";
// constructor可以不写，因为上面已经给变量赋值
// constructor(str){
// this.str = str;
// };
static action() {
console.log("static 静态方法");
}
}
// 不需要实例化，直接调用Obj
console.log(Obj.str); // abc
Obj.action(); // static 静态方法public 修饰公共属性或方法
public 修饰的属性或方法都是共有的，可以在任何地方被访问到，默认所有属性和方法都是public。用下面的方式来重写 Cat2
class Cat2 {
public name: string;
public color: string; // 属性
public constructor(name: string, color: string) {
// 构造函数
this.name = name;
this.color = color;
}
public action() {
console.log("public 修饰公共属性或方法");
}
}
// 实例化对象再取值、调用
let cat2 = new Cat2("John", "white");
console.log(cat2.name); // John
console.log(cat2.color); // white
cat2.action(); // public 修饰公共属性或方法private 修饰私有属性或方法
修饰的属性或方法是私有的，不能在声明它的类外部访问。我们将上例中的 action 方法修饰符改为 private
class Cat3 {
public name: string;
private color: string; // 属性
public constructor(name: string, color: string) {
// 构造函数
this.name = name;
this.color = color;
}
private action() {
console.log("private 修饰私有属性或方法");
console.log(this.name); // jack ，在内部能访问到该类中的属性
}
}
// 实例化对象再取值、调用
let cat3 = new Cat3("jack", "black");
console.log(cat3.name); //jack
// 下面能打印值，但是有红波浪线报错
// console.log(cat3.color); // 报错，说明访问不到 private 修饰的属性
// cat3.action(); // 报错，说明访问不到 private 修饰的方法protected 修饰受保护的属性或方法
修饰的属性或方法是受保护的，它和private类似，区别是它在子类中也是允许被访问的。我们将上例中的 action 方法修饰符改为 protected
class Cat4 {
protected name: string;
protected color: string; // 属性
public constructor(name: string, color: string) {
// 构造函数
this.name = name;
this.color = color;
}
protected action() {
console.log("protected 修饰受保护的属性或方法");
}
}
// 实例化对象再取值、调用
let cat4 = new Cat4("tom", "yellow");
// 能打印出来，但是页面书写红波浪报错
// console.log(cat4.name); // 说明访问不到 protected 修饰的变量
// console.log(cat4.color); // 说明访问不到 protected 修饰的变量
// cat4.action(); // 说明访问不到 private 修饰的方法
// 创建一个子类继承Cat3
class littleCat extends Cat4 {
constructor(name: string, color: string) {
super(name, color);
this.name = name;
this.color = color;
}
say() {
// return this.name // tom 可以访问父类里面 protected 修饰的属性
console.log(this.name);
console.log(this.color);
return this.action();
}
}
const dog2 = new littleCat("tom", "hua");
dog2.say(); // tom // hua // protected 修饰受保护的属性或方法类实现接口 implements实现
接口和类的区别
接口，对属性和方法类型的约束，抽象的约束
interface ObjType{
name:string;
action():string;
}类，对属性和方法的定义，具体的内容
class Obj5{
name:string;
constructor(name){
this.name = name
}
action(){console.log('执行')}
}回顾之前的接口定义对象：
interface ObjType{
name:string;
action():string;
}
let o6:ObjType = { // 强制指定类型，添加或减少属性或方法会报错
name:'abc',
action(){return '123'}
}类 实现 接口 (implements 实现)
interface ClassType {
name: string;
action(): void;
}
class Obj implements ClassType {
// 类Obj受到接口ClassType的约束
// 类中的属性和方法要受到接口的约束，但是添加属性或方法不会报错
// 属性和方法只能比接口里定义的多，不能少
name: string;
age: number; // 新增属性，接口里未定义
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
action() {
console.log("执行");
}
a() {
return "sah";
} // 新增方法，接口未定义
}
const obj1 = new Obj("hahaha", 18);
console.log(obj1.name); // hahaha
console.log(obj1.age); // 18
console.log(obj1.a()); // sah
obj1.action(); // 执行不同类实现同一个接口
不同类之间有共同的特性，我们把这个特性提出来，就可以定义成一个接口，然后不同类中再去用 implements 去实现这个接口：
// 警报功能
interface Alam {
name: string;
ring(): void;
}
// 公共类 门
class Door implements Alam {
name: string;
constructor(name: string) {
this.name = name;
}
ring() {
console.log("我是门这个类");
}
}
const door = new Door("door");
door.ring(); // 我是门这个类
// 门的子类防盗门 拥有报警功能
class SecurityDoor extends Door implements Alam {
// 里面不写任何东西，完全继承父类
// 若添加，则属性和方法是这个子类自己的
price: number;
constructor(name: string, price: number) {
super(name);
this.name = name;
this.price = price;
}
ring() {
console.log("我是安全门，门的一个字类");
}
}
const securityDoor = new SecurityDoor("door", 2889);
console.log(securityDoor.price); // 2889
securityDoor.ring(); // 我是安全门，门的一个字类
// 车 这个类 拥有报警功能
class Car implements Alam {
name: string;
constructor(name: string) {
this.name = name;
}
ring() {
console.log("我是车这个类");
}
}
const car = new Car("door");
car.ring(); // 我是车这个类一个类实现多个接口
// 警报功能
interface Alam1 {
ring(): void;
}
// 开灯关灯
interface Light {
lightOn(): boolean;
lightOff(): boolean;
}
// 车实现这两个功能
class Car1 implements Alam1, Light {
// 用逗号链接接口名
ring() {
console.log("车的报警功能");
}
lightOn() {
return true;
}
lightOff() {
return false;
}
a() {} // 只能多不能少
}
const car1 = new Car1();
car1.ring(); // 车的报警功能
console.log(car1.lightOn()); // true
console.log(car1.lightOff()); // false接口继承类
// 定义了一个 Bird 类
class Control {
private state: any; // state 是 Control 的私有属性，只能在 Control 中访问该变量
constructor(state: any) {
this.state = state;
}
print() {
console.log("这是 Control 类的打印操作");
console.log(this.state, "打印 Control 的私有属性 state");
}
}
const control = new Control(false);
control.print();
interface SelectableControl extends Control {
select(): void;
}
class Button extends Control implements SelectableControl {
// state: any;
name: string;
constructor(name: string, state: any) {
super(state);
this.name = name;
}
select() {
console.log("这是 Button 类的操作");
// console.log(this.state); // Control 中 state 修饰符改为 protected 这个才对
}
}
const button = new Button("button", true);
console.log(button); // button 中有 state，但是无法访问 state
// console.log(button.state); //Control 中 state 修饰符改为 public 这个才对
button.select();
class TextBox extends Control {
constructor(state: any) {
super(state);
}
select() {
console.log("这是 textbox 的 select");
}
}
const textbox = new TextBox("true");
textbox.select(); // 这是 textbox 的 select泛型在类中的运用
class A2<T> {
n: T;
constructor(num: T) {
this.n = num;
}
add(x: T): T {
return x;
}
}
var a2 = new A2<number>(1);
console.log(a2.n); // 1
console.log(a2.add(3)); // 3
There is something in this. Now everything became clear to me, Thank you very much for the information.