TypeScript基础知识【前端那些事】

产生背景

TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任大型项目的开发和维护。因此微软开发了TypeScript ，使得其能够胜任大型项目的开发。

主要功能

TypeScript的作者是安德斯·海尔斯伯格C#的首席架构师。 [1] 它是开源和跨平台的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 [2-4]

TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。 [5]

TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件，扩展了它对于流行库的支持，如 jQuery，MongoDB，Node.js和 D3.js 等。这些第三方库的类型定义本身也是开源的，所有开发者都能参与贡献。 [6]

基础类型

1、布尔值

TypeScript中可以使用boolean 来表示这个变量是布尔值，可以赋值位true或者false

let isDone:boolean = false;

2、数字

TypeScript里面的所有数字都是浮点数，这些浮点数的类型都是Number，支持十进制、二进制、八进
制、十六进制

let decLiteral:number = 2023;
let binnumber:number = 0b111110111;
let octalLiteral = 0o3747;
let hexLiteral = 0x7e7; 

3、字符串

TypeScript里使用String表示文本数据类型，可以使用双引号或者单引号来表示字符串

ley name:string = "Jackly"
let fristName:string = 'Tom'

4、数组

TypeScript 支持以下两种方式来声明数组
第一种 可以在元素类型后面接[] 表示有次类型元素组成的一个数据

let list1:number[] = [1,2,3]

第二种方式是使用数组泛型，Array<元素类型>

let list2:Array<number> = [1,2,3]

5、元组

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let x:[string,number];
x = ['hello',10] //true
x = [10,'hello'] // error

6、枚举

enum类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以位一组数值赋予友好的名字

enum Color {red,Green,Blue};
let c:Color = Color.Green;

7、unknown

有时候，我们会想到为那些在变成阶段还不清楚类型的变量指定一个类型。那么我们可以使用
unKnow类型来标记这些变量

let notSure:unknown = 4;
notSure = 'maybe a String instead'
notSure = false;

8、void

当一个函数没有返回值时，你通常会见到其返回值类型是void

function test():void{
  console.log('this is function is void');
}

9、null和undefined

TypeScript里，undefined 和null两者各自有自己的类型分别叫做underfined和null

let u:undefined = undefined;
let n:null = null;

10、联合类型

联合类型(union Types)表示取值可以位多种类型中的一种。

let myFavoriteNumber:string|number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

条件语句

