【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()
类型检查提示
三、非异常故障
1、JavaScript 示例
代码示例
const user = {
name: "大哥",
age: 25
}
console.log(user.location)运行结果
2、TypeScript 示例
代码示例
const user = {
name: "大哥",
age: 25
}
console.log(user.location)检查结果
3、TypeScript 错别字提示
代码示例
const user = {
name: "大哥",
age: 25
}
console.log(user.nam)检查结果
4、TypeScript 未调用函数提示
代码示例
let say = () => {
return 1
}
say + 1 // 报错
say() + 1 // 正常检查结果
5、TypeScript 逻辑错误提示
代码示例
const value = Math.random() < 100 ? 'a' : 'b'
if (value !== 'a') {
} else if (value === 'b') { // 报错！
}
检查结果
四、实用工具
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
编译结果
运行该 js 文件
得到了预想的结果！
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 冲突）；
五、优化编译，解决问题
1、解决 TS 与 JS 冲突问题
命令
tsc --init # 生成配置文件
演示
关于参数报错问题
参数报错问题暂且放置，我们暂时先关闭严格模式！
最终结果
2、自动编译
命令
tsc --watch
演示
此时即实现了，当 ts 文件报错的时候，自动编译成对应的 js 文件，即 js 文件随着 ts 文件的保存而与 ts 文件保持同步！
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("訾博")报错
编译结果
function say(name, age) {
console.log(`my name is ${name}, I am ${age} years old!`);
}
say("訾博");运行 js 代码
执行命令
使得 ts 报错时不生成 js 文件！（提前把之前编译的 js 文件删除！）
比较
六、显式类型
1、开启严格模式
修改配置文件
报错了
2、显式类型
定义显式类型
3、类型推断
并非一定要显式定义类型！
代码示例
// 类型推断
let message = "hello ts!"
message = "hello world!"
message = 100 // 报错：不能将类型“number”分配给类型“string”。
报错
七、降级编译
1、发现问题
ES6语法
浏览器兼容问题
**并非所有的浏览器都兼容 ES6 语法！**我们需要”降级编译“！
不过，大多数浏览器都已经支持 ES6 了！ES2015 就是 ES6！
2、降级编译
修改配置文件
编译结果
测试完之后，我把 target 恢复到了默认的 es2016 ，即 ES7！
八、严格模式
1、相关配置内容
tsconfig.json 文件：新开发的项目应该全部打开这些严格性检查！
/* Type Checking */
"strict": true, // 严格模式
"noImplicitAny": true, // 禁止隐式类型为 any
"strictNullChecks": true // 开启 null 和 undefined 的检查
2、严格模式
严格模式下报错演示
关闭严格模式
做项目迁移时这么做！一般不这么做！
问题
关闭严格模式，类型隐式推断为 any 类型，也就回到了普通的 js 代码的效果了，与是否使用 ts 无区别！我们可以 strict 严格模式，我们呢也可以将 noImplicitAny 设置为 true。
3、noImplicitAny
含义
禁止隐式 any 类型！
是否开启
**建议开启！**开启之后如严格模式一样，没有声明类型的变量会报“……隐式具有 any 类型”的错误！
4、strictNullChecks
含义
是否开启 null 和 undefined 的检查！
没开启的情况演示
此时未开启严格模式！开启了
noImplicitAny！
开启 strictNullChecks 之后
当前配置
关闭下面两个，开启严格模式也能达到同样的效果！
