TypeScript【什么是TypeScript、安装并编译TypeScript、变量声明、原始数据类型、数组、元组、任意值】(一)-全面详解（学习总结---从入门到深化）

小咪咪 2024-02-05 14:32 4阅读 0赞

### ![d9cf31eae7a243dd9a47a246f118e5de.gif][] ###

**文章目录**

什么是 TypeScript

安装并编译TypeScript

变量声明

原始数据类型

数组

元组

任意值

--------------------

### 什么是 TypeScript ###

![1d64e650ed3645078ad67a51f769357f.png][]

在了解TypeScript之前，我们先来回顾一下JavaScript的知识点

function add(n,m){
      console.log(n+m)
    }
    add(10,20); // 30
    add(10,"20") // 1020

TypeScript是由微软开发的超集JavaScript的编程语言。它是一种静态类型语言，意味着在编写代码时，你必须指定每个变量的类型，而不是在运行时动态检测它们的类型。  
TypeScript为JavaScript提供了一些高级功能，如类型检查和面向对象编程，使得JavaScript开发人员能够更轻松地编写大型应用程序TypeScript代码可以通过编译器转换为JavaScript代码，这样就可以在浏览器或任何其他JavaScript运行环境中运行。它与JavaScript的兼容性非常好，因此你可以在现有的JavaScript项目中使用TypeScript，或者在新项目中从头开始使用TypeScript开发

function add(n:number,m:number){
      console.log(n+m)
    }
    add(10,20);
    add(10,"20"); // Argument of type 'string' is not assignable to parameter of type 'number'

**TypeScript与JavaScript的关系**

为了更好的理解，我们可以将三者看成是包含关系

![9351fd10d2ac4b8a89b57fe716480cbd.png][]

### 安装并编译TypeScript ###

![6f4cdcd6ed154b3f94e95fbcff796b60.png][]

我们所编写的应用程序最终是需要运行在浏览器中的，但是浏览器能识别的语言是JavaScript而非TypeScript。那么问题来了，我们编写TypeScript的代码如何运行在浏览器中呢？答案：将TypeScript编译成JavaScript代码在运行在浏览器中！

**安装 TypeScript**

npm install -g typescript

以上命令会在全局环境下安装 **tsc** 命令，安装完成之后，我们就可以在任何地方执行 **tsc** 命令了  
检查是否安装成功： **tsc -v**

**编译TypeScript**

// hello.ts
    function add(n:number,m:number){
      console.log(n+m)
    }
    add(10,20);

编译一个 TypeScript 文件很简单

tsc hello.ts

**运行TypeScript**

function sayHello(person: string) {
      return "Hello, " + person;
    }
    let user = "itxiaotong";
    document.body.textContent = sayHello(user);

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <script src="./hello.js"></script>
    </body>
    </html>

###  ###

### 变量声明 ###

![20d2636be2794461b3e6b03e2e88bda0.png][]

**let** 和 **const** 是 **JavaScript** 中变量声明的两个相对较新的概念  
在某些方面 **let** 类似于 **var** ，但允许用户避免用户在 **JavaScript** 中遇到的一些常见“陷阱”  
**const** 是一个常量，防止变量被重新赋值  
由于 **TypeScript** 是 **JavaScript** 的扩展，该语言自然支持 **let** 和 **const**

**Let声明**  
块级作用域

{
     let a = 10;
     var b = 1;
    }
    a // ReferenceError: a is not defined.
    b // 1

块级作用域解决的最大问题就是在JavaScript中令人头疼的闭包问题！

var a = [];
    for (let i = 0; i < 10; i++) {
     a[i] = function () {
      console.log(i);
     };
    }
    a[6](); // 6

不存在变量提升

// var 的情况
    console.log(foo); // 输出undefined
    var foo = 2;
    // let 的情况
    console.log(bar); // 报错ReferenceError
    let bar = 2;

不允许重复声明

// 报错
    function func() {
     let a = 10;
     let a = 1;
    }

**Const声明**  
const 声明一个只读的常量。一旦声明，常量的值就不能改变

基本用法

const PI = 3.1415;
    PI // 3.1415
    PI = 3;
    // TypeError: Assignment to constant variable.

> **温馨提示**  
> Const同样不存在变量提升与重复声明

### 原始数据类型 ###

![312afdca28244869bda18b2fa90312c5.png][]

JavaScript 的类型分为两种：原始数据类型和对象类型(也就是我们平时说的基本数据类型与引用数据类型)

> **温馨提示**  
> 在这里 null 和 undefined 我们依然归类为特殊类型

