JavaScript & TypeScript 学习总结
基本语法
JavaScript(简称JS)和TypeScript(简称TS)都是基于ECMAScript标准的编程语言。它们共享许多相似的基本语法,包括变量声明、条件语句、循环语句等。以下是一些基本语法示例:
变量声明
在JavaScript中,可以使用var
、let
或const
关键字声明变量:
var message = 'Hello, World!';
let count = 10;
const PI = 3.14;
TypeScript引入了类型注解,可以使用特定类型来声明变量:
let message: string = 'Hello, World!';
let count: number = 10;
const PI: number = 3.14;
操作符
JavaScript和TypeScript支持各种操作符,包括算术运算符、赋值运算符、逻辑运算符等。
let sum = 10 + 5;
let isTrue = true && false;
语句
条件语句和循环语句在JavaScript和TypeScript中也是相似的,包括if
、switch
、for
、while
等。
let num = 10;
if (num > 0) {
console.log('大于0');
} else if (num < 0) {
console.log('小于0');
} else {
console.log('0');
}
函数
JavaScript和TypeScript都支持函数的定义和调用。可以使用function
关键字定义函数,并使用return
语句返回值。
function hello(name) {
return 'Hello, ' + name + '!';
}
let message = hello('KANGKANG');
console.log(message); // 输出:Hello, KANGKANG!
在TypeScript中,可以使用类型注解来指定函数的参数类型和返回类型。
function hello(name: string): string {
return 'Hello, ' + name + '!';
}
let message: string = greet('KANGKANG');
console.log(message); // 输出:Hello, KANGKANG!
对象
JavaScript和TypeScript都支持对象的创建和访问。可以使用字面量语法创建对象,并通过.
或[]
操作符访问对象的属性。
let person = {
name: 'KANGKANG',
age: 18,
address: {
city: 'Chongqing',
country: 'China'
}
};
console.log(person.name); // 输出:KANGKANG
console.log(person['age']); // 输出:18
在TypeScript中,可以使用接口(Interface)来定义对象的类型和属性。
interface Person {
name: string;
age: number;
address: {
city: string;
country: string;
};
}
let person: Person = {
name: 'KANGKANG',
age: 18,
address: {
city: 'Chongqing',
country: 'China'
}
};
console.log(person.name); // 输出:KANGKANG
console.log(person.address.city); // 输出:Chongqing
数组
JavaScript和TypeScript都支持数组的创建和操作。可以使用字面量语法创建数组,并使用
索引访问数组元素。
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出:1
在TypeScript中,可以使用类型注解来指定数组元素的类型。
let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出:1
链式语法
JavaScript和TypeScript都支持链式语法,通过连续调用对象或函数的方法来实现方法链。
let result = numbers
.filter(num => num % 2 === 0)
.map(num => num * 2)
.reduce((sum, num) => sum + num, 0);
console.log(result); // 输出:12
闭包
JavaScript和TypeScript都支持闭包的概念,允许函数访问其词法作用域外部的变量。
function createCounter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}
let counter = createCounter();
counter(); // 输出:1
counter(); // 输出:2
JavaScript和TypeScript的区别与过渡
JavaScript是一种解释型的动态类型语言,而TypeScript是JavaScript的超集,添加了静态类型和更强大的类型系统。
具体的区别和过渡包括:
-
变量定义:JavaScript使用
var
、let
、const
来定义变量,而TypeScript引入了类型注解,使用特定类型来定义变量。 -
类型注解:TypeScript支持类型注解,可以在变量、函数、对象等声明中明确指定类型,以提供更严格的类型检查。
-
类和模块:TypeScript支持类和模块的概念,并提供了更强大的面向对象编程能力和模块化开发。
-
编译:JavaScript是一种解释型语言,代码可以直接在浏览器或Node.js环境中运行。而TypeScript需要先经过编译,将TypeScript代码转换为JavaScript代码,然后再运行。
对于从JavaScript过渡到TypeScript的开发者来说,需要逐步添加类型注解、定义接口和类型,并利用TypeScript的工具和类型检查来提高代码的可靠性和可维护性。可以使用TypeScript的编译器和编辑器插件来辅助开发,并逐步将JavaScript代码转换为TypeScript代码。
总结而言,学习JavaScript和TypeScript可以使我们在前端开发中拥有更强大的工具和语言特性。JavaScript是一种灵活的动态类型语言,而TypeScript在此基础上提供了静态类型和更丰富的功能,可以提高代码质量和开发效率。