JavaScript & TypeScript 学习总结

---

JavaScript简介

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都可以使用 JavaScript

一、JavaScript基础语法。

JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。

1.JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用 var 关键词来声明变量。

= 号用于为变量赋值。
例如·：

var x;
x = 7;

2.JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
var 关键字告诉浏览器创建一个新的变量：

3.JavaScript 注释

并非所有 JavaScript 语句都被“执行”。

双斜杠 // 或/* 与*/ 之间的代码被视为注释。

注释会被忽略，不会被执行：

二、操作符

1.算术操作符+ - * / %

var result = 5 + '5'; // 一个数值和一个字符串相加
console.log(result); // '55'
//============================================
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + num1 + num2;// (num1 + num2)，还可使用模板字符串``
console.log(message); // "The sum of 5 and 10 is 510"

2.关系操作符

<> <=>= == === != !==

var x = 5;
console.log(x == 5);
console.log(x == '5');
console.log(x === 5);
console.log(x === '5');

3.条件（问号）操作符 ? :

4.赋值操作符 = += -+ *= /= %=

三、语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”
JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。
本例向网页输出一个标题和两个段落：

function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

四、函数

JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
JavaScript 函数通过function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
例如计算两个数乘积的函数：

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

当 JavaScript 到达return语句，函数将停止执行。如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。函数通常会计算出返回值。这个返回值会返回给调用者。

六、数组

JavaScript 数组用于在单一变量中存储多个值。

var cars = ["Saab", "Volvo", "BMW"];

我们通过引用索引号（下标号）来引用某个数组元素。

这条语句访问 cars 中的首个元素的值：

var name = cars[0];

五、对象

在 JavaScript中，几乎所有的事物都是对象。
对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value对呈现。

var car = {name:"Fiat", model:500, color:"white"};

可以使用字符来定义和创建 JavaScript 对象，定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的：

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

用同一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体。代码如下：

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');

TypeScript简介

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

1.安装TypeScript

有两种主要的方式来获取TypeScript工具：

1.通过npm（Node.js包管理器）
2.安装Visual Studio的TypeScript插件

针对使用npm的用户：

> npm install -g typescript

2.编译代码

在命令行上，运行TypeScript编译器：
tsc greeter.ts
输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，可以运行这个使用TypeScript写的JavaScript应用了。

3.类

TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。

创建一个Student类，它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作，程序员可以自行决定抽象的级别。

还要注意的是，在构造函数的参数上使用public等同于创建了同名的成员变量。

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

4.函数

在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // 错误，缺少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");         // 正确

5.解构

将对象、数组中的元素拆分到指定变量中，以方便使用

//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
  a: "foo",
  b: 12,
  c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);