TS入门学习笔记清单及JS和TS优劣对比

欢迎大家来到IT世界,在知识的湖畔探索吧!

以下是前端TS学习的详细笔记：

基础概念

TS是JS的一个超级，可以看作是对JS的增强。

强类型：对变量或函数参数的类型进行明确规定。

编译时类型检查：在编译过程中检查代码类型的正确性，可以在开发阶段发现一些类型错误。

环境准备

（1）安装Node.js

（2）全局安装TS：npm install -g typescript

类型：

（1） 布尔类型：let isDone: boolean = false;

（2） 数字类型：let num: number = 123;

（3） 字符串类型：let str: string = “Hello World”;

（4） 数组类型：let arr: number[] = [1, 2, 3];

（5） 元组类型：let arr: [number, string] = [1, ‘hello’];

（6） 枚举类型：

enum Color { Red, Green, Blue } let c: Color = Color.Green;

欢迎大家来到IT世界,在知识的湖畔探索吧!

（7） Any类型：let notSure: any = 4;

（8） Void类型：

欢迎大家来到IT世界,在知识的湖畔探索吧!function doSomething(): void { console.log('do something'); }

（9） Never类型：

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

接口

接口定义了一个对象的类型，包括属性名和属性类型。

（1） 对象类型：

欢迎大家来到IT世界,在知识的湖畔探索吧!interface Person { name: string; age: number; } function printPerson(p: Person): void { console.log(`name: ${p.name}, age: ${p.age}`); }

（2） 函数类型：

interface SearchFunc { (source: string, subString: string): boolean; } const mySearch: SearchFunc = function(source: string, subString: string): boolean { return source.indexOf(subString) !== -1; }

类

TS支持面向对象编程，通过类来定义对象，可以编写可复用的代码。

（1） 定义类：

欢迎大家来到IT世界,在知识的湖畔探索吧!class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } say(): void { console.log(`name: ${this.name}, age: ${this.age}`); } } let p = new Person('Tom', 20); p.say();

（2） 继承：

class Student extends Person { grade: number; constructor(name: string, age: number, grade: number) { super(name, age); this.grade = grade; } say(): void { console.log(`name: ${this.name}, age: ${this.age}, grade: ${this.grade}`); } } let s = new Student('Tom', 20, 1); s.say();

（3） 访问修饰符：

欢迎大家来到IT世界,在知识的湖畔探索吧!class Person { protected name: string; private age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } say(): void { console.log(`name: ${this.name}, age: ${this.age}`); } } class Student extends Person { grade: number; constructor(name: string, age: number, grade: number) { super(name, age); this.grade = grade; } say(): void { console.log(`name: ${this.name}`); // 报错，name是受保护的 console.log(`age: ${this.age}`); // 报错，age是私有的 console.log(`grade: ${this.grade}`); } }

泛型

泛型可以储存任意类型的数据，增加代码的灵活性和可读性。

（1） 泛型函数：

function identity<T>(arg: T): T { return arg; } let output = identity<string>('hello');

（2） 泛型接口：

欢迎大家来到IT世界,在知识的湖畔探索吧!interface GenericIdentityFn<T> { (arg: T): T; } function identity<T>(arg: T): T { return arg; } let myIdentity: GenericIdentityFn<number> = identity;

其他

（1） 类型断言：

let str: any = 'hello'; let num: number = (<string>str).length;

（2） TS声明文件：用于定义库或框架的类型，以便在TS中使用。

（3） TS装饰器：可以在类和方法上添加元数据，以拓展类和方法的属性和行为。

欢迎大家来到IT世界,在知识的湖畔探索吧!

JavaScript (JS)和TypeScript (TS)都是流行的编程语言，但它们有一些重要的区别。

优点：

JS:

• JS 已经被广泛接受，可以在各种操作系统和设备上运行。
• 所有现代浏览器都内置了JavaScript引擎，让JS容易运行。
• JS 的语法灵活简单，容易学习。
• JS 有大量的第三方库可用于各种用途。

TS:

• TS 支持静态类型语言的所有特性，包括类型检查、语法提示，并且能够降低代码中的错误。
• TS 对 JavaScript 的补充使得开发更加效率。
• TS 支持模块化编程，可以调用模块内导出的变量、函数等。
• TS 可以为对象和函数添加注释，提供了更好的文档和可读性。

缺点：

JS：

• 缺乏静态类型检查，容易出现错误，需要开发者小心处理。
• 对于大型项目，难以管理复杂的代码库。
• JS 具有一定的学习曲线，需要时间熟悉。

TS：

• 稍微复杂，把JavaScript的语法扩展让它与其他语言分享。
• 更加冗长的代码，如果鲜有利用类型的功能，会使代码变得繁琐。

总结：

虽然 TS 可以提供更好的可读性和代码管理，但 JS 仍然是 a the 主流语言，有大量的现成库和支持，也更适合简单的小型项目。TS 需要花费额外的时间和学习成本，但可以提供更好的代码结构和管理，适合大型和复杂项目。

(以上是前端TS学习的详细笔记，供参考http://ts.jiaoxiaoyuan.cn。)