【TypeScript 4.5】002-第 2 章 TypeScript 入门

刺骨的言语ヽ痛彻心扉 2023-10-01 16:46 11阅读 0赞

# 【TypeScript 4.5】002-第 2 章 TypeScript 入门 #

### 文章目录 ###

*  【TypeScript 4.5】002-第 2 章 TypeScript 入门
 *  一、发现问题
 *   *  1、字符串
     *  2、函数
     *  3、JavaScript 局限
 *  二、解决问题：静态类型检查
 *   *  1、在代码运行之前发现错误
     *  2、静态类型检查
     *   *  代码示例
         *  类型检查提示
 *  三、非异常故障
 *   *  1、JavaScript 示例
     *   *  代码示例
         *  运行结果
     *  2、TypeScript 示例
     *   *  代码示例
         *  检查结果
     *  3、TypeScript 错别字提示
     *   *  代码示例
         *  检查结果
     *  4、TypeScript 未调用函数提示
     *   *  代码示例
         *  检查结果
     *  5、TypeScript 逻辑错误提示
     *   *  代码示例
         *  检查结果
 *  四、实用工具
 *   *  1、环境安装
     *   *  安装 VSCode
         *  安装 Node.js
         *  安装 TypeScript 编译器
     *  2、编译 ts 文件
     *   *  示例代码 hello.ts
         *  编译 ts 文件
         *  编译结果
         *  运行该 js 文件
     *  3、写点 ts 代码看看
     *   *  代码示例 hello.ts
         *  再次编译结果 hello.js
         *  发现的问题
 *  五、优化编译，解决问题
 *   *  1、解决 TS 与 JS 冲突问题
     *   *  命令
         *  演示
         *  关于参数报错问题
         *  最终结果
     *  2、自动编译
     *   *  命令
         *  演示
     *  3、发出错误
     *   *  命令
         *  制造一个错误代码
         *  报错
         *  编译结果
         *  运行 js 代码
         *  执行命令
         *  比较
 *  六、显式类型
 *   *  1、开启严格模式
     *   *  修改配置文件
         *  报错了
     *  2、显式类型
     *   *  定义显式类型
     *  3、类型推断
     *   *  代码示例
         *  报错
 *  七、降级编译
 *   *  1、发现问题
     *   *  ES6语法
         *  image-20220121151848216
         *  浏览器兼容问题
     *  2、降级编译
     *   *  修改配置文件
         *  编译结果
 *  八、严格模式
 *   *  1、相关配置内容
     *  2、严格模式
     *   *  严格模式下报错演示
         *  关闭严格模式
         *  问题
     *  3、noImplicitAny
     *   *  含义
         *  是否开启
     *  4、strictNullChecks
     *   *  含义
         *  没开启的情况演示
         *  开启 strictNullChecks 之后
         *  当前配置

# 一、发现问题 #

## 1、字符串 ##

const message = "Hello World"
    message.toLowerCase(); // 得到“hello world”
    message(); // 报错：TypeError：message is not a funtion

## 2、函数 ##

function fn(x) {
        
        return x.flip();
    }
    // 可知，要成功执行上面函数内容代码是要满足一定条件的，那就是 x 必须能够调用 flip() 方法；

## 3、JavaScript 局限 ##

JavaScript 只能在**运行时**发现错误！

# 二、解决问题：静态类型检查 #

## 1、在代码运行之前发现错误 ##

像 TypeScript 等类型检查工具，可以做到**在代码运行之前发现错误**！

## 2、静态类型检查 ##

### 代码示例 ###

const message = "hello world!"
    message()

### 类型检查提示 ###

![image-20220113143806038][]

# 三、非异常故障 #

## 1、JavaScript 示例 ##

### 代码示例 ###

const user = {
        
        name: "大哥",
        age: 25
    }
    console.log(user.location)

### 运行结果 ###

![image-20220113144216963][]

## 2、TypeScript 示例 ##

### 代码示例 ###

const user = {
        
        name: "大哥",
        age: 25
    }
    console.log(user.location)

### 检查结果 ###

![image-20220113144339944][]

## 3、TypeScript 错别字提示 ##

### 代码示例 ###

const user = {
        
        name: "大哥",
        age: 25
    }
    console.log(user.nam)

### 检查结果 ###

![image-20220113144713685][]

## 4、TypeScript 未调用函数提示 ##

### 代码示例 ###

let say = () => {
        
        return 1
    }
    say + 1 // 报错
    say() + 1 // 正常

### 检查结果 ###

![image-20220113145204885][]

## 5、TypeScript 逻辑错误提示 ##

### 代码示例 ###

const value = Math.random() < 100 ? 'a' : 'b'
    if (value !== 'a') {
        
    
    } else if (value === 'b') {
         // 报错！
        
    }

### 检查结果 ###

![image-20220121132625206][]

# 四、实用工具 #

## 1、环境安装 ##

