以下是前端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装饰器:可以在类和方法上添加元数据,以拓展类和方法的属性和行为。
优点:
JS:
TS:
缺点:
JS:
TS:
总结:
虽然 TS 可以提供更好的可读性和代码管理,但 JS 仍然是 a the 主流语言,有大量的现成库和支持,也更适合简单的小型项目。TS 需要花费额外的时间和学习成本,但可以提供更好的代码结构和管理,适合大型和复杂项目。
(以上是前端TS学习的详细笔记,供参考http://ts.jiaoxiaoyuan.cn。)