TypeScript学习笔记

最新推荐文章于 2024-09-05 20:15:57 发布

lee_824

最新推荐文章于 2024-09-05 20:15:57 发布

阅读量249

点赞数

分类专栏： WEB学习

本文链接：https://blog.csdn.net/lee_goi/article/details/115668624

版权

WEB学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、Typescript是什么

类型脚本，所以类型是很重要的，TypeScript是JavaScript类型的超集，可以编译成纯JavaScript。

但是需要给JS加上可选的类型系统，加上静态类型后，能将调试从运行期提前到编码期

二、配置

1、let和const

已经不再使用JS中的Varley，加上类型说明：

let test_1:string='Hello TypeScript!';
console.log(test_1);

联合类型

let test_2:string | number='TS';

2、解构

可以把对象和数组的元素拆分到指定变量中，方便使用

let test_3=[1,2,3,4];
let [fir,se]=test_3;
console.log(fir);
console.log(se);
let [one,...other]=test_3;
console.log(other);
let newArr=[89,...test_3,18];
console.log(newArr);

...other表示将剩余的数组展开

3、函数

// 定义函数
function greeting(firstName:string,lastName:string):string{
    return 'Hello'+' '+firstName+lastName;
}
console.log(greeting('Lee ','zhuo '));

定义函数需要注意的点：

变量名:类型

function 函数名():返回值类型{}

4、可选参数

变量名?:类型 表示的意思是，如果有这个变量，则变量类型为指定类型，如果没有就算了

// 可选参数的函数
function greeting(firstName:string,lastName?:string):string{
    if(lastName)
        return 'Hello'+' '+firstName+lastName;
    else
        return 'Hello'+' '+firstName;
}
console.log(greeting('Lee ','Zhuo '));

5、默认参数

当有默认参数时，如果不输则默认为默认参数，如果有传递实参则给出实参的值

// 默认参数
function greeting(firstName:string,lastName='ZZ'):string{
    return 'Hello'+' '+firstName+lastName;
}
console.log(greeting('Lee '));

6、剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来，在TypeScript里，你可以把所有参数收集到一个变量里

//剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个
function greeting(firstName: string, ...restName: string[]) {
  return `Hello ${firstName} ${restName.join(' ')}!`;
}
console.log(greeting('Osama', 'bin', 'Muhammad', 'bin', 'Awad', 'bin', 'Laden'));
console.log(greeting('Laden'));

7、箭头函数

//无参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting1 = () => `Hello TS!`;
console.log(greeting1());
//一个参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting2 = (name: string) => `Hello ${name}`;
console.log(greeting2('QiGe'));
//两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值
let add1 = (n1: number, n2: number) => n1 + n2;
console.log(add1(1, 2));
//两个及以上的参数，函数体代码多于一行,则必须用{}包裹，且显式给出return
let add2 = (n1: number, n2: number) => {
  let sum = n1 + n2;
  return sum;//改为sum++结果如何？
}
console.log(add2(1, 2));

8、关于类

类是生成对象过着类实例的模板，Angular宽假大量使用类

class CAR{
    name: string;
    place:string;
    constructor(name:string,place:string){
        this.name=name;
        this.place=place;
    }
    show():void{
        console.log(this.name);
        console.log(this.place);
    }
}
let mycar=new CAR("baoma","chongqing");
mycar.show();