前端开发_3.TypeScript学习与总结

系列文章目录

---

前言

学习链接
菜鸟教程_TypeScript
中文文档

一、TypeScript 简介

• TypeScript 是 JavaScript 的一个超集，支持ES6 标准。
• TypeScript 由微软开发的自由和开源的编程语言。
• TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
• TS完全兼容JS，换言之，任何的TS代码都可以直接当成JS使用。

二、TypeScript 开发环境搭建

1. 下载Node.js    64位：https://nodejs.org/
2. 全局npm安装ts npm i -g typescript
3. 创建一个demo.ts文件, 在命令行执行tsc demo.ts

三、TypeScript 基本语法

特点：

• 联合类型可以用 | 来支持多种类型 Type1|Type2|Type3
• 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

1.小小栗子

const hello : string = "Hello World!"
console.log(hello)
// 这是一个单行注释
/* 
 这是一个多行注释 
 这是一个多行注释 
 这是一个多行注释 
*/
//面向对象编程实例
class Person{
    name: string;
    age: number;
    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}
const p = new Person('孙悟空', 18);
p.sayHello();

属性存取器
对于一些不希望被任意修改的属性，可以将其设置为private
- 直接将其设置为private将导致无法再通过对象修改其中的属性
- 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
- 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法
- 示例：

class Person{
    private _name: string;
    constructor(name: string){
        this._name = name;
    }
    get name(){
        return this._name;
    }
    set name(name: string){
        this._name = name;
    }

}
const p1 = new Person('孙悟空');
console.log(p1.name); // 通过getter读取name属性
p1.name = '猪八戒'; // 通过setter修改name属性

2.基础类型

//任意类型	any	声明为 any 的变量可以赋予任意类型的值。
let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型
//...............................................................
//数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制
//...............................................................
//字符串类型	string	一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;
//...............................................................
//布尔类型	boolean	表示逻辑值：true 和 false。
let flag: boolean = true;
//...............................................................
//数组类型	声明变量为数组。
let arr: number[] = [1, 2];// 在元素类型后面加上[]
let arr: Array<number> = [1, 2];// 或者使用数组泛型
//...............................................................
//元组	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同
let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob
//...............................................................
//枚举	enum	枚举类型用于定义数值集合。
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
//...............................................................
//void	用于标识方法返回值的类型，表示该方法没有返回值
function hello(): void {
    alert("Hello Runoob");
}
//...............................................................
//null	表示对象值缺失  ;表示一个空对象引用
//undefined	用于初始化变量为一个未定义的值  ;undefined 是一个没有设置值的变量
//never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

实例

var uname:string = "Runoob";
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2
console.log("名字: "+uname)
console.log("第一个科目成绩: "+score1)
console.log("第二个科目成绩: "+score2)
console.log("总成绩: "+sum)

//类型断言（Type Assertion）
//类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。
var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)

//变量作用域
var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

3.运算符、条件语句、循环

//运算符
算术运算符
//逻辑运算符
//&&	and	(x < 10 && y > 1) 为 true
//||	or	(x==5 || y==5) 为 false
//!	not	!(x==y) 为 true
关系运算符
按位运算符
赋值运算符
三元/条件运算符
var num:number = -2 
var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
console.log(result)
字符串运算符
//类型运算符typeof 是一元运算符，返回操作数的数据类型instanceof
var num = 12 
console.log(typeof num);   //输出结果: number

//.............................................................
//条件语句
var num:number = 2 
if(num > 0) { 
    console.log(num+" 是正数") 
} else if(num < 0) { 
    console.log(num+" 是负数") 
} else { 
    console.log(num+" 不是正数也不是负数") 
}

switch(expression){
    case constant-expression  :
       statement(s);
       break; /* 可选的 */
    case constant-expression  :
       statement(s);
       break; /* 可选的 */  
    /* 您可以有任意数量的 case 语句 */
    default : /* 可选的 */
       statement(s);
}

//.............................................................
//循环
ar num:number = 5; 
var i:number; 
var factorial = 1;  
//for (var val in list) { 
    //语句 
//}
for(i = num;i>=1;i--) {
   factorial *= i;
}
console.log(factorial)
var j:any; 
var n:any = "a b c"  
for(j in n) {
    console.log(n[j])  
}
//for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等
let someArray = [1, "string", false];
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}
//TypeScript forEach 循环
let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
});
//TypeScript every 循环
let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});

