系列文章目录
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.方法
//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);
}