typeScript学习记录 (上)

作者: 小枫枫

临枫的项目经历分享给你们啦~

扫码交朋友

标签:

特别声明:文章有少部分为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

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

 

复习构造函数和类

详见  ---------->      JavaScript高级

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”中访问
    }
}
 
 
 
 
本文最后更新于2020-6-2,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏

作者: 小枫枫, 转载或复制请以 超链接形式 并注明出处 小枫枫不疯喔
原文地址: 《typeScript学习记录 (上)》 发布于2020-6-2

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