typescript | 了解typescript + 搭建typescript开发环境 +类型声明 + 编译选项 + 使用webpack打包ts代码 +Babel

不爱吃菜的蔡菜

已于 2022-09-23 13:14:43 修改

阅读量280

点赞数

分类专栏： TypeScript 文章标签： typescript javascript 前端

于 2022-09-20 00:16:00 首次发布

本文链接：https://blog.csdn.net/muziqwyk/article/details/126925649

版权

TypeScript简介

TypeScript是JavaScript的超集。
它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
TS完全兼容JS，换言之，任何的JS代码都可以直接当成TS使用。
相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；
TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；
TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

TypeScript 开发环境搭建

下载Node.js
安装Node.js
使用npm全局安装typescript
- 进入命令行
- 输入：npm i -g typescript
创建一个ts文件
使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令：tsc xxx.ts

基本类型

类型声明

通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

变量a 指定类型为number，就不能赋值为其他类型

函数中也可以进行类型声明，在函数中对参数进行类型声明的话，传参就要传指定类型的参数

函数中的返回值也可以类型声明

简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

语法：

      let 变量: 类型;
      
      let 变量: 类型 = 值;
      
      function fn(参数: 类型, 参数: 类型): 返回值类型{
   
          ...
      }

自动类型判断

TS拥有自动的类型判断机制
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型

所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

let a = 10; // 变量的声明和赋值是同时进行的，所以可以省略掉类型声明
a = 'hello'; // 会报错，因为已经声明a变量为number，就不能再赋值为string类型

类型：

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”, `hi`	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:‘孙悟空’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

number

    let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    let big: bigint = 100n;

boolean

   let isDone: boolean = false;

string

   let color: string = "blue";
   color = 'red';
   
   let fullName: string = `Bob Bobbington`;
   let age: number = 37;
   let sentence: string = `Hello, my name is ${
     fullName}.
   
   I'll be ${
     age + 1} years old next month.`;

字面量

也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
限制变量的值就是该字面量的值

// 可以使用 | 来连接多个类型(联合类型)
let b: 'male' | 'female';
b = 'male';
b = 'hello'; // 报错

let c: boolean | string;
c = true;
c = 'hello';

any（尽量不要用）

any 表示任意类型，可以任意赋值（一个变量设置类型为any后，相当于对该变量关闭了TS的类型检测）

不建议使用any！！！

// any 表示任意类型，可以任意赋值
let d; // 隐式any(TS解析器会自动判断变量的类型为any)
let d:any; // 显示any
d = 10;
d = 'hello';
d = true;

用了any，可以赋值给任何变量

let s: string;
// d的类型是any，它可以赋值给任意变量
s = b;

unknown

unknow 实际上是一个类型安全的any
unknow 类型的变量不能赋值给其他变量
如果要赋值的话，可以进行 ①类型判断 ②类型断言

// unknown 表示未知类型的值
let e: unknown;
e = 10;
e = 'hello';

let s: string;
// unknow 实际上是一个类型安全的any
// unknow 类型的变量不能赋值给其他变量
if (typeof e === 'string') {
    // 类型判断
   s = e; // 不报错
}
s = e; // 报错!!

void

void 表示空，以函数为例，表示没有返回值的函数（或者undefined）

// void 表示空,以函数为例,表示没有返回值的函数
function fn(): void {
   
   return 123; // 报错！！因为有返回值
   return undefined; // 不报错
}

never

never 表示永远不会返回结果

// never 表示永远不会返回结果
function fn1():never{
   
   throw new Error(

最低0.47元/天解锁文章