TypeScript

什么是TypeScript

TypeScript是JavaScript的超集，TypeScript扩展了JavaScript的语法，TypeScript编译成JavaScript，让TypeScript可以运行在任何浏览器和Node环境中。TypeScript是一种给JavaScript添加特性的语言扩展。

为什么要使用TypeScript

TypeScript增加了代码的可读性和可维护性。TypeScript增加了编译时的类型检查，使得很多错误在开发时就被发现。

TypeScript特点

支持最新的JavaScript新特性。
支持代码静态检查。
支持如C C++等语言的代码特性(枚举、泛型、接口、类…)。

安装

yarn global add typescript

查看版本

tsc -v

编译

tsc 路径+文件名

编译并监听

tsc 路径+文件名 -w

配置文件

tsc --init

{
   
  "compilerOptions": {
   
    "target": "es2016", *// 指定编译后 ECMAScript 的版本*
    "module": "commonjs", *// 指定模块系统 commonJS、AMD...*
    "sourceMap": true, *// 生成 sourceMap 文件*
    "outDir": "./dist", *// 指定输出目录*
    "rootDir": "./src", *// 指定输入目录*
    "strict": true *// 启用所有严格类型检查选项*
    ...
  }
}

---

基本类型

 let str:string = 'hello ts!';
 let und:undefined = undefined;
 let nu:null = null;
 let bool:boolean = true;
 let sy:symbol = Symbol(); 

特殊类型 （any、unknown、never、void）

any：表示任意类型，可以被赋予任何类型的值，并且对这些值不做任何类型检查。

unknown：更安全的 any 类型，代表了一个未知的类型。当确实不知道一个值的确切类型，但是又希望保持类型检查时使用。

never：表示永远不应该发生的值。比如抛出错误或者死循环，那么该函数永远不会执行完，不可能有返回值。

void：表示没有类型，通常用于表示函数没有返回值。

 let any1:any;
 any1 = 1;
 any1 = 'a';
 any1 = true;

 let unk:unknown = 5;
 if(typeof(unk) === 'number'){
   
 	console.log(unk * 2)
 } 

 function throwError(message: string): never {
   
 	throw new Error(message);
 }
 try {
   
 	throwError("Something went wrong!");
 } catch (error) {
   
 	console.error(error); // 输出: Something went wrong!
 }

 function fn(m:string): void {
   
	console.log(m)
 }

值类型

 let uname: 'james' = 'james'
 uname = 'kd' // 不能将类型kd分配给类型"james"。

数组和元组

• 数组：使用类型 [] 来表示。

// 普通数组
let arr: string[] = ['a', 'b', 'c'];
let arr1:Array<number> = [1, 2, 3];

// 二维数组
let arr: number[][] = [
  [1, 2],
  [3, 4],
];

• 元组：元组可以包含不同类型的元素，并且元素的类型、位置、数量都是确定的。
  注意：给原本数组继续添加数据时，后添加的数据必须是前面数据的类型中的一个。

let tuple: [number, string] = [1, "hello"];
tuple.push("A");

对象

注意：对于对象来说，应该限定对象中每个属性的类型，而不是限定对象这个整体的类型。

• 定义对象

// 不推荐
let obj:object; 
obj = [];
obj = {
   };
obj = function (){
   }


let user: {
    name: string; age: number } = {
   
  name: "张三",
  age: 18,
};

• 可选属性：在属性后面加上问号(?)，表示该属性可有可无。
  注意：一个对象中可以有任意多个可选属性。

let user: {
    name: string; age?: number } = {
    name: "张三" };

• 任意属性：在已有属性后，用中括号([])括起来。
  注意：
  一个对象只能有一个任意属性。
  任意属性表示多个其他的属性，值的类型必须与定义时一致。
  任意属性的类型一定是其他类型的父类，也就是必须要包含其他类型，比如：any包含string，但是number就不包含string。

let user: {
    name: string; [propName: string]: string } = {
   
  name: "张三丰",
  address: "北京",
  id: "xxx01",
};

• 只读属性：在属性前面加上readonly，表示该属性值不能被修改。
  注意：一个对象中可以有任意多个只读属性。

let user: {
    readonly name: string; age: number } = {
   
  name: "张三",
  age: 18,
};

内置对象

let sym: symbol = Symbol("sym");
let date: Date = new Date();
let reg: RegExp = /[a-z]/;
let error: Error = new Error("error");
let allDiv: NodeList = document.querySelectorAll("div");
let body: HTMLElement = document.body;

函数

• 定义

// 有返回值
function