TS初学者必备:学习笔记清单与JS和TS的对比分析

发表时间: 2023-03-20 08:40

以下是前端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;

(7) Any类型:let notSure: any = 4;

(8) Void类型:

function doSomething(): void {    console.log('do something');}

(9) Never类型:

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

接口

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

(1) 对象类型:

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) 定义类:

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) 访问修饰符:

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) 泛型接口:

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装饰器:可以在类和方法上添加元数据,以拓展类和方法的属性和行为。


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。)