什么是TypeScript？

官网：https://www.tslang.cn/index.html

最新版本：3.1 2023年5月

介绍：TypeScript 由微软开发的自由和开源的编程语言，TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

 

TypeScript和JavaScript有什么区别？

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

 

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页。
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用
支持模块、泛型和接口	不支持模块，泛型或接口
支持 ES3，ES4，ES5 和 ES6 等	不支持编译其他 ES3，ES4，ES5 或 ES6 功能
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持

 

TypeScript安装使用

npm install -g typescript   #进行全局安装typescript
tsc -V          #查看typescript版本

创建index.ts文件 类似java中的.java文件

在文件内输入：

var message:string = "Hello World TS" 
console.log(message)

编译文件

tsc index.ts #将ts文件编译成js

 

TypeScript 基础类型

1. 布尔类型（boolean）
2. 数字类型（number）
3. 字符串类型（string）
4. 数组类型（array）
5. 元组类型（tuple）
6. 枚举类型（enum）
7. 任意类型（any）
8. null 和 undefined
9. void类型
10. never类型

一、布尔类型（boolean）true / false

最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。

let isDone: boolean = false   
isDone = true //正确写法
isDone = 12 //错误写法

二、数字类型（number）

和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

 

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

三、字符串类型（string）

JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用string表示文本数据类型。 和JavaScript一样，可以使用双引号（"）或单引号（'）表示字符串。

 

let str: string = "bob"
str = "smith"

你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（`），并且以${ uname }这种形式嵌入表达式

 

let uname: string = `Gene`
let sentence: string = `Hello, my name is ${ uname }`

四、数组类型（array）

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。
第一种，可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：

 

let list: number[] = [1, 2, 3]; //这里只能写数字类型
let list: string[] = ['red', 'blue', 'yellow']; //这里只能写字符串类型

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

 

let list: Array<number> = [1, 2, 3]; //这里只能写数字类型
let list: Array<string> = ['red', 'blue', 'yellow']; //这里只能写字符串类型

五、元组类型（tuple）

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为string和number类型的元组。

 

let x: [string, number];
x = ['hello', 10] //正确写法
x = [10, 'hello'] //错误写法

官方文档给出了一些拓展：
当访问一个已知索引的元素，会得到正确的类型

 

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

当访问一个越界的元素，会使用联合类型替代：

 

x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型

不过这个联合类型，这里就不讲了，后续讲

六、枚举类型（enum）

enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

 

enum Color {Red, Green, Blue}
let c: Color = Color.Green;   //输出的值是1

默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从1开始编号：

 

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green; //输出值是2

如果前一个赋值，后面没有赋值，那么后面会根据前面赋值，往后+1
或者，全部都采用手动赋值：

 

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

七、任意类型（any）

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用any类型来标记这些变量：

 

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

还有一个例子，比如，获取dom，修改dom的style

 

var dom = document.getElementById('box')  //可以运行代码，但是会报错
var dom:any = document.getElementById('box')  //可以运行代码，也不会报错
dom.style.color = 'red'

当你只知道一部分数据的类型时，any类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据：

 

let list: any[] = [1, true, "free"];
list[1] = 100;

八、void类型

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是void：

 

function warnUser(): void {
  alert("This is my warning message");
}

如果你要返回，根据对应返回的数据，进行选择：

 

function warnUser1(): number {
  return 123
}

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

 

let unusable: void = undefined;

九、null 和 undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和void相似，它们的本身的类型用处不是很大：

 

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

默认情况下null和undefined是所有类型的子类型。 就是说你可以把null和undefined赋值给number类型的变量。
然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。 这能避免很多常见的问题。 也许在某处你想传入一个string或null或undefined，你可以使用联合类型string | null | undefined。 后面会介绍联合类型。

十、never类型

never类型表示的是那些永不存在的值的类型。 例如，never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使any也不可以赋值给never。

下面是一些返回never类型的函数：

 

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}