扫码交朋友
1.typeScript（ts）的安装与运行
安装node.js
使用npm安装typeScript（以下称之为ts） npm install -g typescript
安装好以后使用命令检验以下 ：tsc -v
由于我们的ts代码 浏览器是无法解析的 需要使用ts编辑器（tsc）来讲我们的ts代码编译成js代码才能被浏览器执行
设置vscode自动编译ts
当前我们的文件是这样的
点击终端 ---> 新终端 ---> 输入tsc --init
然后会在项目目录下自动生成一个tsconfig.json的配置文件
点开我们的配置文件 找到“outDir”这个属性 把它默认的路径 ./ 改为 ./js/
当然这个路径可以随你 该路径是ts文件编译成js所在的路径
然后我们找到终端 点击运行任务
选择tsc监视-tsconfig.json
此时在我们文件中会自动生成一个js的文件夹（刚才配置的；路径）和对应ts的js文件
此时我们对比一下ts和生成的js的区别
其实就是我们正常的js代码 只不过在顶部被写入了 "use strict" 也就是js的严格模式
| 以上为ts的配置 | 下面是笔记 |
2.ts的数据类型
//ts中的数据类型
1.字符串类型（string）
2.数字类型（number）
3.布尔类型（boolean）
4.null 和undefined
5.数组类型（array）
6.元组类型（tuple）
7.枚举类型（enum）
8.任意类型（any）
9.void
10.never
//1. 定义一个字符串类型
let yourName:string = "临枫哇";
console.log(yourName);
//2.定义一个数值类型
let yourAge:number = 18;
yourAge = -18;
yourAge = 18.8;
//3.定义一个boolean类型
let bool:boolean = true;
bool=false;
// 4.undefined和null
let notData:undefined = undefined;
let nullData:null = null;
//5.定义一个数组 需要指定数组中的类型 两种声明方法
// 声明了string类型的数组 数组里面只能存入字符串
let nameArr:string[] = ['啦啦啦','嘻嘻嘻','嘿嘿嘿'];
let nameArr1:Array<string> = ['啦啦啦','嘻嘻嘻','嘿嘿嘿'];
// 声明了numbe类型的数组 数组里面只能存入字符串
let ageArr:number[] = [15.16,18];
let ageArr1:Array<number> = [15.16,18];
//6.元组本身也是一个数组 只是是规定了元素数量和元素类型
let tuples:[string,boolean,number] = ["妹子？",false,18];
// 元组赋值
tuples= ["是妹子",true,18];
//7.枚举类型 做标识使用
// 枚举项一般用英文和数字 枚举值用整数 //Ps：我使用了汉字也没报错 不加引号的那种
enum type{
success = 200,
error = 500,
warning = 406
}
console.log(type)
// console:
// {
// 200: "success"
// 406: "warning"
// 500: "error"
// error: 500
// success: 200
// warning: 406
// }
// 如果不去定义枚举值 默认枚举值为下标值
enum type1{
success,
error,
warning
}
console.log(type1)
// console:
// {
// 0: "success"
// 1: "error"
// 2: "warning"
// error: 1
// success: 0
// warning: 2
// }
// 创建一个枚举类型的变量
var curType = Type.success;
// console.log(curType);//输出 200
// 判断变量中的状态是否为成功
if (curType == Type.success) {
console.log('相等',curType)//输出 ：相等 200
}
else {
console.log(curType);
}
// 8. any类型 一般用于获取dom时使用
let div:any = document.querySelector("div");
// 9. void 代表没有类型 一般用在无返回值的函数
function fn():string {
return "啦啦啦";
}
function fn1():void {
console.log("啦啦啦");
}
//10. never 奇怪的类型 代表不存在值的类型 常用于抛出异常或者无限循环的 函数返回类型
function fn2():never{
while(true){
console.log("无限循环")
}
}
function fn3():never{
throw new Error("神tm抛出异常");
}
// 注意点 never类型是ts底部类型 所有类型都是never类型的父类 所有never类型可以给任意类型变量赋值
let abc:string = fn3();
let abcd:never = fn3();
ts中的类型推断： 如果变量声明和初始化实在同一行 则可以省略变量声明 （跟js定义一样）
假设 此时声明一个字符串类型的 ts会将lf这个变量推断为string类型的
let lf = "临枫"; //ts推断该变量为string类型的
// lf = 18;
//error! Type '18' is not assignable to type 'string'.
//如果赋值为其他类型 则会报错
联合类型
// 联合类型 为变量声明多种可能的类型
// 一下情况即 用户输入了 则为string 不输入则为null
let lfName:string|null = prompt("请输入名字（非必填项）");
1.ts的方法函数
函数必须定义返回值类型
function fn4():number{
return 18
}
function fn5():number | string{
return '哈哈哈'
}
//////// 如果没有返回值 则定义为void
function fn6():void{
console.log("你好呀 我叫赛丽亚")
}
// 如果使用变量接受函数的返回值 那么这个变量的数据类型 必须和函数返回值一样
let getFn4:number = fn4();
//////// 函数形参类型
// ！！！形参和实参的数量要一直
function fn7(name:string,age:number):void{
console.log(`我叫${name}今年${age}岁了`)
}
fn7("临枫哇",18);
function fn8(name:string,age:number):string{
return (`我叫${name}今年${age}岁了`)
}
let getFn8:string = fn8("临枫哇",18);
console.log(getFn8)
//////// 可选参数 可传可不传
function fn9(name:string,age?:string):void{
console.log(`我叫${name}今年${age}岁了`)
}
fn9("你好呀");
// 输出 ： 我叫你好呀今年undefined岁了
////////默认值
//不传任何参数 只取默认值
function fn10(name:string ="临枫啊",age:number=11):void{
console.log(`我叫${name}今年${age}岁了哇`)
}
// fn10();
// 输出 ： 我叫临枫啊今年11岁了哇
//直传部分参数 其他参数取默认
function fn11(name:string ="临枫啊",age:number=11):void{
console.log(`我叫${name}今年${age}岁了哇`)
}
// fn11("啦啦啦");
// 输出 ： 我叫啦啦啦今年11岁了哇
//跳过参数传参 设置undefined
function fn12(name:string ="临枫啊",age:number=11):void{
console.log(`我叫${name}今年${age}岁了哇`)
}
// fn12(undefined,18);
// 输出 ： 我叫临枫啊今年18岁了哇
////////剩余参数
/***
*剩余参数只能有一个
* 剩余参数只能定义维数组
* 剩余参数只能定义在形参列表的最后
*/
function fn13(name:string,age:number,...rest:any[]):void{
console.log(rest);
}
// fn13("临枫啊",18,172,30);
// 输出 ：(2) [172, 30]
// 应用求和
function fn14(n1:number,n2:number,...nn:number[]):number{
let resSum:number = n1 +n2;
nn.forEach(e => {
resSum += e
});
return resSum
}
let fn14Sum = fn14(11,22,33,44);
// console.log(fn14Sum)
// 输出 110
复习构造函数和类
ts中定义类
class People{
// ts中定义类的属性 要么要给初始值 要么constructor里面通过实参设置成员变量
// name:string = '';
// age:number = 0;
// course:string = '';
name:string;
age:number;
course:string;
constructor(name:string,age:number,course:string){
this.name = name;
this.age = age;
this.course = course;
}
eat():void{
console.log(this.name +"在吃饭")
}
study():void{
console.log(`${this.name}今年${this.age}岁了，他现在正在学习${this.course}`);
}
}
let lf1 = new People("临枫哇",18,'ts');
console.log(lf1.name);
// 打印成员name的属性 输出：临枫哇
lf1.study();
// 调用了study方法 输出：临枫哇今年18岁了，他现在正在学习ts
ts中类的继承 关键字 extends super
// ts中 类的继承
class People2{
name:string;
constructor(name:string){
this.name = name;
}
study():void{
console.log(this.name + '在学习');
}
play():string{
return `${this.name}正在玩梦三国`
}
}
let lf2 = new People2("临枫")
// lf2.study();//输出：临枫在学习
class Linfeng extends People2{
constructor(name:string){
super(name); //super关键字用于初始化父类的构造函数
}
// 如果父类和子类拥有共同的静态方法 那么按照就近原则 子类身上有 就使用子类的 子类没有就去父类身上找
play():string{
return `${this.name}正在玩逆水寒`
}
}
let lf3 = new Linfeng("临枫啊");
// alert(lf3.play()); //打印输出：临枫啊正在玩逆水寒
ts中类里面的修饰符 public：公有 protected：保护 privite：私有
// ts 中 类的修饰符
// public -------->公有 在类里面 子类 类外面 都可以访问
// protected-------->保护类型 在类里面和子类 可以访问 在类外部无法访问
// private -------->私有 在类里面可以访问 在子类 类外部都无法访问
class People3{
// 其实默认不写 就为public
public name:string;
constructor(name:string){
this.name = name;
}
}
let lf5 = new People3("临枫吼吼吼");
// console.log(lf5.name);//打印输出 ： 临枫吼吼吼
class People4{
// 其实默认不写 就为public
protected name:string;
constructor(name:string){
this.name = name;
}
}
class Linfeng1 extends People4{
constructor(name:string){
super(name)
}
lookPalyer():string{
return this.name + "正在看直播"
}
}
let lf6 = new Linfeng1("临枫咯咯咯");
// console.log(lf6.name);//报错 属性“name”受保护，只能在类“People4”及其子类中访问 不能在外部访问
// alert(lf6.lookPalyer()); //弹窗：临枫咯咯咯正在看直播
class People5{
// 其实默认不写 就为public
private name:string;
constructor(name:string){
this.name = name;
}
}
class Linfeng2 extends People5{
constructor(name:string){
super(name)
}
lookPalyer():string{
return this.name + "正在看直播"
// 还没输入 这里就直接报错 属性“name”为私有属性，只能在类“People5”中访问
}
}
评论