【起步必看】TypeScript基础

Dorable_Wander

已于 2022-12-09 01:05:03 修改

阅读量581

点赞数 5

分类专栏： TypeScript 文章标签：前端 typescript javascript 开发语言

于 2022-09-27 02:46:30 首次发布

本文链接：https://blog.csdn.net/XSL_HR/article/details/127062759

版权

TypeScript 专栏收录该内容

9 篇文章 8 订阅

订阅专栏

初识“前端的未来”TypeScript

前言
- TypeScript vs JavaScript
- TypeScript专栏
主要内容
summary
下期预告
- 【起步必看】《前端的未来——TypeScript》学习TS的环境配置
- 【起步了解】《前端的未来——TypeScript》了解TS的工作技术流

前言

TypeScript vs JavaScript

在这里插入图片描述

TypeScript 为什么被视为“前端的未来”？

Typescript在最受开发者喜爱语言排行榜跃居第二名，依靠着微软和Google的背书
Typescript社区逐渐壮大，日趋完善，为越来越多前端开发者提供服务。

在这里插入图片描述

为什么是 Typescript 而非 JavaScript ？

更可靠：类型的定义和编译器的引入，可以避免JavaScript大多数runtime错误，更可靠，易维护；
更清晰：显式类型声明提升代码可读性，代码校验可以全部交给编译器负责；
更广泛：TypeScript是JavaScript的超集，可以在TypeScript代码中混合使用任何JavaScript库和代码。

如果你是前端开发工作者，那就一定不要错过！

TypeScript专栏

专栏中你可以学到什么？

了解TypeScript是什么，用于是什么
研究TypeScript编译流程、工作环境
学习TypeScript 12个基本类型
深入理解TypeScript 重要高级类型
掌握 TypeScript 面对对象的特性
学习TypeScript 的 Generics 泛型
学习完本专栏之后，我们能够掌握TS的基础知识，能够快速上手，并且我们可以知道如何写出简洁和高效的代码，提高程序的可维护性和高效性。

TS专栏大纲

TS理论基础、开发环境、编译原理、工作流程、相关工具。
【重点】TS基础类型学习：数字、布尔、字符串、数组、元祖、联合、枚举、any、unknow、void、undefined、以及Never。
【重点】面对对象：泛型、class、interface、module、命名空间、元编程meta-programming（装饰器）。

主要内容

2015年微软发布TypeScript（以下简称TS），虽然它是一门很新的语言，但是在前端领域已经非常流行了，包括Angular，React，Vue等广泛使用的前端框架，都在使用TS。
TS是JS的超集（superset)，它在兼容JS的同时，也带来了C#和Java等语言才有的强类型定义。
在这里插入图片描述
我们不仅能够使用JS的语法，而且还能够使用JS不具有的Strongly Typed强类型,generics泛型，面向对象以及TS拓展功能构建一个更强大、更稳定、更容易维护的项目工程。

1 课前技术准备

JS基础知识（可参考JS专栏）
了解ES6标准（可参考ES6专栏更新中）
熟练掌握Nodejs、React、Vue等先进的前端框架，方便使用TS。

2 什么是TS

准确的来说，TS是JS的一个超集，也就是说任何合法的JS代码都可以在TS中运行，但反过来说，TS却包含许多JS不具备的功能。
准确地说，TS包含了目前主流的ES5标准，也同时包含了未来主流的ES6/7/8标准，甚至也包含了一些实验阶段的语法。
实际上，TS的语法就构建在JS上，它给原生的JS带来了强类型的定义（在英语中Type是类型的意思，从而强调了TypeScript所具备的最大特征——强定义类型）
在这里插入图片描述
总体图示如上↑
注意： TS无法在浏览器中运行。至少目前的主流浏览器都不支持TS的运行。

（这里你难免会好奇，那要怎么样才能运行TS？这中间其实存在一个编译转换【如下图】。具体讲解请见下节【环境配置】分享）
在这里插入图片描述

3 为什么要使用TS

从上面的过程中可以看出，TS的使用相对而言是比较繁琐的，需要用JS的语法编写，需要编译器，需要编译成JS语言，最后才运行。

我们难免会发出疑问，既然TS用起来这么繁琐，为什么我们还要用TS呢？原因就在TS的名称里了。——Typing强类型

规范我们的代码
代码编译阶段就能及时发现错误

简单来说，TS并没有给我们带来任何超越JS的新特性，它仅仅是在JS的原生基础上加了一层定义。

4 引出JS的弱点（类型）

4.1 函数引例

首先我们来考虑几个函数。（代码注释很详细，建议写的过程复习回忆JS）
【求和函数】
html部分：

<head>
       <!-- 注意引入的一定是js文件 绝对不能是ts文件-->       
       <script src="main.js" defer><script>
<head>
<body>
       <input type="number" id="num1" placeholder="数字1">
       <input type="number' id="num2" placeholder="数字2">
       <button id="button">加起来<button>
<body>

js部分

// main.js内容
// 定义变量并获取变量的值 获取事件
var button = document.querySelector("button");
var num1 = document.getElementById("num1");
var num1 = document.getElementById("num2");

// 求和函数
function add(num1,num2){
    return num1.value + num2.value;
}

// 按钮点击事件
button.addEventListener("click",function() {
    console.log(add(num1,num2));
});

在这里插入图片描述
我们在框内分别输入10和5，按道理输出的数据应该是15。但是结果却和我们想的不一样。

通过这个案例，我们充分展示出了JS的一个致命弱点——类型。