条件语句用于不通的条件下来执行不同的动作，TypeScript条件语句是通过一条或多条语句的执行结
果(true或者false）来决定执行的代码块

if 语句

let num:number = 5;
if(num>0){
	console.log(‘数字是正数’);
}

if…else语句

let num:number = 12;
if(num%2==0){
	console.log('偶数');
}else{
	console.log('偶数');
}

if…else if…else语句

if num:number = 0;
if(num>0){
	console.log(num+'是正数');
}else if(num<0){
	console.log(num+'是负数');
}else{
	console.log(num+'为0');
}

Switch语句

一个switch语句允许测试一个变量等于多个值时的情况。每个值为一个case，且被测试的变量会对每
个switch case进行检查

var grade:string = 'A';
switch(grade){
	case 'A'：{
		console.log('优秀');
		break;
	}

	case 'B'：{
		console.log('良好');
		break;
	}
	default{
		console.log('非法输入');
		break;
	}
}

函数

定义：函数是一组一起执行一个任务的语句，函数声明要告诉编译器函数的名称、返回类型和参数。
TypeScript可以创建有名字的函数和匿名函数，创建方法如下：

// 有名函数
function add(x:number,y:number){
	return x+y;
}

// 匿名函数
let myAdd = function(x:number,y:number){
	return x+y;
}

函数的可选参数

在TypeScript里我们可以在参数名旁使用(?)实现可选参数的功能。比如，我们想让laseName为可选的

function buildName(fristName:string,lastName?:string){
if(lastName){
   return firstName+' '+lastName;
}else{
   return fristName;
}

// 调用函数
let result1 = buildName('Bob');
let result2 = buildName('Bob','Adame');

函数的剩余参数

剩余参数会被当做个数不限的可选参数。可以一个都没有，同样也可以有任意个。可以使用省略号
（…）来定义：

function getEmployeeName(firstName:string,...restOfName:string[]){
	return firstName+''+restofName.json('');
}

let EmployeeName1 = getEmployeeName('tom');
let EmployeeName2 = getEmployeeName('tom'，'SAndy','Mick','Lucas');

箭头函数

ES6版本的TypeScript提供了一个箭头函数，他死定义匿名函数的简写语法，用于函数表达式
它省略了function关键字。鉴定函数的定义如下，其函数是一个语句块：

([param1,param2,...param n])=>{
    //代码块
}

其中 括号内是函数的入参，可以有0到多个参数，箭头后是函数的代码块。我们可以将这个箭头函数
赋值给一个变量，如下所示

let arrowFun = ([param1,param2,...param n])=>{
//代码快
}

类

TypeScript支持基于类的面向对象的编程方式，定义类的关键字位class 后面紧跟类名。
类描述了所创建的对象共同的属性和方法.

class Person{
	private name:string
	private age:number
	// 初始化
	constructor(name:string,age:number){
		this.name = name;
		this.age = age;
	}
	public getPersonInfo():string{
		return `myname is ${this.name}and age is ${this.age}`;
	}
}

let person1 = new Person('jack',18);

persopn1.getPersonInfo();

继承

继承就是子类继承父类的特征和行为，使得子类具有父类相同的行为。TypeScript中允许使用继承来

扩展现有的类，对应的关键字位extends

class Employee extends Person{
	private department:string
	
	constructor(name:string,age:number,department:string){
		super(name,age);
		this.department = department;
	}
	
	public getEmployeeInfo():string{
		return this.getPersonInfo()+`and work in{$this.department}`;
	}
}

let Person2 = new Employee('Tom',28,'测试');
persopn2.getPersonInfo();
persopn2.getEmployeeInfo();

模块

随着应用的越来越大，通常要将代码拆分为多个文件，即所谓的模块。
模块可以相互加载，并可以使用特殊的指令export和import来交换功能，从另一个模块
调用一个模块的函数。

两个模块之间的关系是通过在文件级别上使用import和expport建立的。模块里面的变量、函数和类
等在模块外部是不可见的，除非明确地使用export导出它们。类似地，我们必须通过import导入其他

模块导出的变量、函数、类等。

export class NewsData(){
	title:string;
	content:string;
	constructor(title:string,content:string){
		this.title = title;
		this.content = content;
	}

}

// 引入该模块
import {newsData} from '../common/bean/NewsData';

迭代器

当一个对象实现了Symbol.iterator属性是，我们认为他是可迭代的，一些内置的类型如

Array,map,set,String,Int32Array,Uint32Array等都是具有可迭代性。

for…of语句

let someArray = [1,'String',false];

for(let entry of someArray){
   console.log(entry)
}

for…in语句

let list = [4,5,6];
for(let i in list){
	console.log(i) // 0,1,2 输出的值为该数据的下标
}

for(let i of list){
	console.log(i) // 4,5,6 输出的值位改数据的元素
}

引用参考

• 1 Microsoft TypeScript: Can the father of C# save us from the tyranny of JavaScript? ．ZDNet[引用日期 2023-09-28]
• 2 Microsoft takes the wraps off TypeScript, a superset of JavaScript ．ZDNet[引用日期 2023-09-28]
• 3 TypeScript: JavaScript Development at Application Scale ．MSDN[引用日期 2023-09-28]
• 4 Microsoft Augments Javascript for Large-scale Development ．CIO[引用日期 2023-09-28]
• 5 Microsoft TypeScript: the JavaScript we need, or a solution looking for a problem? ．ars technica[引用日期2023-09-28]
• 6 DefinitelyTyped - 我该如何贡献？ ．Github．2020-09-26[引用日期 2023-09-28]