TypeScript从入门到精通图形视频教程-2020年的新版本

我最初计划更新Vue3.x教程. 由于官方文档尚未发布，所以我不敢谈论它，因此我将首先准备TypeScript教程. TypeScript已在我们公司中完全使用. 现在，招聘过程中还要求您必须熟练使用TypeScript. 我之前也发布过TypeScript教程，但是那太简单了，而且不够深入. 因此，在这段空白期间，准备自己重新学习TypeScript，然后提出更完整的教程.

尝试成为整个网络上最好的免费TypeScript图形视频教程.

以前的TypeScript教程在这里: TypeScript免费视频教程，Deno的预知识（15集）

在这里，我建议您耐心等待并学习最新版本的“ TypeScript从入门到熟练的图形视频教程”，以便您对TypeScript有更好的了解.

TypeScript由Microsoft于2012年正式发布，现在已经持续更新和维护了8年. TypeScript的增长速度非常快，现在已经成为前端肯定会知道的一项技能. TypeScript实际上是JavaScript的超集，这意味着TypeScript建立在JavaScript之上，并将最终转换为JavaScript. 这就像漫威中的钢铁侠. 在穿盔甲之前，他的力量中等. 尽管他很聪明，很富有，但他仍然与人类亲近. 但是有了盔甲，他太强大了，甚至可以与众神作战.

也许您会说我说得太夸张了. 刚开始学习时，我的想法是一样的，但是花了大约2年的时间，尤其是在大型项目中，它确实很容易使用. 例如，它的扩展语法，面向对象和静态类型. 如果我可以领导一个前端项目，则强烈要求每个人都使用TypeScript语法进行编程.

我所有的前端课程都是使用VSCode编写的，因为这是我在工作中使用最多的编辑器，而目前我认为是最好的编辑器.

下载地址:

如果您已经参与了这项工作，我相信您周围至少80％的前端正在使用此编辑器.

使用VSCode进行解释，同时也主要希望它们都是Microsoft的产品，因此它们具有良好的兼容性和支持. 专门针对VSCode上的TypeScript进行了许多语法改编，因此在编写时会轻松愉快.

如果要使用TypeScript编写代码，则需要先安装其开发环境，这并不复杂.

1. 安装Node的操作环境

您可以转到Node.js的官方网站下载并安装Node. 建议您下载LTS版本，这是长期支持版本. 我不会演示安装过程. 此过程与安装QQ一样，没有任何困难.

如果已经安装，则可以打开命令行工具，然后使用node -v命令查看已安装的版本，但是通常需要检查一个命令，即npm -v，如果这两个命令都可以输出版本号，表明您的Node安装没有问题.

2. 全局安装typeScript

如果要使用TypeScript，则需要在系统上全局安装TypeScript. 在这里您可以直接在VSCode中安装它. 安装命令可以使用npm或yarn

npm install typescript -g

yarn global add typescript

您可以使用这两种方法之一，也可以根据自己的喜好进行选择，我在视频中使用npm进行安装.

3. 创建项目目录并编译TS文件

在E驱动器中（当然您可以将其安装在所需的任何位置），创建一个新目录，我从其开始的目录的名称称为TypeScriptDemo，然后在VSCode中打开此文件. 我使用命令行构建了视频，直接使用ctrl + r打开运行，然后在运行的文本框中输入cmd，按Enter，打开命令行工具，在命令行中输入以下命令.

e:
mkdir TypeScriptDemo

完成后，打开E驱动器，打开VSCode，将新创建的文件夹拖到VSCode中，创建一个新的Demo1.ts文件，并编写以下代码:

 function jspang(){
    let web: string="Hello World"
    console.log(web)
 }
 jspang()

这时，您无法成功使用Node Demo1.ts，因为Node无法直接运行TypeScript文件，您需要使用tsc Demo1.ts对其进行转换. 转换后，将typeScript代码编译为javaScript代码，并生成一个新的demo1. .js文件，这时您在命令行上输入节点Demo1.js，就可以在终端中顺利输出jspang字符.

4. ts-node的安装和使用

但是，此操作的效率太低. 您可以使用ts-node插件来解决此问题. 使用此插件，我们不再需要编译，并且使用ts-node可以直接查看编写结果.

使用npm命令进行全局安装，直接在命令行中输入以下命令:

npm install -g ts-node

安装完成后，可以在命令中直接输入以下命令以查看结果.

ts-node Demo1.ts

好的，今天学到了很多东西，恭喜您学习了新的编程技能，朋友们，加油！ ！ ！

TypeScript的主要功能之一是它可以定义静态类型. 英语是静态打字. 那是什么意思？过于复杂的概念性内容将不在此人，那你就是女人. 这件事不能改变！嗯...现在似乎可以随便更改了，这是正常情况. 但是它也有一些特性jsp从入门到精通高清版，这不像表面那么简单. 现在让我们学习.

您可以在上一课的文件夹中创建一个新的demo2.ts文件，然后编写以下代码:

const count : number = 1;

这是定义数字类型计数的最简单变量，此处: number是定义静态类型. 在定义之后，计数变量在程序中始终是数字类型，无法更改. 例如，如果我们此时复制要计数的字符串，它将报告错误.

//错误代码
const count : number = 1;
count = 'jspang'

但这只是最简单的理解. 如果深入研究，您会发现此时的count变量可以使用数字类型的所有属性和方法. 我们可以在计数后输入一个来看到此功能. 编辑器将为您提供很好的提示. 这就是为什么我喜欢使用VScode编辑器的原因之一.

您还可以自己定义静态类型，例如，现在定义年轻女士的类型，然后可以在life变量中使用此静态类型，请参见下面的代码.

interface XiaoJieJie {
    uname: string ,
    age:number
} 
const  xiaohong : XiaoJieJie ={
    uname: '小红',
    age: 18
}

如果此时声明变量，则该变量与custom不同，VSCode将直接报告错误. 应该注意的是jsp从入门到精通高清版，此时，xiaohong变量还具有uname和age属性.

在本课程中，您需要记住的是，如果您使用静态类型，则不仅意味着不能更改变量的类型，而且还确定了类型的属性和方法. 此功能大大提高了程序的健壮性，并且此时编辑器还将为您提供良好的语法提示，从而提高了开发效率.

随着您继续深入学习，您将对这两个优点有更深入的了解.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-278136-1.html