> 这里省略了，网上有很多相关教程！

### 安装 VSCode ###

https://www.visualstudio.com/Download

### 安装 Node.js ###

https://nodejs.org/en/download

### 安装 TypeScript 编译器 ###

npm install -g typescript

## 2、编译 ts 文件 ##

### 示例代码 hello.ts ###

console.log("Hello TS!")

### 编译 ts 文件 ###

tsc .\hello.ts

![image-20220121134849987][]

### 编译结果 ###

![image-20220121134958349][]

### 运行该 js 文件 ###

> 得到了预想的结果！

![image-20220121135225477][]

## 3、写点 ts 代码看看 ##

### 代码示例 hello.ts ###

function say(name, age) {
        
        console.log(`my name is ${
          name}, I am ${
          age} years old!`)
    }
    say("訾博", 25)

### 再次编译结果 hello.js ###

function say(name, age) {
        
        console.log("my name is ".concat(name, ", I am ").concat(age, " years old!"));
    }
    say("訾博", 25);

### 发现的问题 ###

*  修改 ts 代码之后每次都需要使用 tsc **手动编译**；
 *  提示错误：函数实现重复（**TS 与 JS 冲突**）；
    
    ![image-20220121140439707][]

# 五、优化编译，解决问题 #

## 1、解决 TS 与 JS 冲突问题 ##

### 命令 ###

tsc --init # 生成配置文件

### 演示 ###

![image-20220121141530932][]

### 关于参数报错问题 ###

> 参数报错问题暂且放置，我们暂时先关闭**严格模式**！

![image-20220121141812405][]

### 最终结果 ###

![image-20220121141916939][]

## 2、自动编译 ##

### 命令 ###

tsc --watch

### 演示 ###

> 此时即实现了，当 ts 文件报错的时候，**自动编译**成对应的 js 文件，即 js 文件随着 ts 文件的保存而与 ts 文件**保持同步**！

![image-20220121142217849][]

## 3、发出错误 ##

> ts 报错的时候，可以正常编译成 js 文件，并可以运行！我们想当 ts 报错的时候不生成 js 文件，加上 -noEmitOnError 参数！

### 命令 ###

tsc -noEmitOnError hello.ts

### 制造一个错误代码 ###

function say(name, age) {
        
        console.log(`my name is ${
          name}, I am ${
          age} years old!`)
    }
    say("訾博")

### 报错 ###

![image-20220121144652717][]

### 编译结果 ###

function say(name, age) {
        
        console.log(`my name is ${
          name}, I am ${
          age} years old!`);
    }
    say("訾博");

### 运行 js 代码 ###

![image-20220121144809760][]

### 执行命令 ###

> 使得 ts 报错时不生成 js 文件！（提前把之前编译的 js 文件删除！）

![image-20220121145326785][]

### 比较 ###

![image-20220121145448979][]

# 六、显式类型 #

## 1、开启严格模式 ##

### 修改配置文件 ###

![image-20220121145733154][]

### 报错了 ###

![image-20220121145810830][]

## 2、显式类型 ##

### 定义显式类型 ###

![image-20220121150801728][]

## 3、类型推断 ##

> 并非一定要显式定义类型！

### 代码示例 ###

// 类型推断
    let message = "hello ts!"
    message = "hello world!"
    message = 100 // 报错：不能将类型“number”分配给类型“string”。

### 报错 ###

![image-20220121151515626][]

# 七、降级编译 #

## 1、发现问题 ##

### ES6语法 ###

### ![image-20220121151848216][] ###

### 浏览器兼容问题 ###

\*\*并非所有的浏览器都兼容 ES6 语法！\*\*我们需要”**降级编译**“！

**不过，大多数浏览器都已经支持 ES6 了！ES2015 就是 ES6！**

## 2、降级编译 ##

### 修改配置文件 ###

![image-20220121152353404][]

### 编译结果 ###

> 测试完之后，我把 target 恢复到了默认的 es2016 ，即 ES7！

![image-20220121152422331][]

# 八、严格模式 #

## 1、相关配置内容 ##

> tsconfig.json 文件：新开发的项目**应该全部打开**这些严格性检查！

/* Type Checking */
    "strict": true, // 严格模式
    "noImplicitAny": true, // 禁止隐式类型为 any
    "strictNullChecks": true // 开启 null 和 undefined 的检查

## 2、严格模式 ##

### 严格模式下报错演示 ###

![image-20220128143700689][]

### 关闭严格模式 ###

> 做项目迁移时这么做！**一般不这么做！**

![image-20220128143927657][]

### 问题 ###

关闭严格模式，类型隐式推断为 any 类型，也就回到了普通的 js 代码的效果了，与是否使用 ts 无区别！我们可以 `strict` 严格模式，我们呢也可以将 `noImplicitAny` 设置为 `true`。

## 3、noImplicitAny ##

> 参考文章：https://segmentfault.com/a/1190000019768261

