typescript
1.安装、编译
安装:npm install -g typescript
查看版本:tsc -v
编译:tsc xx.ts
2.ts在vscode下快速生成js文件
a.目录文件下命令行输入tsc --init 生成tsconfig.json文件 改'outDir':'./js'
b.在vscode里点击终端->运行任务 监视tsc:watch-tsconfig.json
3.typscript变量与数据类型
// 1.字符串类型(string) let str: string = "阿成"; // 2.数值类型(number) let age: number = 16; // 3.布尔值类型(boolean) let isActive: boolean = false; // 4.undefined和null和Object let _null: null = null; let _undefined: undefined = undefined; let person: Object = { name: 'tony' }; // 5.数组(array) let books: string[] = ["简爱", "唐吉坷德"]; let price: number[] = [26, 32]; let todos: Array<number> = [15, 2]; // 使用泛型创建数组 // 6.元祖(tuple) -- 就是一个规定了元素数量和每个元素类型的'数组',元素的类型可以不相同 let _tuple: [string, number, boolean] = ["Paolo", 18, true]; // 7.枚举(enum) // 7.1创建性别枚举 enum gender1 { boy = 1, girl = 2, neutral = 3, } // gender1.boy 1 // gender1.girl 2 // gender1.neutral 3 enum gender2 { boy, girl, neutral, } // gender2.boy 1 // gender2.girl 2 // gender2.neutral 3 // 说明以上两种申明枚举的方式得出结果一样的 // 7.2使用性别枚举 let sex: gender1 = gender1.boy; // sex === gerder1.boy -> true // sex === gerder2.boy -> false // 8.任意类型(any) 一般在获取dom时使用 let dom: any = document.getElementById("dom"); // 9.void类型 表示没有类型,一般用在无返回值的函数(在ts中函数必须要制定返回值的类型) function sayHi1(): string { return "hi"; // 返回字符串类型值 } function sayHi2(): void { console.log("any"); // 没有返回值 } // 10.never类型 表示不存在的值的类型,常用作抛出异常或无线循环的函数返回类型 function loop(): never { while (true) {} } // never类型是ts中的底部类型,所有类型都是never类型的父类,所以never类型值可以赋给任意类型的变量 let never1: never = loop(); let never2: string = loop(); // 11.联合类型 表示取值可以为多种类型中的一种 let everv1: string | number | null = "str"; let everv2: string | number | null = 8; let everv3: string | number | null = null;
4.为了使代码规范、更有利于维护、增加了类型校验、写ts代码必须指定类型
1.ts 中的函数
// 1.函数 返回值 类型 function sayHi(): string { return "hi"; } let hi: string = sayHi(); // hi // 2.函数 形参 类型 function describeAge(age: number): void { console.log(`yangjun is ${age} years old`); } // 2.1 ts中实参和形参的 类型 必须一致 // 2.2 ts中实参和形参的 数量 必须一致 describeAge(22); // yangjun is 22 years old // 3.函数 可选参数 ? function sayHiCount1(who: string, count?: number): void { console.log(`${who} said ${count ? count : 2} times hi`); } sayHiCount1("yangjun"); // yangjun said 2 times hi // 4.函数 默认值 function sayHiCount2(who: string = "yangjun", count: number = 2): void { console.log(`${who} said ${count} times hi`); } sayHiCount2(); // yangjun said 2 times hi sayHiCount2("tony"); // tony said 2 times hi sayHiCount2("tony", 4); // tony said 4 times hi sayHiCount2("", 4); // yangjun said 4 times hi // 5.函数 剩余参数 function counts(x: number, y: number, ...rest: number[]): number { let total: number = rest.reduce((t: number, v: number) => { return (t += v); }, x + y); return total; } counts(1, 1); // 2 counts(1, 1, 1, 1); // 4
2.ts 中的类
// 1.类 创建对象 class video { termNo: number; channelId: number; param: Object; constructor(termNo: number, channelId: number, prama: Object = {}) { this.termNo = termNo; this.channelId = channelId; this.param = prama; } play(): void { console.log("播放"); } stop(): void { console.log("暂停"); } } const createVideo = (termNo: number, channelId: number, param: Object) => new video(termNo, channelId, param); let video1 = createVideo(1, 2, { dom: "vitem" }); // video1.play(); 播放 // video1.stop(); 暂停 // console.log(video1.channelId); 2 // console.log(video1.param.dom); vitem