前言:
今天大家对“js 教程视频”可能比较重视,兄弟们都想要了解一些“js 教程视频”的相关内容。那么小编也在网上网罗了一些对于“js 教程视频””的相关资讯,希望你们能喜欢,大家快快来学习一下吧!以下是前端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学习的详细笔记,供参考。)
标签: #js 教程视频