Web技术基础——TypeScript

一、TypeScript初步

1.1 TypeScript的定义

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上一个可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。

TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

1.2 环境搭建

下载node.js

安装好node.js过后，在终端使用命令：npm -g install ts-node typescript进行全局安装

我的写代码环境是VScode，所还需要安装TSLint、TypeScript Hero、Bracket Pair Colorizer插件，新建一个文件后缀为.ts，就可以用JS语言写代码了。

二、基础语法

2.1基本类型——类型声明

类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量(参数 形参) 的类型
指定类型后 当为变量赋值时 TS编辑器会自动检查值是否符合类型声明 符合则赋值 否则报错
简而言之 类型声明给变量设置了类型 是的变量只能存储某种类型的值
如：

let 变量:类型;
let 变量: 类型=值;
function fn(参数:类型,参数:类型):类型{...}

2.2 基本类型——自动类型判断

TS拥有自动的类型判断机制
当对变量的声明和赋值时同时进行的,TS编译器会自动判断变量的类型
所以如果你的变量的声明和赋值时同时进行的 ,可以省略类型声明

类型	例子	描述
number	1，2，3	任意数字
string	“h”,‘h’,h	任意字符串
Boolean	true，false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值	没有值
never	没有值	不能是任何值
object	{name:‘孙悟空’}	任意的JS对象
array	[1,2,3]	任意的JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

number:

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

boolean:

let isDone: boolean = false;

string:
l

et color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
I'll be ${age + 1} years old next month.`;

字面量：

let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
let a1: 10;
a1 = 10;//后面使用时不可修改，类似常量
//可以使用 | 来连接多个类型（联合类型）
let b1: "male" | "female";
b1= "male";
b1= "female";
let c1 : boolean | string;
c1 = true;
c1 = 'hello';

any：

any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
使用TS时，不建议使用any类型（尽量避免）

let d: any = 4;
d = 'hello';
d = true;
// let d:any;（显示的any）
//声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）
let d;
d = 10;
d = 'hello';
d = 'true';

unknown：

let notSure: unknown = 4;
notSure = 'hello';
//unknown表示未知类型的值
let e: unknown;
e = 10;
e = true;
e = "hello";

void：
void 用来表示空值，以函数为例，就表示没有返回值（或返回undefined）的函数

let unusable: void = undefined;
function fn2(): void{
}

never：
没有值 函数连undefined都不返回 使用never
never 表示永远不会返回结果；没有值（比较少用，一般是用来抛出错误）

array：

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
let list: Array<number | string> = [1, 2, 3,,'a'];
/* 
    数组的类型声明：
        类型[]
        Array<类型>
*/
//string[] 表示字符串数组
let e1:string[];
e1 = ['a','b','c'];
//number[] 表示数值数组
let f: number[];
let g: Array<number>;
g = [1, 2, 3];

tuple：
固定长度的数组

let x: [string, number];
x = ["hello", 10]; 
/* 
    语法：[类型， 类型， 类型]
*/
let h: [string, number];
h = ['hello', 123];

enum：

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;
enum Color {
  Red = 1,
  Green,
  Blue,
}
let c: Color = Color.Green;
//枚举可以把所有可能的值都列举出来
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c: Color = Color.Green;
//----------------------------------------------------
enum Gender{ //定义枚举类型可以把所有可能的值都列举出来
    Male = 0,
    Female = 1,
}
let i: {name: string, gender: Gender};
i = {
    name: '孙悟空',
    gender: Gender.Male
}
console.log(i.gender === Gender.Male)

2.3 基本类型——类型断言

有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：
第一种：

let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

第二种：

let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

三、解构

将对象、数组中的元素拆分到指定变量中，以方便使用。

//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
  a: "foo",
  b: 12,
  c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

四、函数

//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！
function add(x: number, y: number): number {
  return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
console.log(myAdd(1, '2'));//error
console.log(myAdd(1));//error
console.log(typeof myAdd(1, 2));//number 

4.1 可选参数

//可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
  if(lastName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'Wang'));
console.log(greeting('QiGe', 'Wang', 'Yong'));//error

4.2 默认参数

//默认参数，不必在必要参数后
function greeting(firstName: string, lastName = 'Wang') {
  return `Hello ${firstName} ${lastName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'HaHaHa'));
console.log(greeting('QiGe', 'HaHaHa', 'Yong'));//error!

4.3 剩余参数

//剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个
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'));

4.4 箭头函数

//无参数，函数体代码只有一行，则该行结果即为函数返回值
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));

五、类class

类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。

//类的定义和使用
class MyInfo { //class是关键字，类名默认全部大写首字母
  name: string; //属性
  weather: string; //属性
  constructor(name: string, weather: string){ //构造函数，一般用于初始化。如果没有，TS会自动生成一个，以备用new创建类实例时调用。
    this.name = name;
    this.weather = weather;
  }
  printInfo(): void { //其它函数，无返回值
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this.weather}.`);
  }
}
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象，即该类的实例
myData.printInfo();

5.1 类的属性和函数的访问权限

类中的属性和函数都有访问权限，默认为public即全局可访问，其次为protected即可在类的内部和其子类的内部可访问，最后为private，只能在该类内部可访问。

//访问权限
class MyInfo { //class是关键字，类名默认全部大写首字母
  public name: string; //public属性，可省略
  private _weather: string; //私有属性，习惯以_开头进行命名 
  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this.name = name;
    this._weather = weather;
  }
  printInfo(): void { //其它函数
    this._test();
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this._weather}.`);
  }
  private _test(): void {
    console.log('You can not call me outside!');
  }
}
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData._weather); //error!
myData._test(); //error
myData.printInfo();          

六、模块Module

对于大型的项目，我们需要使用模块进行管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。
如：
main.ts

//用import从外部模块文件导入，默认后缀.ts去掉
import { Name } from "./modules/name";
import { WeatherLocation } from "./modules/weather";
let name = new Name('Wang', 'Yong');
let loc = new WeatherLocation('raining', 'ChongQing');
console.log(name.nameMessage);
console.log(loc.weatherMessage); 

modules/name.ts

export class Name { //用export对外部暴露该类
  constructor(private first: string, private second: string) {}
  get nameMessage() {
    return `Hello ${this.first} ${this.second}`;
  }
}             

modules/weather.ts

export class WeatherLocation { //用export对外部暴露该类
  constructor(private weather: string, private city:string) {}
  get weatherMessage() {
    return `It is ${this.weather} in ${this.city}`;
  }
}  

七、Angular

Angular是一个由Google开发维护的开源前端开发框架和平台（其它两个流行的是React和Vue）。
框架提供了大量高效的结构或者良好的模式，我们根据框架提供的结构或者模式去书写代码，由框架帮助我们去执行相应的操作。

Angular集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。

Angular为开发者提升构建 Web、手机或桌面应用的能力，无论哪种应用尺度。

官网

中文网站