TypeScript——2021最新学习心得总结

最新推荐文章于 2024-01-06 20:18:31 发布

前端技术迷

最新推荐文章于 2024-01-06 20:18:31 发布

阅读量320

点赞数

分类专栏： TypeScript 文章标签： typescript javascript js vue.js reactjs

本文链接：https://blog.youkuaiyun.com/qq_39347364/article/details/112299082

版权

TypeScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了TypeScript的基本概念、环境安装与运行，重点讲解了变量、数组、元组、枚举、任意类型、空类型、接口、联合类型以及函数的使用。通过实例展示了TypeScript如何提升开发效率和代码质量，尤其在企业级前端开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TypeScript

未来前端的发展逐步挺近企业级的开发业务，强类型的typescript已经广泛普及使用

优势一：
类型化思维方式，使得开发更加严谨，提前发现错误，减少改bug事件
优势二：
类型系统提高了代码可读性，并使维护和重构代码更加容易
优势三：
补充了接口、枚举等开发大型应用时JS缺失的功能

TypeScript环境安装与运行

安装：npm install -g typescript

初始化生成tsconfig.json配置文件：tsc --init

编译成js：tsc ./index.ts

三步让vscode自动将ts文件编译为js文件

运行：tsc --init，创建tsconfig.json文件
修改tsconfig.json文件，设置js文件夹：“outDir”: “./js/”
设置vscode监视任务，之后修改项目中的ts，自动生成js

变量

在TS中，为变量指定了类型，就只能给这个变量设置相同类型的值
原有类型
string
number
boolean：在ts中只有true和false
Array：需要声明时指定数组中元素的类型
null
undefined
synbol
Object
新增类型
tuple元组
enum枚举
any任意类型
never
void

数组

方式一：let 数组名: 类型[] = [值1, 值2];
let arr: number[] = [1, 2, 3, 4, 5];
方式二：let 数组名: Array<类型> = [值1, 值2];
let arr: Array = [1, 2, 3, 4, 5];

元组(tuple)

ts中数组元素类型必须一致，元组可以有不同元素
就是一个规定了元素数量和每个元素类型的"数组"
而每个元素的类型，可以不相同
语法：
let 元组名: [类型1, 类型2, 类型3] = [值1, 值2, 值3];
let tup1: [string, number, boolean] = [‘a’, 18, true];

枚举(enum)

应用

// 声明性别枚举
enum Gender{
    Boy = 1,
    Girl = 2,
    Unknown = 3
}
// 创建用户性别变量
let userSex: Gender = Gender.Boy;
// 判断变量中的性别是否为Boy
if(userSex === Gender.Boy){
    console.log(userSex); // 1
}else{
    console.log(userSex); // 2 or 3
}

任意类型(any)

any代表任意类型，一般在获取dom/不知道变量是什么类型时使用

空类型(void)

void代表没有类型，一般用在无返回值的函数
应用

function fn(): string {
    return 'abc';
}

function fn(): void {
    console.log('abc');
}

其他类型(never)

never代表不存在的值的类型，常用作为抛出异常或无限循环的函数返回类型
应用

function test(): never {
    while(true){

    }
}

function test(): never{
    throw new Error('abc');
}

补充：never类型是ts中的底部类型，所有类型都是never类型的父类，所以never类型值可以赋给任意类型的变量

let x: never = test();
let y: string = test();

类型推断

如果变量的声明和初始化是在同一行，可以省略掉变量类型的声明
应用

let age = 18; // 变量age的类型被推断为number
age = 'abc'; // 报错

联合类型

表示取值可以为多种类型中的一种
let 变量名: 变量类型1 | 变量类型2 = 值;
let name: string | null = prompt(‘请输入内容’);

函数(返回值和参数)

返回值的类型
function 函数名(): 返回值类型 {

}
let 变量名: 变量类型 = 函数名();

function fn(): string {
    return 'abc';
}
let res: string = fn();

形参类型
function 函数名(形参1,: 类型, 形参2: 类型): 返回值类型 {

}
let 变量名: 变量类型 = 函数名(实参1, 实参2);

function fn(a: string): void {
    console.log(a);
}
fn('abc');

可选参数(可选参数的实参可传可不穿)
function 函数名(形参? : 类型): 返回值类型 {

}
函数名();
函数名(实参值);

默认值
function 函数名(形参1: 类型 = 默认值1, 形参2: 类型 = 默认值2): 返回值类型 {

}

剩余参数(只能定义一个，在形参列表最后，且为数组)
function add(形参1: 类型, 形参2: 类型, …形参3: 类型[]): void {
console.log(a + b);
}

接口：interface

interface Demo {
  text:string;
  age?:number;
  readonly sex:string;
  [propName:string]:any;
  say():string
}

上述代码的含义是 text是必选的字符串类型，age可选的数字类型，sex只可读不可写的字符串类型，[propName:string]:any表示任意属性，say()表示方法属性，返回值为string

TypeScript应用示例

// 数组
let arr = [1, 'a', true, [], {}];
// let brr: string[] = ['a', 'b', 'c', 1]; // 报错

let crr: number[] = [1, 2, 3];
let drr: Array<number> = [1, 2, 3]; // 泛型

// 元组(tuple)
let tup: [string, number, boolean] = ['abc', 18, true];
tup = ['cba', 81, false];

// 枚举(enum)
enum Gender{
    Boy = 1,
    Girl = 2,
    Unknown = 3
}
console.log(Gender.Boy); // 1
console.log(Gender.Girl); // 2
console.log(Gender.Unknown); // 3

enum Gender2{
    Boy,
    Girl,
    Unknown
}
console.log(Gender.Boy);
console.log(Gender.Girl);
console.log(Gender.Unknown);

let userSex: Gender = Gender.Boy;
console.log(userSex); // 1

// 任意类型(any)

// 空类型(void)

// 其他类型(never)

// 函数：可选参数/默认值/剩余参数
function fn(name: string = 'abc', num?: number, ...other: number[]): void {
    console.log(name, num);
    for(let ele of other){
        console.log(ele);
    }
}
fn('abcd'); // 'abcd', undefined
fn(undefined, 1); // 'abc', 1
fn(undefined, 1, 2, 3, 4, 5); // 'abc', 1, 2, 3, 4, 5