TypeScript 入门（基本使用）二

最新推荐文章于 2024-08-27 16:58:03 发布

失う.

最新推荐文章于 2024-08-27 16:58:03 发布

阅读量143

点赞数

文章标签： typescript

本文链接：https://blog.csdn.net/weixin_49346957/article/details/118353434

版权

接着上一篇的语法，来看剩下的

函数
函数就是声明一次，但却可以调用任意多次的一段代码
可以把要实现的内容来封装起来，实现代码的复用性，提高开发效率

拓展：

让vscode自动编译（自动ts转为js文件）
在终端中输入 tsc --init
会生成一个tsconfig.json文件然后打开文件
配置
点击终端=》运行任务…=》显示所有任务=》监视ts.tsconfig.json
然后你再重新创建一个ts文件就好了

// 语法:function 函数名(){  函数体  }
function sing(){
    console.log('你好');   
}
// 调用函数  只有调用函数 函数中的代码才会执行
sing()

//练习
function aa(){
    let sum1:number=10
    let sum2:number=20
    let resulet:number=sum1+sum2
    console.log(resulet)
}
aa()
//函数传参
function sun(str:string){
    console.log(str);   
}
sun( "猪")
sun( "肥猪")
// function sing(str:string)这括号里的值就是形参，用来指定函数能接收什么数据
// sing( "猪")这括号里的值就是实参是一个具体的值用来赋值给形参

// 实参赋值要符合形参的类型要不然会报错
function fn(st:string,ss:string){
    console.log(st,ss);
}
fn( "猪","肥猪")

// 练习计算所有数组元素的和
//function getSum(num:number[]){
//    let sum:number=0
//    for(let i:number=0;i<num.length;i++){
//        sum+=num[i]
//    }
//    console.log(sum);
//}
//getSum([1,2,3,4])


//函数返回值：将函数内部计算的结果返回，以便于使用该结果参与其他计算
// 这里指定返回值是number   如果不指定返回值则默认是vido（空）
// getSum(num:number[]):number这里括号外面的number就是返回值 
//return 会终止代码运行（return后面的代码不会执行所有一般放在末尾）
//return可以单独使用意思是终止函数执行 ，必须有返回值才能使用return
function getSum(num:number[]):number{
    let sum:number=0
    for(let i:number=0;i<num.length;i++){
        sum+=num[i]
    }
    console.log(sum);
    return sum
}
// 接收打印结果
let ress:number= getSum([1,2,3,4])+getSum([1,2,3])
console.log(ress);

// 练习返回两个值中的最大的值
function getMax(num1:number,num2:number):number{
    return num1>num2?num1:num2
}
console.log(getMax(1,2));
console.log(getMax(4,2));

// 函数重载
function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(str:any):any{
    if(typeof str==='string'){
        //如果是字符串就返回name
        return str
    }else{
        // 否则返回的是age
        return str
    }
}
console.log(getInfo(12))

变量

// 变量作用域
// 变量作用域指的是代码中定义变量的区域，他决定了变量的使用方范围
// 变量分为两种 ：1.局部变量 2.全局变量
// 全局变量 在代码种的任何地方都可以使用
let nums:number=2
function ff(){
    //局部变量 ，函数内声明的变量只能在函数内使用，函数外不能使用
    let num:number=1
    console.log(num);
}

对象
是一相关属性和方法的集合，并且是无须的

// 创建一个空对象
// let obj = {}

let person={
    name:'张',
    age:18,
    // 方法  如果函数作为方法时可以省略函数名
    // 如果函数做为对象中的一个方法则叫方法
    sayHi:function(){
        console.log('我是方法');
    }
}

// 对象方法的类型注解
let p1:{
    sing:()=>void
}
p1={
    sing:function(){
        console.log('没有参数的');
    }
}
//有参数的
let p2:{
    sing:(name:string)=>void
}
p2={
    sing:function(name:string){
        console.log(name+'19岁');
    }
}
//有返回值的
let p3:{
    sing:(nae:number,na:number)=>number
}
p3={
    sing:function(nae:number,na:number){
        return nae+na
    }
}



// 接口的使用
//创建接口
interface Iuser{
    name:string
    age:number
    sayHi:()=>void
}
let a:Iuser={
    name:'张',
    age:10,
    sayHi:function(){
        console.log("aa");
    }
}
console.log(a);
//第二种
interface Iusers{
    name:string;
    ages:number;
}
function pir(name:Iusers){
    console.log(name.name);
    console.log(name.ages);
    
}
// 这种写法还可以添加接口里面没有的属性
var objs={
    sex:'12',
    ages:20,
    name:'张'
}
pir(objs)


//取值
interface Iuser{
    name:string
    age:number
    sing:()=>void
    ab:(sy:number)=>number
}
let jay:Iuser={
    name:'王',
    age:10,
    sing:function(){
        console.log('aaaa')   
    },
    ab:function(sy:number){
        console.log(sy);
        return sy
    }
}
// 取值
console.log(jay.name);
// 调用方法
jay.sing()
jay.ab(12)
//存值
jay.name='wangwang'
console.log(jay.name);

内置对象是JS/TS自带的一些基础对象，提供了TS开发时所需要的基础或必要的能力

内置对象参考文档

	MDN官网
	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

数组对象

// 添加数组 push
let Arr:string[]=['你好','我好'] 
let len:number=Arr.push('他好')
console.log(Arr);
console.log(len); //返回他的新长度