我们在输入框内输入的数据，并不是数字，而是字符串。而在调用加法函数时，传入的函数并不是把这两个数字加起来，而是把两个数字连接起来。JS对于这样的处理是完全没有问题的。
我们创建加法函数的初衷是为了做加法运算，而不是连接两个字符串，需要注意！这并不是语言错误，更不是技术错误，甚至不会有报错异常，这是一种语义级别的逻辑错误。
从逻辑上来看待这个案例，加法函数add的处理范围越界，它不应该处理字符串。而这一缺陷在JS当中是非常常见的，因为不会报错异常，所以你甚至都不会发现这里的逻辑错误。

4.2 解决方法（传统）

面对JS这一缺陷，我们可以在runtime，也就是程序运行中通过使用if语句和类型检查，来判断输入的参数是否合法。
js函数部分代码如下↓

function add(num1,num2) {
  // 通过if语句判断num1 num2的类型 注意中间得用全等于又称恒等于连接
  if(typeof num1 === "number" && typeof num2 ==="number"){
    // 如果满足条件 则二者相加
    return num1+num2;
  } else {
    // 使用加法符号 把变量全部转化为数字类型
    return +num1 + +num2; 
  }
}

当然，在真实开发当中，以上的代码还可以更加精炼，但是，如果每个代码都需要我们做这样的工作，那可谓无稽之谈。这也是TS诞生的原因。

TS的优势何在

类型检查
避免低级错误
解放劳动力
帮助我们写出质量更高的代码

4.3 TS轻松解决JS缺陷

接着加法函数，我们进行以下修改。

将js后缀名改为ts => 展示TS的第一个优势——类型推演和类型匹配

如果我们将鼠标放在加法函数的参数num1、num2上，我们会发现：在这里插入图片描述
在num1冒号后面跟着一个any，而这正是TS为之定义的数据类型。TS不确定num1的数据类型，有可能是任意一种数据类型。所以我们可以用TS来细化一下参数的类型定义。

// 在原代码上添加修改
// main.js内容
// 定义变量并获取变量的值 获取事件
var button = document.querySelector("button");
var num1 = document.getElementById("num1");
var num1 = document.getElementById("num2");

// 求和函数（修改前）
/*function add(num1,num2){
    return num1.value + num2.value;
}*/
// 求和函数（TS修改后） 为num1添加number属性
function add(num1:number,num2:number) {
    renturn num1.value + num2.value;
}

// 按钮点击事件 点击调用加法函数
button.addEventListener("click",function() {
    console.log(add(num1,num2));
});

注意：这里知道ts如何修改即可，因为ts的运行需要安装编译器和环境配置，可以查看有关【环境配置】一文的相关内容，自己试试如何运行TS文件。

在终端中输入tsc main.ts ``````// tsc是TS的编译器可以将其转化为JS文件从而在浏览器中运行
// 前提是已经验证并确保TS编译器已经安装完毕

此时我们会发现，报错了。
在这里插入图片描述
我们可以看看出错位置，是因为什么原因。

根据报错信息，我们可以把value删掉。

// 求和函数（TS修改后）
function add(num1:number,num2:number) {
    renturn num1 + num2;
}

// 按钮点击事件 点击调用加法函数
button.addEventListener("click",function() {
    console.log(add(num1.value,num2.value));
});

删掉的value来自HTML输入框获得的num1和num2的值，我们可以把num放在函数调用中运行。但是，调用函数的时候还是会报错。
在这里插入图片描述
编译器告诉我们，它不确定value是否存在。

这也说明了TS的第二个优势，能够在代码编写的过程中找到错误，及时提醒和修复。

有时候我们可能会打错字，导致num悬空null，自然是没法访问value这个属性的，因此undefined。

这里引出了TS的第三个优势，能够检查出一个变量是null还是undefined。

// 在原代码上添加修改
// main.js内容
// 定义变量并获取变量的值 获取事件
var button = document.querySelector("button");
var num1 = document.getElementById("num1") as HTMLInputElement; // as语句实现类型转换
var num1 = document.getElementById("num2") as HTMLInputElement; // as必须在ts的文件里写

// 求和函数（修改前）
/*function add(num1,num2){
    return num1.value + num2.value;
}*/
// 求和函数（TS修改后）
function add(num1:number,num2:number) {
    renturn num1 + num2;
}

// 按钮点击事件 点击调用加法函数
button.addEventListener("click",function() {
    console.log(add(num1.value,num2.value));
});

对于点击调用函数部分的代码修改如下：

// 按钮点击事件 点击调用加法函数
// 原生JS自带的数据转换
button.addEventListener("click",function() {
    console.log(add(parseInt num1.value,num2.value));
});
// 直接在字符串前面添加"+"
button.addEventListener("click",function(){
   console.log(add(+num1.value,+num2.value));
});

引出TS的第四个优势：TS能全面兼容JS的语法特性，不仅可以支持ES5的标准，甚至还可以支持原生ES6/7/8的标准。

// 改用es6中的箭头函数 完全兼容
button.addEventListener("click",() => {
    console.log(add(num1.value,num2.value));
});

完整代码示例如下：
html部分：

<head>
       <!-- 注意引入的一定是js文件 绝对不能是ts文件-->       
       <script src="main.js" defer><script>
<head>
<body>
       <input type="number" id="num1" placeholder="数字1">
       <input type="number' id="num2" placeholder="数字2">
       <button id="button">加起来<button>
<body>

js部分

// main.js内容
// 定义变量并获取变量的值 获取事件
var button = document.querySelector("button");
var num1 = document.getElementById("num1") as HTMLInputElement; // as语句实现类型转换
var num1 = document.getElementById("num2") as HTMLInputElement; // as必须在ts的文件里写

// 求和函数
function add(num1:number,num2:number) {
    renturn num1 + num2;
}

// 点击调用函数事件 
// 改用es6中的箭头函数 完全兼容
button.addEventListener("click",() => {
    console.log(add(num1.value,num2.value));
});