💭💭

✨：JavaScript VS TypeScript数据类型
 
💟：东非不开森的主页
 
💜: 你若盛开，清风自来💜💜
 
🌸: 如有错误或不足之处，希望可以指正，非常感谢😉
 

一、初识TypeScript

1.1.TS VS JS

1.1.1.JavaScript缺点

JS缺点：

• ES5以及之前的使用的var关键字关于作用域的问题
• 最初JavaScript设计的数组类型并不是连续的内存空间
• JavaScript没有加入类型检测这一机制

JavaScript不可以在代码编译期间发现代码的错误

1.1.2.TypeScript特点

⭐⭐⭐
特点：

• 始于JavaScript，归于JavaScript TypeScript可以编译出纯净、 简洁的JavaScript代码

TypeScript的出现弥补了JavaScript类型约束上的缺陷

• TypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码

• 我们可以将TypeScript理解成加强版的JavaScript

• JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的

• 并且TypeScript最终会被编译成JavaScript代码，所以你并不需要担心它的兼容性问题

1.2.基本安装运行

⭐⭐⭐
两种方式：

• 通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，可以直接运行在浏览器上
• 通过ts-node库，为TypeScript的运行提供执行环境
  安装
  检测是否安装成功

npm install typescript -g
tsc -- version

运行

• 安装ts-node
• 安装ts-node依赖：tslib @types/node -g
• ts-node f.ts 运行

npm install ts-node -g

npm install tslib @types/node -g

// 运行
ts-node f.ts

二、JS和TS相同数据类型

⭐⭐⭐
变量声明：

• 声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解（Type Annotation）；

var/let/const 标识符: 数据类型 = 赋值;

类型推导

• 声明一个标识符时, 如果有直接进行赋值, 会根据赋值的类型推导出标识符的类型注解 这个过程称之为类型推导
• let进行类型推导, 推导出来的通用类型
• const进行类型推导, 推导出来的字面量类型

2.1.number、boolean、string

• 数字 布尔 字符串类型

let num: number = 123
let flag: boolean = true
const name = 'kk'

2.2.null undefined

• null undefined类型

const n1: null = null;
const n2: undefined = undefined;

2.3.Symbol

• Symbol类型

const title1 = Symbol("title")
const title2 = Symbol('title')
const info = {
  [title1]: "程序员",
  [title2]: "老师"
}

• 在对象中不能添加相同的属性名称，但是可以通过symbol来定义相同的名称
• 因为Symbol函数返回的是不同的值

2.4.Array

• 数组类型

1. string[]:数组类型，并且数组中存放的字符串类型
2. Array:数组类型，并且数组中存放的是字符串类型

let names: string[] = ["a", "b", "c"]
let nums: Array<number> = [1, 2, 3];

PS：

• string: TypeScript给我们定义标识符时, 提供的字符串类型
• String: JavaScript中字符串的包装类

2.5.Object

• 对象类型

const info: object = {
  name: "kk",
  age: 18,
};

2.6.参数和返回值

• 参数
  在定义一个TypeScript中的函数时, 都要明确的指定参数的类型

function sum(num1:number, num2: number):number {
    return num1 + num2
}
const res = sum(1, 2)

• 返回值
  返回值可以明确的指定，也可以自动的进行类型推导

2.7.匿名函数的参数类型

匿名函数是否需要添加类型注解，最好不要哈哈哈

const arr: string[] = ["a", "b", "c"]
arr.forEach(function(item, index, arr) {
    console.log(item, index, arr)
})

2.8.对象类型和函数类型的结合使用

type ZType = {
    x: number
    y: number
    z?:number
}
function KKType(point: ZType) {
    console.log(point.x)
    console.log(point.y)
}
KKType({x:1, y: 2})

2.9.可选类型

?:

type ZType = {
    x: number
    y: number
    z?:number
}

三、TS类型

⭐⭐⭐

3.1…any

any类型表示不限制标识符的任意类型，并且可以在该标识符上面进行任意的操作，

• 包括获取不存在的属性、方法；
• 给一个any类型的变量赋值任何的值，比如数字、字符串的值；

这样都是不报错的

3.2.unknown

• unknown类型默认情况下在上面进行任意的操作都是非法的
• 要求必须进行类型的校验，才能根据缩小之后的类型，进行对应的操作

let foo: unknown = "aa"
if(typeof foo === "string") {
    console.log(foo.length)
}

3.3.void

• ts中如果一个函数没有任何的返回值，那么返回值的类型就是void类型
• 如果返回值是void类型，那么也可以返回undefined类型

function sum(num1: number, num2: number): void {
    console.log(num1 + num2)
}

2.9.never

实际开发中只有进行类型推导时，可能会自动推导出never，很少使用

• 死循环
• 封装框架/工具库的时候可以使用一下never

function handleMessage(message: string | number | boolean) {
    switch (typeof message) {
        case "string":
            console.log(message.length)
            break;
        case "number":
            console.log(message)
            break
        case "boolean":
            console.log(Number(message))
            break
        default:
            const check: never = message
    }
}

handleMessage("aa")
handleMessage(12)
handleMessage(false)

2.10.tuple

在函数中使用元组类型是最多的
存这些类型不一样的信息，用对象和元组都可以

const info:[string, number, number] = ["kk", 18, 1.7]

tuple通常可以作为返回的值，在使用的时候会非常的方便；