// forEach遍历数组
Arr.forEach(function(item,index){
    console.log('索引是',index);
    console.log('数组中每一元素是',item);
})
//注意：此处的回调函数是作为forEach方法的实参传入不因该指定类型注解
//回调函数中的参数可以任意定义，如果没有用到的话也可以省略
// 箭头函数的写法
Arr.forEach((item,index) => {
    console.log('索引是',index);
    console.log('数组中每一元素是',item);
});

// some方法 遍历数组，有一个满足条件就会停止循环
let sm:number[]=[1,2,4,5,5,6,6]
sm.some(function(num,index){
    // index可以省略
    console.log(num);
    if(num>3){
        return true
    }
    return false
})

// TS类型推论
// 在TS中某些没有明确指出类型的地方，类型推论会帮提供类型（有些地方类型注解可以省略不写）
// 比如 声明变量并且初始化时，决定函数返回值时
// 声明变量并初始化
// 你会发现下面两种情况是一样的 那是因为类型推论根据等号后面的值自己给你添加上指定的类型
let Ars:number=10
console.log(Ars);

let Ar=10
console.log(Ar);
// 函数返回值时
function cc(num1:number,num2:number):number{
    return num1+num2
}
console.log(cc(1,2));

function cc1(num1:number,num2:number){
    return num1+num2
}
console.log(cc1(1,2))
//推荐能省略类型就省略

在浏览器中运行ts文件

先在终端中转为js文件然后在页面中引入你转为js文件

如过你修改了ts文件想要在页面中执行的话你还要去终端再转为js文件才行
这样做的话就很繁琐所以可以监听ts文件的变化ts文件发生改变就自动转为js文件就不每次都去终端中转为js文件了
```
 命令： tsc --watch xxx.ts
```

类
先看代码看不懂的话看图片解释

class aas{
    name:string; //属性 前面省略了public关键字
    constructor(n:string){  //构造函数 实例化类的时候触发的方法
        this.name=n;
    }
    run():void{
        console.log(this.name);   
    }
}
let a=new aas('张')
a.run()

在这里插入图片描述
继承

class aas{
    name:string; //属性 前面省略了public关键字
    constructor(n:string){  //构造函数 实例化类的时候触发的方法
        this.name=n;
    }
    run():string{
        return this.name+'是我'
    }
}
// let a=new aas('张')
// a.run()
 class web extends aas{
    //  这里的参数name继承了父类(上面)的name值
        constructor(name:string){
            super(name) //初始化父类中的构造函数
        };
        //拓展自己的函数
        work(){
            console.log(this.name+'是你');
        }
 }
 let w= new web('里斯')
 w.work()//里斯是你
 console.log(w.run()); //里斯是我

修饰符

类中的修饰符
public:公有在当前类里面,子类,类外面都可以访问
protected:保护类型在当前类里面 ,子类,里面可以访问,在类外面无法访问
private :私有在当前类里面可以访问 ,子类,类外面都无法访问
如果不加修饰符默认是public公有

class aas{
    private name:string; //属性 前面省略了public关键字
    constructor(n:string){  //构造函数 实例化类的时候触发的方法
        this.name=n;
    }
    run():string{
        return this.name+'是我'
    }
}
// let a=new aas('张')
// a.run()
 class web extends aas{
    //  这里的参数name继承了父类(上面)的name值
        constructor(name:string){
            super(name) //初始化父类中的构造函数
        };
        //拓展自己的函数 自己的类
        work(){
            console.log(this.name+'是你');
        }
 }
 //在上面代码中 work(){console.log(this.name+'是你')}中的name会报错因为他不是自己的类

静态方法

 class as{
    name:string; //属性 前面省略了public关键字
    //静态属性
    static age=18
    constructor(n:string){  //构造函数 实例化类的时候触发的方法
        this.name=n;
    }
    run(){
        console.log(this.name);
    }
    // 加上static就是静态方法 静态放发不能调用类中的属性要想调用就要改成静态属性
    static pin(){
        console.log('我是静态方法'+as.age);
    }
}
let ab=new as('藏')
ab.run()
// 静态方法调用 不需要实例化就可以直接调用
as.pin()

泛型函数

// num,传入的是number就是<number>类型,传入string就是<string>类型,<>里面的值随意起,但是要和函数的类型(num[])要一致
function fn<num>(num1: any, num2: any):num[] {
    return num1+num2
  }
  console.log(fn<number>(3,2))  //3
  console.log(fn<string>('猪是你','对'))  //猪是你对
  
  //   多个泛型
function fnf<num,str>(anum: num, bstr: str):[num,str] {
    return [anum,bstr]
  }
  //返回的是一个数组
const bb=fnf<number,string>(2,'只猪')
console.log(bb);

定义泛型类

// 定义泛型类
class aab<num> {
    name: num
    age:num
    add:(x:num,y:num) =>num
  }
// number型
let bab = new aab<number>()
bab.name = 10
bab.age = 20
bab.add = function(x, y) {
    return x + y   
}
bab.add(bab.name, 22); //22
console.log(bab.add(bab.name, bab.age))  //这里面的参数传到add函数中


//泛型约束
// 有了泛型之后，一个函数或容器类能处理的类型一下子扩到了无限大，似乎有点失控的感觉。所以这里又产生了一个约束的概念。我们可以声明对类型参数进行约束
interface aa {
    length: number;
  }
  // 指定泛型约束
  function bb <T extends aa>(num: T): void {
    console.log(num.length)
  }
  bb('abcaa')//5 打印出他的长度