一、Typescript是什么

名词解析：type：类型 script：JavaScript

1、是一个可扩展的JavaScript：除了源生的JavaScript，还提供了类型系统以及ES6~ES10，甚至是EsNext的语法支持

2、兼容各种浏览器、各种系统、各种服务，是完全开源的

（注：Typescript官网有文档可以查看，可自行去Typescript中文网进行查看）

二、Typescript的优点

1、程序更容易理解

问题：函数或者方法输入输出的参数类型、外部条件等

动态语言的约束：需要手动调试等过程（比如：加断点、console.log去查看）

Typescript：代码本身就可以回答上述问题（代码里都写明了类型）

2、效率更高

可以很方便的在不同代码块和定义中进行跳转，代码可自动补全

3、更少的错误

比如编译时变量名称打错，代码会有错误提示

三、Typescript的安装

1、全局安装

npm install -g typescript

2、查看tsc版本、编译ts文件

tsc -v // 查看tsc版本

tsc fileName.ts // 编译ts文件

cat fileName.js // 查看对应的js文件

ts-node fileName.ts // 运行ts文件

// 当运行ts文件的命令行报错时，可能是因为ts-node版本过新，解决方法：

npm uni -g ts-node // 卸载

npm i -g ts-node@8.5.4 // 下载旧版本

3、具体使用实例

（1）新增ts文件：比如：test.ts

（2）编写程序：

const hello = (name: string) => {

    return `hello${name}`

}

hello('abc')

（3）运行程序

（3-1）打开控制台，找到对应文件所在的文件夹，输入 tes test.ts（ts的文件名）

（3-2）等待，会生成一个对应的test.js文件,可通过 cat test.js（js文件名）查看此js文件的内容，能看出和原来的ts文件没什么区别，只是做了一些js文件的适配

四、Typescript的数据类型

1、基础类型——boolean、number、string、undefined、null

let age: number = 10 // 声明了age是数字类型，并赋予了10的默认值

let u: undefined = undefined

let n: null = null

let num: number = undefined

2、基础类型——any

let notSure: any = 4

notSure = 'maybe a string'

notSure = true

notSure.myName

notSurre.getName()

（注：当有明确类型的时候，要避免使用any，此类型可以调用任意属性和方法，因此可能出现错误，也就丧失了类型检查的作用）

（注：在typescript 中，凡在 “ : ” 后面的都是声明类型）

3、复杂类型——array

（1）

// 声明了一个number类型的数组
let arrOfNumber: number[] = [1, 2, 3]

arrOfNumber.push(2)

（2）特殊数组：元组

比如数据中，我们想第一项是number，第二项是string，此时可以用元组

let user: [string, number] = ['123', 2]

// 以下写法是错误的
let user: [string, number] = ['123', 2, 3]  (X)

// 解决
let user: [string, number] = ['123', 2]
user.push(2)

元组的表示和数组非常相似，只不过是将类型写在了里面。元组在JavaScript中还是一个数组，因此我们可以用数组的方法往里添加越界元素，但是添加的只能是规定好的类型

4、复杂类型——obj：interface

typescript中的新概念：interface（又称为duck typing：鸭子类型）

（1）interface的功能：对对象形状进行描述

（2）interface的使用

（注：interface一般会在命名的首字母前加 'I'，用于提醒此为interface）

（2-1）定义一个 interface 接口

interface Iperson {

    age: number;

    name: string;

    old?: number;

    readonly id: number;

}

?：可选属性，该属性可不存在 readonly：只读属性，该属性初始化赋值后不可更改

（2-2）定义一个变量

定义的变量比接口多一个或少一个属性是不允许的（可选除外）

// 此变量是 Iperson 类型

let king: Iperson = {

    age: 10,
    
    name: 'king',

    id: 1

}

5、复杂类型——函数（function）

（1）函数写法1：声明写法

function addFunction (x: number, y: number, z?: number): number {
    if (typeof x === 'number') {
        return x + y + z
    }
    return x + y
} 

// 调用
addFunction (1, 21)

解析：此函数内部类型设置为number，输出结果也设置为number，同样的，调用的时候不可多或少参数（可选参数除外），此时 addFunction 就是函数类型

注：可选参数后不可再添加确定参数

（2）函数写法2：表达式写法

const addFunction = (x: number, y: number, z?: number) => {
    return x - y
}

（3）声明函数类型

（3-1）

函数的类型是不能直接赋值给string，因为string类型和函数类型是不适配的，因此我们需要声明一个一模一样的类型

let add1 : (x: number, y: number, z?: number) => number = addFunction

注：此处的箭头不是箭头函数，而是ts中声明函数类型的返回值的方法，此处表明了返回值是number类型

（3-2）运用 interface 描述函数类型

interface Isum {
    (x: number, y: number, z?: number): number
}

let add1: Isum = addFunction

6、联合类型——union types

（1）联合类型：某个变量可以既是string类型，也可以是number类型

let numberOrString: number | string
numberOrString = 1
numberOrString = '123'
numberOrString.toString()
numberOrString.length   (X)
// 注：当联合属性不确定是哪个类型的时候，我们只能访问联合类型中所有类型共有的属性或方法

let numberOrString: number | string
numberOrString = '123'
numberOrString.length   (√)
numberOrString = 123
numberOrString.length   (X)

let numberOrString: number | string
numberOrString.length   (X)

（2）当我们确实要在不确定类型的时候，方位其中一个属性或方法时：

（2-1）方法1：类型断言：as

告诉编译器，我已确定时什么类型，并且我就是要使用这个类型的属性或者方法，让编译器不报错

function getLength (input: string | number): number {
    // 确定是 string 类型
    const str = input as string
    if (str.length) {
        return str.length
    } else {
        const number = input as number
        return number.toString().length
    }
}

注意：类型断言只可转换成联合类型中已有的类型

（2-2）方法2：typescript的特性：type guard

type guard：type 守护。当遇到一个联合类型的时候，使用这个条件语句，可以自动帮你缩小这个类型的范围，最常见的关键字是：typeof

// 通过条件来智能缩小范围，if 是 string 类型，那么 else 就是 number 类型
function getLength (input: string | number): number {
    // 我们假如它是一个string
    if (typeof input === 'string') {
        return input.length
    } else {
        return input.toString().length
    }
}

五、Typescript的枚举：enum

1、enum的基本用法——数字枚举

enum Direction {
    Up,    // = 0
    Down,  // = 1
    Left,  // = 2
    Right  // = 3
}

console.log(Direction.Up) // 编译文件后，运行结果为：0(命令行：ts-node enums.ts)

console.log(Direction[0]) // 还可以看成一个数组。运行结果：string 类型：Up

enum Direction {
    Up,         // = 0
    Down = 10,
    Left,       // = 11
    Right       // = 12
}

解析：枚举成员会被赋值，从0开始，自上而下递增，当我们给其中一个枚举手动赋值后，接下来没赋值的枚举项会自动递增

2、enum的基本用法——常量枚举

const enum Direction {
    UP = 'up'
}
const value = 'up'
if (value === Direction.UP) {
    console.log('go up')
}

注：不是所有的enum都可以使用常量枚举。枚举的值有两种类型，一种是constant number），另一种是计算值（computed number），只有常量值可以进行常量枚举，此处例子都是常量值

本文含有隐藏内容，请开通VIP 后查看

Typescript——基础篇（1）

目录：