禹神TypeScript课程记录_尚学堂禹神 javascript 笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/u010398484/article/details/142970800

TypeScript与JavaScript的关系

TypeScript是一个基于JavaScript的扩展语言
TypeScript包含了JavaScript的所有内容
TypeScript增加了：静态类型检查、接口、泛型等很多现代开发特性，更适合大型项目。
TypeScript需要编译为JavaScript，然后才能在浏览器或其他环境运行。

为什么需要TypeScript

JavaScript 当年诞生时的定位是浏览器脚本语言，用于在网页中嵌入简单的逻辑，且代码量很少。
随着时间的推移，JavaScript 变得越来越流行，如今的 JavaScript 已经可以全栈编程
现如今的 JavaScript 应用场景比当年丰富的多，代码量也比当年大很多，随便一个JavaScript 项目的代码量，可以轻松的达到几万行，甚至十几万行!
然而 JavaScript 当年“出生简陋”，没考虑到如今的应用场景和代码量，逐渐就出现了很多困扰

JavaScript中的困扰

不清不楚的数据类型
有逻辑的漏洞
访问不存在的属性
低级的拼写错误

静态类型检查

在代码运行前进行检查，发现代码的错误或不合理之处，减小运行时出现异常的几率，此种检查叫『静态类型检查』，TypeScript 和核心就是『静态类型检查』，简言之就是把运行时的错误前置。
同样的功能，TypeScript 的代码量要大于 JavaScript，但由于 TypeScript 的代码结构更加清晰，在后期代码的维护中 TypeScript 却胜于 JavaScript。

编译TypeScript

浏览器不能直接运行TypeScript代码，需要编译为JavaScript再交由浏览器解析器执行。

命令行编译

创建demo.ts文件

const person = {
    name: '张三',
    age: 10
}
console.log(`我叫${person.name}, 今年：${person.age}岁`);

安装TypeScript

npm i typescript -g

编译TypeScript

tsc demo.ts

自动化编译

创建TypeScript编译控制文件

tsc --init

tsc --watch 或 tsc --w

编译出错时，不生成js文件

在tsconfig.json文件中，放开配置的注释即可。

"noEmitOnError": true

或在启动时添加
tsc --noEmitOnError --watch

类型声明

声明格式

let 变量:类型

变量-设置类型

let a:string //只能存字符串类型
let b:number //只能存数字类型
let c:boolean //只能存布尔类型

a = "hello";
//a = 100 不能把100赋值给a
b = 10;
c = true

注意：类型必须声明后才能使用，否则会报错。

方法-设置类型

// 设置参数类型和返回值类型
function sum(a: number, b: number):number{
  return a + b;
}
sum(1,2);//调用sum时，必须传入数字类型

字面量类型

let x:'hello';
x = 'hello';

x只能为'hello'。

类型推断

TypeScript会根据我们的代码进行类型推导。

let d = 'abc';
d = 9;//类型不同，赋值会报错

变量d的类型为字符串，不能赋值数字

注意：类型推断面对复杂类型时容易出问题，所以还是要明确的编写类型声明。

类型总览

JavaScript数据类型

string
number
boolean
null
undefined
bigint
symbol
object

object类型又包括：Array，Function，Date等。。。

TypeScript数据类型

包含JavaScript的数据类型
新增6个类型

1. any
2. unkown
3. never
4. void
5. tuple
6. enum

两个自定义类型的方式

1. type
2. interface

包装类型

在JavaScript中的这些内置构造函数：String， Number， Boolean用于创建对应的包装类型，在日常开发中很少使用。因此在TypeScript中进行类型声明，通常使用的是小写的：string， number，boolean这种原生数据类型。

let test:string
test = "abc"
// test = new String();

let test1:String
test1 = "def"
test1 = new String();

console.log(typeof test); //输出：string
console.log(typeof test1); //输出：object

原始类型 VS 包装类型

原始类型:如 number、string、boolean ，在 JavaScript 中是简单数据类型，它们在内存中占用空间少，处理速度快。
包装对象:如 Number 对象、String 对象、 Boolean 对象，是复杂类型，在内存中占用更多空间，在日常开发时很少由开发人员自己创建包装对象。
自动装箱：JavaScript 在必要时会自动将原始类型包装成对象，以便调用方法或访问属性。

代码

let str = 'hello'
console.log(str.length);

内部执行逻辑：