[JavaScript知识库]ts的基础

?TypeScript ? ? ?

?TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

优势

TypeScript 增加了代码的可读性和可维护性
类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
可以在编译阶段就发现大部分错误，这总比在运行时候出错好
增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

TypeScript 的命令行工具安装方法如下：

npm install -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。

编译一个 TypeScript 文件很简单：

tsc hello.ts

我们约定使用 TypeScript 编写的文件以?.ts?为后缀，用 TypeScript 编写 React 时，以?.tsx?为后缀。

?

TypeScript数据类型：

1.number类型

let num: number = 123;
num = 100;
num = 100.0001;
// num = "100";

let decLiteral: number = 6;//10进制
let binaryLiteral: number = 0b1010;//2进制
let hexLiteral: number = 0xf00d;//16进制
let octalLiteral: number = 0o744;//8进制

console.log(decLiteral,
binaryLiteral,
hexLiteral,
octalLiteral)

2.boolean类型?

//布尔类型只有两个值 true和false
let flag: boolean = true;
flag = false;
flag = 1>0;

3.string类型?

let msg: string = "hello world";

let name: string = "你好";
let age: number = 18

msg = `${name}+年龄:${age}`

export {}

4.null和undefined数据类型

//js中null和undefined是两个基本数据类型
//在ts中 null和undefined他们是类型 也是值
let n: null = null;
let u: undefined = undefined;

n=null
u=undefined

5.symbol类型

// @ts-ignore
let name1: symbol = Symbol("name");
// @ts-ignore
let name2: symbol = Symbol("name");
const obj = {
    [name1]: "hello world",
    [name2]: "你好世界",
}

6.array的类型

//在数组中应该存放相同类型的数据
let arr: Array<string> = []; //第一种写法 react.jsx <div></div>
let arr2: string[] = []; //第二种写法
let arr3 = ["xxx",18, true];

arr.push("你好世界");
// arr.push(1234);

//在数组中最好放相同数据类型的内容
arr.forEach(item=>{
})

7.object类型

const obj = {
    name: "你好世界",
    age: 18
}

console.log(obj.name)

8.any数据类型

//msg这个数据的数据类型可以是任何的数据(和原来的js就完全一样了)
let msg: any = "1234";
msg = 123;
msg = true;
msg = [];
msg = null;

//第三方库 有些库没写过类型注解

9.unknown类型

function fn1(){
    return "这是一个字符串"
}
function fn2(){
    return 1234
}

//unknown类型 只能赋值给any和unknown类型的变量
//any类型 可以赋值给任意类型的变量

let flag = true;
let res: unknown;
if(flag){
    res = fn1();
}else {
    res = fn2();
}

let msg:unknown = res;

console.log(res)

10.void类型

//void 当前方法没有返回值

function fn(num:number, num2:number): number{
    return num+num2
}

function fn2(num:number, num2:number): void{
    console.log(num+num2)
}
let run = fn2(1,2)

11.never类型型?

//never表示永远都不会发生值的类型

function fn(): never{
    throw new Error("手动错误")
}
function fn1(): never{
    while (true){
        console.log(1)
    }
}

function checkType(msg: string | number | boolean){
    let str = "";
    switch (typeof msg){
        case "string":
            str = "string"
            break;
        case "number":
            str = "number"
            break;
        case "boolean":
            str = "boolean"
            break;
        default:
            let check: never = msg;
    }
    return msg+","+str
}
checkType("123")
checkType(123)


checkType(true)

12.tuple类型

//tuple元组: 多种元素的组合

//1.数组
//数组中的数据类型应该保持统一
// let arr: any[] = ["name", 18, true]
// arr[0].length;
// arr[1].length;
//如果不统一,那么应该尝试使用对象替代
/*let obj = {
    name: "name",
    age: 18,
    n: true
}*/


//2.元组 必须要赋值
let arr: [string, number, boolean] = ["name", 18, true]
arr[0].length;
// arr[1].length;


//应用场景
function createState(state: any) {
    let curState = state;
    let setState = (newValue: any) => {
        curState = newValue
    }
    let arr: [any, (newValue: any) =>void] = [curState, setState]
    return arr
}

let [curState, setState] = createState(100);
setState(101);
console.log(curState)


let [title, setTitle] = createState("abc")
setTitle("aaa")
console.log(title)

//优化
function createState2<T>(state: T) {
    let curState = state;
    let setState = (newValue: T) => {
        curState = newValue
    }
    let arr: [T, (newValue: T) =>void] = [curState, setState]
    return arr
}

let [flag, setFlag] = createState(true)
setTitle(false)
console.log(title)

export {}

13.enum类型

//枚举类型
//就是将一组可能出现的值, 一个一个列举出来, 定义在一个类型中,这个类型就是枚举类型

//枚举类型放常量 字符串 数字 (全大写)
enum Direction {
    LEFT = "LEFT",
    RIGHT = "11",
    TOP = "1111",
    BOTTOM = 100
}
enum Url {
    DEV_URL = "www.baidu.com",
    PROD_URL = "www.baidu.com1",
    TEST_URL = "www.baidu.com2"
}

let a:Direction = Direction.LEFT;

function move(direction: Direction){
    console.log(direction)
    switch (direction){
        case Direction.LEFT:
            console.log("向左移动")
            break;
        case Direction.RIGHT:
            console.log("向右移动")
            break;
        case Direction.TOP:
            console.log("向上移动")
            break;
        case Direction.BOTTOM:
            console.log("向下移动")
            break;
        default:
            let err:never = direction
    }
}
move(Direction.LEFT)
move(Direction.RIGHT)
move(Direction.TOP)
move(Direction.BOTTOM)
// move(null)

?