TypeScript是什么？TypeScript入门，第四遍学习——拨开TypeScript掀开过又关上的面纱(*￣rǒ￣)

本文链接：https://blog.csdn.net/putao2062/article/details/109159431

我的映像里这是第四遍查看ts的文档了，在我的公开的博客中有关ts的记录是2019年1月10日，距离今天都21个月零9天了。但遗憾的是，我仍然没有在实际开发的项目中去使用它。
这家公司要求会用TypeScript，无论如何总不能看不懂别人的代码吧，所以得去熟悉熟悉。

什么是TypeScript？

我用手机看了下自个写的博客，发现看不清图片上的文字，算了，为了自个以后手机上看着方便，
我自己把字标在图上的，那就还是自己把字抠出来 👇 ┑(￣Д ￣)┍
1.一种用来构建的语言
2. 磨刀霍霍指向：JavaScript类型
3.载体：文档
4.文档作用：告诉TypeScript用这个类型去验证代码
5.可以不写文档：自带的类型推断有大量功能
6.类型检查报错：看到了可以不用奇怪，代码会正常出结果
7.需要转换：浏览器，nodejs，不认识TypeScript这种语言
8.不喜欢TypeScript的检查有办法给跳过

TypeScript 是个构建语言，用来捯饬Javascript 的静态类型的，不编译没法用。
解读完什么是TypeScript后，心里面有谱了，就搭建项目的时候配置上TypeScript，然后除了会多一些类型检查的报错，也不影响代码的运行。(￣_,￣ )
报错先骗自己看不见，然后安心继续用之前的习惯正常写自己的代码，去除不会使用TypeScript的恐惧。(u‿ฺu✿ฺ)
写着写着，就会对那些类型检查的报错产生好奇，然后想看它报了些啥。这样我与TypeScript的故事就可以开始了(๑•̀ㅂ•́)و✧

搭建项目配置TypeScript

npm install -g typescript   # 安装
npx tsc  # 运行编译器

创建一个名为typescript的孤本分支

在这里插入图片描述

npm init   #初始化一个package.json文件

结果👇 意外发现居然自动添加上了README.md中的第一句话，并且自动获取了相关github的连接地址文本。
在这里插入图片描述

安装typescript

因为想看typescript的源代码，所以没有采取全局安装，而是选择装在了当前项目中的并且 --save-dev

cnpm i --save-dev typescript

结果 👇
在这里插入图片描述

空的运行下 npx tsc

结果 👇 可看到 tsc的语法、例子、命令选项
在这里插入图片描述

typescript文档

https://www.typescriptlang.org/docs/handbook

手册文档页蓝色超链接总共 65条

JS程序员的TS

在这里插入图片描述

我用手机看了下自个写的博客，发现看不清图片上的文字，算了，为了自个以后手机上看着方便，
我自己把字标在图上的，那就还是自己把字抠出来 👇 ┑(￣Д ￣)┍
1.第一句话的意思：TypeScript = Javascript + 类型系统
2.代码中会出现各种波浪号提醒我们，可以减少错误的机会
3.推论类型：根据变量值推断变量的类型

interface 声明描述对象

在这里插入图片描述

我用手机看了下自个写的博客，发现看不清图片上的文字，算了，为了自个以后手机上看着方便，
我自己把字标在图上的，那就还是自己把字抠出来 👇 ┑(￣Д ￣)┍
1.接口声明对象中各个属性值得类型
2.变量后面冒号：召唤声明好的接口对象User
3.not assignable 意思是不匹配
4.Object literal 意思是对象声明 specify 意思是详细说明

支持类和面向对象的编程

在这里插入图片描述

我用手机看了下自个写的博客，发现看不清图片上的文字，算了，为了自个以后手机上看着方便，
我自己把字标在图上的，那就还是自己把字抠出来 👇 ┑(￣Д ￣)┍

1.JavaScript支持类和面向对象的编程，使用TypeScript 就可以使用（后端同学们）熟悉的语法来面向对象啦。

看完上面的文档：简单总结一下

1、基本出现冒号 ,这就大概率后面跟着类型了呗（除了三元运算符）
： someletter

2、出现的位置

interface 对象，属性key 的后面，原本对象写值得地方不写值写成了类型名。
类 class {}定义时直接写未赋值的属性key 后面
构造器函数constructor（）中的参数后面，
定义变量const 变量名后面，可跟接口声明的对象类型
定义函数function () 的参数后面，括号后面，可跟接口声明的对象类型

基本类型：boolean，bigint，null，number，string，symbol，object，和undefined，
在这里插入图片描述

组成类型

总结：组成类型就是 type 和竖杠 | 扎堆了一堆值
声明函数参数中无type 扎堆一堆参数
在这里插入图片描述

我用手机看了下自个写的博客，发现看不清图片上的文字，算了，为了自个以后手机上看着方便，
我自己把字标在图上的，那就还是自己把字抠出来 👇 ┑(￣Д ￣)┍

1.几个简单类型扎堆 = 复杂类型
2. 关键字type （扎堆前提得有type）
3.用竖杠 | 来标识扎堆的行为，实际扎堆的是一堆不同的值？
4.竖杠 | 扎堆的文本
5.竖杠 | 扎堆的数字
6.竖杠 | 扎堆的函数参数

扎堆是联合类型的语法外在表现，哈哈哈

要了解变量的类型，请使用typeof：
用法typeof s === “string”

在这里插入图片描述

数字的类型识别方法不用 typeof 用 Array.isArrsy(被测试的值）数组自带检测的方法。

泛型

类型名称后跟着<> ,这个语法看着有些奇怪，后面用到再适应吧…
在这里插入图片描述
泛型 generics
中文翻译泛型总是让我感觉理解不了很神秘(⊙﹏⊙)

来来来，从英文单词的词源下手，试着去理解下 o(^＠)o

词根 gener- 种类的意思，同义词 kind
比较熟悉的这个词根的另一个相关词语是 general (一般，普遍，综合，大体)

generic 就是 general 去掉 al 换上 ic

gener- kind s 种类多，中文泛泛而谈，泛泛型，泛型！好像记住了…

算了，自己造个对应的泛型的词语吧 kinds type ✧(≖ ◡ ≖✿)
看这type，好多，这就是泛型
在这里插入图片描述

完成TypeScript 工具

跟着这个文档实践体验一把呗

https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html

tsc greeter.ts报错

tsc : 无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置行:1 字符: 1

👇
在这里插入图片描述

尝试 npx tsc --init 👇 多了tsconfig.json文件，nodemodules中多了两个文件夹
在这里插入图片描述
然而没什么用 👆

只好全局安装 npm install -g typescript

仍然报错 👇

tsc : 无法加载文件 C:\Users\CXZ\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about
_Execution_Policies。

在这里插入图片描述