原始数据类型包括：布尔值、数值、字符串以及 ES6 中的新类型 Symbol和 ES10 中的新类型 BigInt  
接下来我们说一说原始数据类型在TypeScript中如何使用

**布尔值**

最基本的数据类型就是简单的 true/false 值，在 JavaScript 和 TypeScript 里叫做 boolean

let isFlag: boolean = false;

**数值**

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

let age: number = 6; // 十进制
    let myColor: number = 0xf00d; // 十六进制
    let flag: number = 0b1010; // 二进制
    let test: number = 0o744;  // 八进制

> 其中 **0b1010** 和 **0o744** 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字

**字符串**

我们使用 **string** 表示文本数据类型。 和 JavaScript 一样，可以使用双引号（ " ）或单引号（ ' ）表示字符串

let myName: string = 'iwen';

你还可以使用 模版字符串

let myName: string = 'iwen';
    let myAge: number = 25;
    // 模板字符串
    let info: string = `Hello, my name is
    ${myName}.I'll be ${myAge + 1} years old next month.`;

### **数组** ###

![9f8a2fc79f424680b0436c6520a1955e.png][]

TypeScript 像 JavaScript 一样可以操作数组元素。 有两种方式可以定义数组。  
第一种，可以在元素类型后面接上 **\[\]** ，表示由此类型元素组成的一个数组  
第二种方式是使用数组泛型， **Array<元素类型>**

**第一种：「类型 + 方括号」表示法**

let list: number[] = [1, 2, 3];

**第二种：数组泛型**

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

**读取数组数据**

> 无论是那种方式，读取的方式并没有发生变化

let list: number[] = [1, 2, 3];
    console.log(list[1])
    
    for(var i =0;i<list.length;i++){
      console.log(list[i])
    }

**任意类型**  
在JavaScript中，我们习惯了数组中可以存在任何类型的数据，在 TypeScript中，依然也可以

let list: any[] = ['itxiaotong', 10, { website: 'https://itxiaotong.com' }];

### 元组 ###

![8669373d36de4b69bf8b640a912f8c86.png][]

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象  
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

**简单的例子**

定义一对值分别为 **string** 和 **number** 的元组

let info: [string, number] = ['iwen', 25]

使用元组的前提就是知道元素的数量和类型，这里顺序也是不能颠倒的

let info: [string, number] = [25,'iwen'] //报错

当访问一个已知索引的元素，会得到正确的类型

let info: [string, number] = ['iwen',25]
    console.log(info[0])
    console.log(info[0].substring(1))

也可以只赋值其中一项  
但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项

let info: [string, number]
    info = ["it",30]
    console.log(info[0])

**越界**  
访问越界时，会直接报错

let info: [string, number] = ['iwen',25]
    console.log(info[2]) // 报错

添加元素越界时，也会报错

let info: [string, number]
    info = ["it",30,true] // 报错

### 任意值 ###

![82a832f84fb5498e8d287ef0aace0a1b.png][]

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

**什么是任意值类型**

如果是一个普通类型，在赋值过程中改变类型是不被允许的

let age:number = 30
    age = "Hello" // 报错

但如果是 any 类型，则允许被赋值为任意类型

let age:any = 30;
    age = "Hello";

**未声明类型的变量**

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型

let age; // 默认不要给初始值
    age = "Hello";
    age = 30;

**任意类型数组**  
在JavaScript中，我们习惯了数组中可以存在任何类型的数据，在TypeScript中，依然也可以

let list: any[] = ['itxiaotong', 10, { website: 'https://itxiaotong.com' }];

[d9cf31eae7a243dd9a47a246f118e5de.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/3358594a29bb473fa23b59634a4b3551.png
[1d64e650ed3645078ad67a51f769357f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/2bf7f1944ca14803b0141d7863ab7ba0.png
[9351fd10d2ac4b8a89b57fe716480cbd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/9e8631d2432348e7ae07f729a31fd63e.png
[6f4cdcd6ed154b3f94e95fbcff796b60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/1e84913e50c34f5a834238fff784bce4.png
[20d2636be2794461b3e6b03e2e88bda0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/c93f305281d94c36be4fad9a4cc5ad35.png
[312afdca28244869bda18b2fa90312c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/662dbe426cc24cd5b4596a6b2327bdc9.png
[9f8a2fc79f424680b0436c6520a1955e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/317861b0080448ba8127da8708a438f9.png
[8669373d36de4b69bf8b640a912f8c86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/03ccb93d92ac4211a374280ec08d6b34.png
[82a832f84fb5498e8d287ef0aace0a1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/523481dceb044a79a323bd802ee463d6.png