### 含义 ###

禁止隐式 any 类型！

### 是否开启 ###

\*\*建议开启！\*\*开启之后如严格模式一样，**没有声明类型的变量**会报“……隐式具有 any 类型”的错误！

## 4、strictNullChecks ##

### 含义 ###

是否开启 null 和 undefined 的检查！

### 没开启的情况演示 ###

> 此时未开启严格模式！开启了 `noImplicitAny`！

![image-20220128145526668][]

### 开启 strictNullChecks 之后 ###

![image-20220128145559705][]

### 当前配置 ###

> **关闭下面两个，开启严格模式也能达到同样的效果！**

![image-20220128145637352][]

[image-20220113143806038]: https://img-blog.csdnimg.cn/img_convert/1c5d4ae6a959119be4c9cfc4c16e0a25.png
[image-20220113144216963]: https://img-blog.csdnimg.cn/img_convert/eef81e9371aaa26dccd89c3e42a3d15a.png
[image-20220113144339944]: https://img-blog.csdnimg.cn/img_convert/369fa03b7e5daf95b6f38e6595110bd8.png
[image-20220113144713685]: https://img-blog.csdnimg.cn/img_convert/35d2a82f92718b7eab7b475e1a3862b7.png
[image-20220113145204885]: https://img-blog.csdnimg.cn/img_convert/f346b1f7a2492cad5bfd2e05c4d20b50.png
[image-20220121132625206]: https://img-blog.csdnimg.cn/img_convert/4167f76a9c42421edca287584d3124f2.png
[image-20220121134849987]: https://img-blog.csdnimg.cn/img_convert/5e2bfbf7a3b92d1cb35ee930a58c1f40.png
[image-20220121134958349]: https://img-blog.csdnimg.cn/img_convert/730afb56309380fe6d8dd1f4a58120e0.png
[image-20220121135225477]: https://img-blog.csdnimg.cn/img_convert/5a645b1e63fdd18dda991950d0dc8d2e.png
[image-20220121140439707]: https://img-blog.csdnimg.cn/img_convert/157bee0709238c7f89c3b0a99d645470.png
[image-20220121141530932]: https://img-blog.csdnimg.cn/img_convert/ef57ce06432e1edb84999d4bfed577ca.png
[image-20220121141812405]: https://img-blog.csdnimg.cn/img_convert/798fce9323842e7dddfce29170981e2a.png
[image-20220121141916939]: https://img-blog.csdnimg.cn/img_convert/9038bd5cb7f56e1affb898caa92b4ce3.png
[image-20220121142217849]: https://img-blog.csdnimg.cn/img_convert/04ec289eb1f8a7808380259e2665a815.png
[image-20220121144652717]: https://img-blog.csdnimg.cn/img_convert/4898f0ce8425c8c982909a9112ea4354.png
[image-20220121144809760]: https://img-blog.csdnimg.cn/img_convert/d0e1c6700ba6ba5d8618144a222e9580.png
[image-20220121145326785]: https://img-blog.csdnimg.cn/img_convert/43fbe9f008de018f26819f10a4278dc9.png
[image-20220121145448979]: https://img-blog.csdnimg.cn/img_convert/1645dd5e0213ebcf1a21a44d4243cba5.png
[image-20220121145733154]: https://img-blog.csdnimg.cn/img_convert/30d4cd812ae20aaff3952794ebcaacfe.png
[image-20220121145810830]: https://img-blog.csdnimg.cn/img_convert/0272d767f25b944293edd7aa114d6766.png
[image-20220121150801728]: https://img-blog.csdnimg.cn/img_convert/e7a358ca5b13a6bd0bb1ac923854c28e.png
[image-20220121151515626]: https://img-blog.csdnimg.cn/img_convert/c7b19cfebba474de66b2d2368432680b.png
[image-20220121151848216]: https://img-blog.csdnimg.cn/img_convert/b4a52f6acf8bb60c12a2ac5143328b8c.png
[image-20220121152353404]: https://img-blog.csdnimg.cn/img_convert/4b677264d60282106bd47a7ce7d11567.png
[image-20220121152422331]: https://img-blog.csdnimg.cn/img_convert/a61ad0a66383962a946cfea0fe5c4272.png
[image-20220128143700689]: https://img-blog.csdnimg.cn/img_convert/44d7a52120796c21eb1540d0381e3326.png
[image-20220128143927657]: https://img-blog.csdnimg.cn/img_convert/15ae83333f5ec6bea8637448c09d4f41.png
[image-20220128145526668]: https://img-blog.csdnimg.cn/img_convert/ea9602dc102f6948f3743657e5e0cd92.png
[image-20220128145559705]: https://img-blog.csdnimg.cn/img_convert/293aea32806765e833a0c3de078dbc20.png
[image-20220128145637352]: https://img-blog.csdnimg.cn/img_convert/25ae205bc0e043aee956f724ead70065.png