JavaScript语言特征介绍（类型）

JavaScript是一种弱类型的，动态类型检查的语言。

弱类型和强类型

弱类型？

在定义变量的时候，我们可以为变量赋值任何数据，变量的数据类型不是固定死的，这样的类型叫做弱类型

var a = 10;
a = "abc";
a = [];
a = function(){};
**```**

### 强类型？
在声明变量的时候，一旦给变量赋值，那么变量的数据类型就已经确定，之后如果要给该变量赋值其他类型的数据，需要进行强制数据类型转换。
```java
int a = 10;
a = "10"; // 会报错

动态类型和静态类型

动态类型和静态类型的核心区别：动态类型的类型检查会在代码运行的时候进行，而静态类型的类型检查则是在编译时进行。

运行时类型检查

var obj = {};
obj.forEach(function(v, i){

})

编译时类型检查

int num = 100;
num = "abc";

静态类型的优势

1:提早发现代码中的bug；

2:提高代码的可读性；

3:减少了复杂的错误处理逻辑；

4:建议代码重构；

5:增强了IDE功能；

。。。

因此产生了类似于 Flow，TypeScript这样，用来做类型检查的工具；

react源码使用了Flow； TypeScript在平时工作中使用的更加广泛；

TypeScript

是什么？

TypeScript是微软公司开发的一款开源的JavaScript超集语言！

JavaScript超集：当前任何JavaScript都是合法的TypeScript代码！

TypeScript主要为JavaScript提供了类型系统和ES6语法的支持！

Flow是一个类型检查工具，TypeScript是一种开发语言！TypeScript功能更加强大！

TypeScript有自己的编译工具，我们写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行！

安装

TypeScript命令行工具的安装（TS编译器）

npm i typescript -g

安装好了之后，全局会提供一个tsc命令给我们使用！

编写TypeScript代码

通过tsc进行编译，最终运行

ts配置文件的说明

创建配置文件

tsc --init

设置配置项
- target: 指的就是将ts代码要转换成哪个版本的js代码 es5 es3
- module: 指的就是将ts代码转换成js代码之后，使用的模块化的标准是什么
- outDir: 指的就是将ts代码转换成js代码之后，js代码存放的文件夹路径
- rootDir: 指的就是要将哪个目录中的ts代码进型转换，ts代码的存放路径
- strict: 是否要将ts代码转换为严格模式的js代码！
使用配置文件

tsc -p ./tsconfig.json

现在框架已经集成了ts，所以，开发代码中无需安装，直接使用即可！

如何使用？

基础类型

ts中的基础类型分为：

布尔值

let flag: boolean = true;
let flag1: boolean = false;

数字

let a: number = 10;
let b: number = NaN;
let c: number = Infinity;
let d: number = 0xA12;
let e: number = 0b1010101;
let f: number = 0o75;

字符串

// string
let str: string = "字符串"
let str1: string = '字符串'
let str2: string = `字符串${a}`

数组

// Array<数据类型>
let arr: Array<number> = [1, 2, 3, 4];

// 数据类型[]
let arr1: number[] = [1, 2, 3, 4];

对象

let o: object = {};
let o1: object = []; // 数组也是对象
// 对象类型
let o: { name: string, age: number } = { name: "小明", age: 18 };

元组

let arr2: [number, string] = [1, 'a'];

// arr2[0] = 'a'; // 报错
// arr2[0] = 1000;  // 不报错

arr2[2] = 'a'; // 不报错
arr2[2] = 1; // 不报错
// arr2[2] = [];
arr[3] = true; //报错 布尔不是(srting|number)类型

空值

// void 空值
let res: void = undefined;

null和undefined

let res1: undefined = undefined;
let res2: null = null;

枚举

// enum: 枚举类型

// gender: 0  1  -1

enum Gender{
    male = 1,
    female = 0,
    unknow = -1
}

let gender: Gender = Gender.male;

let obj = {
    gender: Gender.male
}

Never

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

类型断言

// 类型断言
let str: any = "abc";
let len: number = (<string>str).length;

let str: any = "abc";
let strLength: number = (str as string).length;

接口

// 接口
// 接口可以理解为一个约定 一个规范


// // 接口使用interface进行声明
// interface AjaxOptions{
//     url: string,
//     // 给属性加上？之后，这个属性就是可选的！
//     type?: string,
//     data?: object,
//     success(data: object): void
// }


// // option参数中 需要包含 url type data success
// function ajax(options: AjaxOptions) {
    
// }

// ajax({
//     url: "http://www.baidu.com",
//     type: "get",
//     data: {},
//     success(data) {
        
//     }
// })

interface Point{
    readonly x: number,
    y: number,
    [propName: string]: any
}

let poi: Point = {
    x: 10,
    y: 10
}

// poi.x = 100;


let poi1: Point = {
    x: 10,
    y: 10,
    z: 100
}

接口使用interface进行声明
可选属性 ?: 表示
只读属性 readonly， ReadonlyArray 只能在创建时间修改

作为属性使用的话，使用readonly；作为变量使用的话，使用const
额外属性 [propName: string]: any 或者 {} as SquareConfig

类

class Person{
    // 和ES6不同的是，TS中属性必须声明，需要指定类型
    name: string
    // 声明好属性之后，属性必须赋值一个默认值或者在构造函数中进行初始化
    age: number
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello(msg: string): void {
        console.log(msg);
    }
}

公共 pubilc ，私有 private 与受保护 protected
private 不能在声明它的类的外部访问
protected 仅能在声明它的类和派生类的内部访问
readonly
存取器 get set
静态属性 static 仅在实例化时间才会被初始化的属性
抽象类 abstract 用于定义抽象类和在抽象类内部定义抽象方法

ts相关