TS之再学一遍

写在前面: Typescript终于在项目中用上了,虽然只是小规模的使用,再次总结一下TS在实际场景中的使用,以及各个特性的坑,后面就可以往高级语法学习了,权当是笔记,没有总结成向外输出和讲解的语句.

类型推断

interface MarkerInfo {
    id: number,
    name: string,
    type: string,
    markerCover: string,
    point: [number, number, number],
    cameraVisit?: [number, number, number],
}

定义类型

定义数组

TS中的数组,里面的每一项都得符合所定义数据类型,如果要使一个集合中包含多种类型的数据,则要使用元组(Tuple)

let arr:string[] = ["1","2"]; //一个数组中全是字符
let arr2:Array<string> = ["1","2"]； //一个数组中全是字符

定义对象

Object(大写的O）,代表所有的原始类型或非原始类型都可以进行赋值,除了null和undefined

    let obj: Object;
    obj = 1; // ok
    obj = "a"; // ok
    obj = true; // ok
    obj = {}; // ok
    obj = Symbol() //ok
    obj = 10n //ok
    obj = null; // error
    obj = undefined; // error

联合类型

let arr:(number | string)[];   //一个数组中既有数字又有字符

let sum:number | string = ''; //一个变量的值可以是数字和字符

交叉类型

    type AProps = { a: string }
    type BProps = { b: number }

    type allProps = AProps & BProps // 两周类型定义合并成一种

    const Info: allProps = {
        a: '小杜杜',
        b: 7
    }
    
// PS: 如果两种类型存在同名属性,那么极大可能会报错
    代码如下:
    type AProps = { a: string, c: number }
    type BProps = { b: number, c: string }
    
    type allProps = AProps & BProps

    const Info: allProps = {
        a: '小杜杜',
        b: 7,
        c:  1, // error (property) c: never
        c:  'Domesy', // error (property) c: never
    } // 不存在既是number又是string的值

类型推断

let 定义的变量可以拥有TS的类型推断的特性

{
  let str = 'this is string'; // 等价
  let num = 1; // 等价
  let bool = true; // 等价
}
{
  const str = 'this is string'; // 不等价
  const num = 1; // 不等价
  const bool = true; // 不等价
}

接口(interface)

interface MarkerInfo { id: number, name: string, type: string, markerCover: string, point: [number, number, number], cameraVisit?: [number, number, number], }

枚举(enum)

定义一些带名字的常量,表示一个事物所拥有的不同状态

• 枚举的类型只能是 string 或 number
• 定义的名称不能为关键字

类型别名(type)

断言(as)

使用 as 语法做类型断言,当我们清楚的知道表达式运行后的结果但ts推断不完全的时候,可以使用断言来解除ts的报错

const arrayNumber: number[] = [1, 2, 3, 4];
const greaterThan2: number = arrayNumber.find(num => num > 2); // 提示 ts(2322)

// 使用断言

const arrayNumber: number[] = [1, 2, 3, 4];
const greaterThan2: number = arrayNumber.find(num => num > 2) as number;

泛型(Generics)

是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

也就是说，泛型是允许同一个函数接受不同类型参数的一种模版，与any相比，使用泛型来创建可服用的组件要更好，因为泛型会保留参数类型

可以轻松TS中解决输入输出要一致的问题

// 函数print要打印各种类型的值,参数注解不方便,用any又不友好,于是使用泛型
// 不使用泛型
function print(arg:string | number):string | number {
    console.log(arg)
    return arg
}

// 使用泛型
function print<T>(arg:T):T {
    console.log(arg)
    return arg
}

泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出

type使用泛型

type Print = <T>(arg: T) => T
const printFn:Print = function print(arg) {
    console.log(arg)
    return arg
}

interface使用泛型

interface Iprint<T> {
    (arg: T): T
}

function print<T>(arg:T) {
    console.log(arg)
    return arg
}

const myPrint: Iprint<number> = print

End