//while 循环
var num:number = 5; 
var factorial:number = 1; 
while(num >=1) { 
    factorial = factorial * num; 
    num--; 
} 
console.log("5 的阶乘为："+factorial);

var i:number = 1 
while(i<=10) { 
    if (i % 5 == 0) {   
        console.log ("在 1~10 之间第一个被 5 整除的数为 : "+i) 
        break     // 找到一个后退出循环
    } 
    i++ 
}  // 输出 5 然后程序执行结束
//do...while 循环
var n:number = 10;
do { 
    console.log(n); 
    n--; 
} while(n>=0);

4.函数

// 函数定义
function greet():string { // 返回一个字符串
    return "Hello World" 
}  
function caller() { 
    var msg = greet() // 调用 greet() 函数 
    console.log(msg) 
} 
caller()// 调用函数
//默认参数
function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))
function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)
//剩余参数
function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和为：",sum) 
 } 
 addNumbers(1,2,3) 
 addNumbers(10,10,10,10,10)
 //匿名函数;参数匿名函数;匿名函数自调用;构造函数;递归函数;Lambda 函数
var msg = function() { 
    return "hello world";  
} 
console.log(msg())
//------------------
var res = function(a:number,b:number) { 
    return a*b;  
}; 
console.log(res(12,2))
//------------------
(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()
 //------------------
var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);
//------------------
function factorial(number) {
    if (number <= 0) {         // 停止执行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 调用自身
    } 
}; 
console.log(factorial(6));      // 输出 720
//------------------
var foo = (x:number)=>10 + x ;console.log(foo(100))  //输出结果为 110
var foo = (x:number)=> {   x = 10 + x ;console.log(x)  } 
foo(100)
var display = x => { console.log("输出为 "+x) } //单个参数 () 是可选的
display(12)
var disp =()=> {  console.log("Function invoked"); } 
disp();


//函数重载,参数类型不同、参数数量不同、参数类型顺序不同
function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

let suits = ["hearts", "spades", "clubs", "diamonds"];
// 定义重载签名
function greet(person: string): string;
function greet(persons: string[]): string[];
// 定义实现签名
function greet(person: unknown): unknown {
    if (typeof person === 'string') {
        return `Hello, ${person}!`;
    } else if (Array.isArray(person)) {
        return person.map(name => `Hello, ${name}!`);
    }
    throw new Error('Unable to greet');
}
console.log(greet(suits[0]));
console.log(greet(suits));

5.方法

String

//prototype 实例
function employee(id:number,name:string) { 
    this.id = id 
    this.name = name 
} 
var emp = new employee(123,"admin") 
employee.prototype.email = "admin@runoob.com" 
console.log("员工号: "+emp.id) 
console.log("员工姓名: "+emp.name) 
console.log("员工邮箱: "+emp.email)

6.Array数组

数组

var sites:string[]; 
sites = ["Google","Runoob","Taobao"]
var sites:string[]; 
sites = ["Google","Runoob","Taobao"] 
console.log(sites[0]); 
console.log(sites[1]);
var nums:number[] = [1,2,3,4] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);
var multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) 
console.log(multi[0][1]) 
console.log(multi[0][2]) 
console.log(multi[1][0]) 
console.log(multi[1][1]) 
console.log(multi[1][2])

//数组解构
var arr:number[] = [12,13] 
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x) 
console.log(y)

//数组迭代
var arr_names:number[] = new Array(4)  
for(var i = 0; i<arr_names.length; i++) { 
        arr_names[i] = i * 2 
        console.log(arr_names[i]) 
}
var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
for(var i = 0;i<sites.length;i++) { 
        console.log(sites[i]) 
}

//作为函数的返回值
function disp():string[] { return new Array("Google", "Runoob", "Taobao", "Facebook");}  
var sites:string[] = disp() 
for(var i in sites) { 
        console.log(sites[i]) 
}

7.Map对象

• map.clear() – 移除 Map 对象的所有键/值对 。
• map.set() – 设置键值对，返回该 Map 对象。
• map.get() – 返回键对应的值，如果不存在，则返回 undefined。
• map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
• map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
• map.size – 返回 Map 对象键/值对的数量。
• map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
• map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 

let nameSiteMapping = new Map();
 
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3
 
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);


//迭代 Map
let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}
 
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}
 
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}
 
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}

总结