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