TypeScript基础

一、安装依赖

npm i typescript -g

 二、关闭严格模式

tsc --init

 1. 原始数据类型

• Boolean

• number

• string

• undefined

• null

• any

// Boolean
let isDonn: boolean = true
// number
let num: number = 10
// string
let str: string = 'sssss'
// undefined
let unde: undefined = undefined
// null
let nul: null = null
// any
let age: any = 18
age = '10'

2. 数组和元祖

// 数组
const arr: number[] = [1,2,3]
// 元祖
const arr2: [number, string] = [123, '123']

元祖：本质上其实就是数组，不过跟数组不一样的就是可以单独限制数组中的每个数据类型

3. interface接口

interface person {
    name: string,
    age: number,
    readonly jobNo: number, // 只读属性
    salary?: number  // 可选属性
}
 
let yaoqi: person =  {
    jobNo: 10001,
    name: 'yaoqi',
    age: 20
}

• 通过interface关键字定义接口

• 属性前添加readonly表示只读属性

• 属性后加?问号表示可选属性

4. 类型推论、联合类型、类型断言

类型推论

❝

变量不需要声明类型，根据赋值自定推论出变量类型

❞

let str = 'abc'  // 推论str为string类型
// str = 123   // 会报警告

联合类型

❝

联合类型就是可以指定多个类型

❞

let strOrNum: string | number = 'abc'  // 变量可以是多种类型
strOrNum = 123

类型断言

❝

当变量不确定是什么类型，但是我们知道会是什么类型时，可以断言为某种具体类型

❞

通过as关键字断言

// 通过as关键字断言
function getLength(input: string | number): number {
    let str = input as string  // 断言input是string类型
    if(!str.length) {
        return input.toString().length
    }
    return str.length
}

隐式断言

❝

不需要主动断言，ts会根据代码逻辑自动断言出类型

❞

// 隐式断言
function getLength2(input: string | number): number {
    if(typeof input === 'string') {
        // 已经隐式断言input为string
        return input.length
    } else {
        // 已经隐式断言input为number
        return input.toString().length
    }
}

5. 枚举enums

❝

枚举就是固定的几个值，比如每周的工作日，红绿灯的颜色。

类似数组，默认索引是从0开始的数字，索引可以修改。

❞

枚举

// 枚举
enum Direction {
    Up,  // 0
    Down,  // 1
    Left,  // 2
    Right = '右'  // 3
}
 
console.log(Direction.Up);  // 0
console.log(Direction[0]);  // Up
console.log(Direction['Right']);  // 右

编译后的js代码

// 枚举
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction["Right"] = "\u53F3"; // 3
})(Direction || (Direction = {}));
console.log(Direction.Up);    // 0
console.log(Direction[0]);       // Up
console.log(Direction['Right']);     // 右

常量枚举

❝

在enum前面加一个const就可以变为常量枚举

常量枚举编译后的js代码量少，因为编译成了对应的值，没有枚举创建的过程了。

❞

// 枚举
const enum Direction {
    Up,  // 0
    Down,  // 1
    Left,  // 2
    Right = '右'  // 3
}
console.log(Direction.Up);  // 0
console.log(Direction['Right']);  // 右

编译后的js代码

console.log(0 /* Direction.Up */); // 0
console.log("\u53F3" /* Direction['Right'] */); // 右

6. 泛型

❝

定义函数、接口和类的时候不指定类型，使用的时候再定义类型

定义的时候先创建泛型名称，使用泛型代替类型，也就是泛型代指某一种具体类型。

❞

泛型-第一部分：定义泛型

定义函数、接口和类的时候，在名称后面加上< >来定义泛型，< >里面加上泛型的名称

// 泛型
// 定义函数、接口和类的时候不指定类型，使用的时候再定义类型
function echo(arg: T): T {
    return arg
}
// 根据传入的类型决定返回的类型
const res = echo(123);  // res等于number类型的123
const res2 = echo('123');  // res2等于string类型的123
console.log(typeof res, typeof res2);  // number  string

• 创建了一个名称为T的泛型，「T到底是什么类型不知道，可能是任何一种，具体是什么要看使用时传入的类型。」

• arg: T 使用泛型T作为入参的类型

• 将泛型T作为函数返回值

定义多个泛型

// 定义多个泛型
// 示例：调换数组元素顺序的函数
function swap(tuple: [T, U]): [U, T]{
  return [tuple[1], tuple[0]]
}
 
const res3 = swap(['str', 123])
console.log(typeof res3[0]);  // number
console.log(typeof res3[1]);  // string 

泛型-第二部分：约束泛型

❝

通过泛型约束传入的参数中必须包含某个属性，通过添加extends关键字约束泛型。

❞

function echoLength(arg: T) :T{
    console.log(arg.length);   // 这里会报一个警告：类型“T”上不存在属性“length”
    return arg
}

上面的函数中会报一个警告：类型“T”上不存在属性“length”。

如果泛型T是string或者array没问题，因为本身就有length，但如果是number就会报错，因为number没有length属性。因为ts不知道泛型T会是什么类型，所以也就不知道arg上面会不会有length属性。

如果使用「泛型约束」就可以很好的解决上面得问题，因为可以约束泛型T必须包含length属性。

「通过extends关键字约束泛型」

interface IWithLength {
    length: number
}
function echoLengthextends IWithLength>(arg: T) :T{
    console.log(arg.length);   // 这里会报一个警告：类型“T”上不存在属性“length”
    return arg
}
const str = echoLength('str')   // 3
const obj = echoLength({ length: 8 })  // 8

泛型-第三部分：泛型在类和接口中的使用

「在类中的使用」

class Queue {
    // 数组
    private data:T[] = []
    // 添加item
    add(item: T) {
        return this.data.push(item)
    }
}
// 创建一个number的数组，添加的也必须是number
const queue = new Queue()
queue.add(123)
// 创建一个string的数组，添加的也必须是string
const queue2 = new Queue()
queue2.add('123')

「在接口中的使用」

interface keyPair {
    key: T,
    value: U
}
// key为number，value为string
const data:keyPair = {
    key: 13,
    value: 'enter'
}
// key为string，value为number
let data2:keyPair
data2 = { key: 'enter', value: 13 } 

「通过泛型创建数组」

let dataList:Array