前言
上一篇文章里我们了解了Web开发三件套中的前面两位，即HTML和CSS，而接下来这位更是重量级，就是我们的JavaScript以及它的更进一步的现代化进化体TypeScript
（本文章中代码都使用VScode编辑而成）
一、JavaScript
JavaScript不同于HTML（超文本标记语言）和CSS（级联样式表），可以说是正经属于Web的编程语言了，是对网页行为来进行编程。
利用JavaScript，我们就可以操作网页来实现各种功能了，各种网页的特殊功能，如动画、游戏等基本都可以使用JavaScript来完成！
JavaScript 和 Java 可没什么关系哦
1. JavaScript的配置运行
编写JavaScript有多种方式，你可以将其整合到HTML文件中，只要以<script>和</script>包裹住代码段就可以任意放置在<body>或者<head>之中：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("item").innerHTML = "我说我没有改，你信吗";
}
</script>
</head>
<body>
<p id="item">我不会被更改</p>
<button type="button" onclick="myFunction()">请点击我</button>
</body>
</html>也可以编写独立的js文件再在HTML中进行引用：
<script src="../Js/xxx.js"></script>本文都将采用将js文件独立编写的方法。因此需要安装node.js
2. JavaScript的一些基本语法
首先我们知道JavaScript是一门专为Web应用服务的语言，那么作为一门语言自然有属于自己的语法。最基础的框架与现在的大部分编程语言都很类似。
总体语法区别：
语句后可不加“;”
定义属性：
JavaScript的变量是松散类型的，用var定义，所谓松散类型就是可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据
操作符：
布尔操作符：&& || ！
算术操作符：+ - * / %
关系操作符：<> <=>= == === != !== （===以及!==是值和类型全等以及全不等的意思）
条件（问号）操作符： ? :
赋值操作符 = += -+ *= /= %=
函数：函数在任何语言中都非常地重要，在JavaScript中也是一样，我们在具体的编写中基本都是利用函数来封装多条语句并通过调用来执行操作。
对象Object：对象 Object 是JavaScript中使用最多的一个类型。我们常将数据和方法封装在对象中。定义如下：
var item = {
name: '秦始皇',
age: 3000,
job: '中国第一个皇帝',
sayName: function(){
console.log(this.name);
}
};数组Array：也是JavaScript中非常常用的类型，且JavaScript中的Array数组的每一项都可以保存任意数据，如第一项为数字，第二项为字符等等。
var item = [1, '2', 3.14159265358979];常用方法
push() 末尾推入
pop() 末尾弹出
shift() 首项弹出
unshift() 在数组前端添加任意项并返回新数组长度
reverse() 反转数组slice() 分片，参数为起始和终止位置，返回分片后的数组,不会影响原始数组
更具体的学习请见JavaScript教程
二、TypeScript
TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。
TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。
1. TypeScript的配置
安装好NodeJS后，以管理员身份运行终端，使用
npm -g install ts-node typescript命令进行全局安装
如在VS Code中开发，请安装ESLint、TypeScript Hero等插件
下面我们就在VScode中创建一个.ts文件来看看是否配置成功
2. TypeScript学习
（1）let 和 const
不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界
let lang: string = 'TypeScript的第一步';//类型说明也可以省略
lang = 1010;//报错！之前已经定义lang为字符型
const pi: number = 3.14159265358979;//const代表常量，这个值之后不可改变
pi = 3.14;//报错！
（2）解构
将对象、数组中的元素拆分到指定变量中，以方便使用
//解构数组
let num = [1, 2, 3, 4];
let [one] = num;//注意使用[]
console.log(one);
let [first, ...others] = num; //...代表剩余变量
console.log(...others);
//展开
let newArr = [1, ...others, 5];
console.log(newArr);
//解构对象
let o = {
a: "a",
b: 13,
c: "c"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);
（3） 函数
使用完整函数类型定义
//普通的加法函数，返回数字值
function Plus(x: number, y: number): number {
return x + y;
}
//调用加法函数
console.log(Plus(1,2))
//直接返回值到变量
let myAdd = function(x: number, y: number): number { return x + y; };
console.log(myAdd(1, 2));
（4）类
类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。
class superman{
power:string
speed:string
height:string
constructor(power:string,speed:string,height:string){
this.power=power;
this.speed=speed
this.height=height
}
PrintData():void{
console.log(`超人的力量为,${this.power}`);
console.log(`超人的速度为,${this.speed}`);
console.log(`超人的身高为,${this.height}`);
}
}
let man=new superman('无限','光速','1.85');
man.PrintData();
（5）模块Module
对于大型的项目，我们需要使用模块进行管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。
演示该功能需要新建一个.ts文件
xxx.ts文件中的代码：
export class superman{
power:string
speed:string
height:string
constructor(power:string,speed:string,height:string){
this.power=power;
this.speed=speed
this.height=height
}
PrintData():void{
console.log(`超人的力量为,${this.power}`);
console.log(`超人的速度为,${this.speed}`);
console.log(`超人的身高为,${this.height}`);
}
}xxx0.ts文件中的代码：
import { superman } from "./xxx";
let man=new superman('10吨','1马赫','1.77米');
man.PrintData();运行xxx0.ts结果如下：
总结
以上就是今天要讲的内容，本文仅仅简单介绍了JavaScript以及TypeScript的部分功能即使用，想要熟练使用js与ts进行Web开发需要更多的学习与练习。
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
