我的JavaScript & TypeScript 学习总结

JavaScript 简介

---

JavaScript是一种可以用来给网页增加交互性的编程语言。

脚本语言(Scripting language)

javascript是一门解释型的语言，浏览器充当解释器。js执行时，在同一个作用域内是先解释再执行。解释的时候会编译function和var这两个关键词定义的变量，编译完成后从上往下执行并向变量赋值。

---

一、JavaScript总结

a.变量

变量名包括全局变量，局部变量，类变量，函数参数等等，他们都属于这一类。

变量命名都以类型前缀+有意义的单词组成，用驼峰式命名法增加变量和函式的可读性。

s：表示字符串。例如：sName，sHtml；
n：表示数字。例如：nPage，nTotal；
b：表示逻辑。例如：bChecked，bHasLogin；
a：表示数组。例如：aList，aGroup；
r：表示正则表达式。例如：rDomain，rEmail；
f：表示函数。例如：fGetHtml，fInit；
o：表示以上未涉及到的其他对象，例如：oButton，oDate；
g：表示全局变量，例如：gUserName，gLoginTime；

JScript 是一种区分大小写的语言。

javascript是一种弱类型语言，JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。

var是javascript的保留字，表明接下来是变量说明，变量名是用户自定义的标识符，变量之间用逗号分开。

如果声明了一个变量但没有对其赋值，该变量存在，其值为Jscript 值 undefined。

b.js的数据类型

主要（基本）数据类型
字符串
数值
布尔
复合（引用）数据类型
对象
数组
特殊数据类型
 Null

`Undefined`

布尔（逻辑）只能有两个值：true 或 false。

字符串数据类型：字符串数据类型用来表示 JScript 中的文本。在js中，虽然双引号（“”）和单引号(‘’)均可表示字符串，而且它们几乎没有任何区别。但只使用双引号(“”)来表示字符串被认为是最佳的。

c.js数组和对象

JavaScript 中的对象（Object）和数组（Array）有时候看起来很相似，但它们是两种不同类型的数据集合，其中对象是包含已命名的值的无序集合，而数组则是包含已编码的值的有序集合。

var o = {  //对象
    x :1,  //该值命名为x
    y : true  //该值命名为y
}
var a = [  //数组
    1,  //该值隐含编码为0
    true  //该值隐含编码为1
]

对象的存储形式很像数组，因此被称为关联数组，但它不是真正意义上的数组。关联数组就是将值与特定字符串关联在一起。真正的数组与字符串没有联系，但是它将值和非负整数的下标关联在一起。

console.log(o["x"]);  //返回1，使用点语法存取属性
console.log(a[0]);  //返回1，使用中括号存取属性

d.JavaScript 的运算符

数据类型转换和基本包装类型
String() 转换为字符串类型
Number() 转换为数字类型
Boolean() 转换为布尔类型

parseInt：将字符串转换为整数。从字符串的开头开始解析，在第一个非整数的位置停止解析，并返回前面读到所有的整数。如果字符串不是以整数开头的，将返回NaN。如：parseInt（“150 hi”）返回的值是：150，parseInt(“hi”)返回的值是：NaN。
parseFloat：将字符串转换为浮点数。 从字符串的开头开始解析，在第一个非整数的位置停止解析，并返回前面读到所有的整数。如果字符串不是以整数开头的，将返回NaN。如：parseFloat(“15.5 hi”) 返回的值是：15.5，parseFloat(“hi 15.5”)返回的值是：NaN。

var box = 'trigkit4'; //字面量
box.name = 'mike';   //无效属性
box.age = function () { //无效方法
    return 22;
};
 
//new运算符写法
var box = new String('trigkit4');//new 运算符
box.name = 'mike';   //有效属性
box.age = function () { //有效方法
    return 22;
};

e.js函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

Jscript 支持两种函数：一类是语言内部的函数，另一类是自己创建的。

TypeScript 简介

二、TypeScript总结

a.TypeScript基本语法

我们可以把 TypeScript 代码的编写看作是为 JavaScript 代码添加类型注解。

在 TypeScript 语法中，类型的标注主要通过类型后置语法来实现。

let num: number = 1;

特殊说明：number表示数字类型，:用来分割变量和类型的分隔符。

1.字符串

let firstname: string = 'Captain'; // 字符串字面量
let familyname: string = String('S'); // 显式类型转换
let fullname: string = `my name is ${firstname}.${familyname}`; // 模板字符串

2.数字

/** 十进制整数 */
let integer: number = 6;
/** 十进制整数 */
let integer2: number = Number(42);
/** 十进制浮点数 */
let decimal: number = 3.14;
/** 二进制整数 */
let binary: number = 0b1010;
/** 八进制整数 */
let octal: number = 0o744;
/** 十六进制整数 */
let hex: number = 0xf00d;

3.Symbol

let sym1: symbol = Symbol();
let sym2: symbol = Symbol('42');

let sym: symbol = Symbol('a');
let sym2: Symbol = Symbol('b');
sym = sym2 //fail   “symbol”是基元，但“Symbol”是包装器对象。如可能首选使用“symbol”。
//Type 'Symbol' is not assignable to type 'symbol'.
 // 'symbol' is a primitive, but 'Symbol' is a wrapper object. Prefer using 'symbol' when possible.
sym2 = sym // ok
let str: String = new String('a');
let str2: string = 'a';
str = str2; // ok 
str2 = str; // fail

b.复杂基础类型

1.数组类型

首先，我们可以直接使用 [] 的形式定义数组类型，如下代码所示：

/** 子元素是数字类型的数组 */
let arrayOfNumber: number[] = [1, 2, 3];
/** 子元素是字符串类型的数组 */
let arrayOfString: string[] = ['x', 'y', 'z'];

同样，我们也可以使用 Array 泛型定义数组类型，如下代码所示：

/** 子元素是数字类型的数组 */
let arrayOfNumber: Array<number> = [1, 2, 3];
/** 子元素是字符串类型的数组 */
let arrayOfString: Array<string> = ['x', 'y', 'z'];

更推荐使用 [] 这种形式来定义。

2.元组类型

元组最重要的特性是可以限制数组元素的个数和类型，它特别适合用来实现多值返回。

import { useState } from 'react';
function useCount() {
  const [count, setCount] = useState(0);
  return ....;
}

出于较好的扩展性、可读性和稳定性考虑，我们往往会更偏向于把不同类型的值通过键值对的形式塞到一个对象中，再返回这个对象。

{
  state,
  setState
}

而 TypeScript 的元组类型正好弥补了这个不足，使得定义包含固定个数元素、每个元素类型未必相同的数组成为可能。

```javascript
[State, SetState]
[SetState, State]
const x: [State, SetState] = [state, setState];
const y: [SetState, State] = [setState, state];
(state: State) => [State, SetState]