橙子建站突然发验证码人力资源培训网

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

搭建 TS 学习环境

创建 ts-learn 文件夹，输入如下命令初始化项目。

npm init -y

安装相关依赖。

npm i -D typescript nodemon ts-node

初始化 TS 配置。

npx tsc --init

修改 package.json 文件内容 nodemon --exec ts-node index.ts，其中 index.js 可以修改，我们想查看哪个文件的运行结果修改为哪个文件即可。

{"name": "ts-learn","version": "1.0.0","main": "index.js","scripts": {"start": "nodemon --exec ts-node index.ts"},"keywords": [],"author": "","license": "ISC","description": "","devDependencies": {"nodemon": "^3.1.9","ts-node": "^10.9.2","typescript": "^5.8.2"}
}

基础类型 & 引用类型

index.ts

基础类型包括 boolean, number, string, symbol, null, undefined；
引用类型包括 {} or object, [] or Array, function, Class类型；

相关使用如下：

// string 类型
const msg: string = "hello ts!";console.log(msg);// boolean
const bool: boolean = true;// object
const obj: object = {};
const obj1: {} = {};const obj2: { msg: string; num: number } = { msg: "hello", num: 1 };
const obj3: { msg: string; num?: number } = { msg: "hello" }; // ?表示可选属性obj3.num = 1; // 可选属性可以在后面赋值// arr
const arr: [] = [];// 构造函数方式
const arr1: Array<string> = ["123"];
const arr2: Array<string | number> = ["123", 234];// 字面量方式
const arr3: string[] = ["123123"];
const arr4: (string | number)[] = ["123123", 234];

函数类型

function-demo.ts

相关使用如下：

// 基本用法
function add(arg1: number, arg2: number): number {return arg1 + arg2;
}add(1, 2); // 3const add1 = (arg1: number, arg2: number): number => {return arg1 + arg2;
};add1(1, 2); // 3// 匿名函数
// var fn = function() {} -> const fn = () => {}
const add2: (arg1: number, arg2: number) => number = (arg1: number,arg2: number
) => arg1 + arg2;add2(1, 2); // 3// 函数重载
function handleData(x: string): string[];function handleData(x: number): string;function handleData(x: any): any {if (typeof x === "string") {return x.split("");} else {return x.toString().split("").join("_");}
}handleData("123"); // ['1', '2', '3']
handleData(123); // '1_2_3'
// handleData(true);  // error 这里会报错，因为没有布尔类型的重载// const handleData1: (x: string) => string[]; // 不能使用箭头函数重载

any、void、never、unknow

new-types.ts

相关使用如下：

// any 类型 -> es5 var -> 任意类型
let a: any;a = 123;
a = "123";
a = true;
a = {};
a.toFixed(2);
a.join("_");// void 类型 -> 没有类型
let b: void;
b = undefined; // 可以赋值 undefined
// b = 123; // 不能赋值其他类型// never -> 永远不存在的类型// unknown -> 未知的类型
let c: unknown;
c = 123;
c = "123";
c = undefined;
c = null;// c.toFixed(2); // 这里会报错，因为 unknown 类型不能直接调用方法
// c.join("_"); // 这里会报错，因为 unknown 类型不能直接调用方法// 这样玩是可以的，因为能保证类型的正确
if (typeof c === "number") {c.toFixed(2);
} else if (typeof c === "object" && c instanceof Array) {c.join("_");
}

tuple、enum

tuple_enum.ts

相关使用如下：

// tuple 元组 -> 固定类型 + 长度的数组
const teacherInfo: [string, number] = ["zhangsan", 18];// enum 枚举
enum Direction {Up,Down,Left,Right,
}

Interface

interface.ts

相关使用如下：

// 接口
interface publicPoint {x: number;y: number;z: number;
}interface Point extends publicPoint {a?: number;
}interface Point1 extends publicPoint, Point2 {a?: string;b: string | number;
}interface Point2 {d: number;
}const myPoint: Point = {x: 1,y: 2,z: 3,
};const myPoint1: Point1 = {b: "123",d: 4,x: 1,y: 2,z: 3,
};// 函数定义
interface Func {(num1: number, num2: number): number;
}const addFunc: Func = (arg1, arg2) => arg1 + arg2;// 索引类型
interface Role {[id: number]: string;
}const role: Role = ["admin", "user", "guest"];
// console.log(role.length); // 当定义了索引类型，数组的length方法将不存在，包括Array原型链上的其他方法也不存在const role1: Role = {0: "admin",1: "user",2: "guest",
};// 绕开多余的属性检查
interface MyType {color: string;[prop: string]: any; // 索引签名 这里的 prop 可以是任意类型
}const getTypes = (myType: MyType) => {return `${myType.color}`;
};// 类型断言
getTypes({color: "red",type: "color",
} as MyType);// 索引签名
getTypes({color: "red",type: "color",num: 0,a: () => {},
});

Class 类

ts-class.ts

相关使用如下：

class Person {// public - 公共的，允许在类的外面进行调用// protected - 受保护的，只允许在类的内部和子类中进行调用// private - 私有的，只允许在类的内部进行调用private name = "zahuopu";protected name1 = "zahuopu1"; // 被保护的getName() {return this.name + this.name1;}
}const person = new Person();
console.log(person.getName()); // zahuopuclass Person1 extends Person {constructor() {super();console.log(super.getName()); // zahuopuconsole.log(this.getName()); // zahuopu1}getName() {return "zahuopu1";}
}const person1 = new Person1();
console.log(person1.getName()); // zahuopu1// 类类型接口
interface FoodInterface {type: string;
}class FoodClass implements FoodInterface {constructor(public type: string) {}
}// class FoodClass2 implements FoodInterface {
//   type: string;
//   constructor(args: string) {
//     this.type = args;
//   }
// }// 接口继承类
// 1.接口可以继承类，当接口继承了类之后，会继承成员（类型），但是不包括实现；
// 2.接口还会继承private和protected修饰的成员，但是这个接口只可被这个类或它的子类实现
interface I extends Person {}// 类与类，接口与接口之间使用 extends
// 类与接口之间使用 implements
class C extends Person implements I {getName() {return this.name1 + "new Class C";}
}const instance = new C();
console.log(instance.getName()); // zahuopu1new Class C

范型

generic.ts

在定义函数、接口或类的时候不预先制定数据类型，而在使用时再指定类型的特性。

相关使用如下：

const pushArr = <T>(arr: T[], item: T): T[] => {arr.push(item);return arr;
};const arrnum: number[] = [1, 2, 3];
pushArr<number>(arrnum, 3);
pushArr<string>(["1", "2"], "3");// 交换范型
function swapGeneric<T, U>(tuple: [T, U]): [U, T] {return [tuple[1], tuple[0]];
}const result = swapGeneric(["zahuopu", 2025]);
console.log(result); // [ 2025, 'zahuopu' ]

TS中的声明

声明：在文件中定义好函数、接口或类的类型；

声明文件：把声明语句放到一个单独的文件；

PS：声明文件必须以 .d.ts 为后缀。

如何生成声明文件？

打开 tsconfig.json 文件，放开两个配置

"declaration": true,
"outDir": "./dist",

在终端我们运行 npx tsc 命令，我们就可以得到 dist 文件夹了，至此声明文件完成生成。

总结

本篇文章，我们学习了TS的一些基本使用并认识了如何生成声明文件。实践出真知，后续我们还会在项目中使用TS，在真实场景中锻炼对TS的熟练度。

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

---

参考资料：

1. TS · 百度百科
2. NestJS 从入门到实战

---