【TypeScript】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通常可以作为返回的值在使用的时候会非常的方便