TypeScript 基础知识要点

基本类型

let date: Date;
let numOrStr: number | string = "";
let nev: never;
let anyType: any;

数组

有两种，一种直接定义类型，一种使用Array 泛型

const arr3: { id: number; name: string }[] = [{id: 8, name: 'jjj'}];

const arr4: Array<{ id: number; name: string }> = [];
arr4.push({id: 6, name: 'd'})

函数

// 给变量func定义类型，其是个函数，因此类型是({name: string}) => void
const func: ({name: string}) => void = obj => { 
    console.log(obj.name);
}

// 定义返回类型
function fun2(name: string): Array<{ id?: number; name?: string }> { 
    // ok
    // return [{ }];
    console.log(name)
    // wrong
    return [{ age: 2 }];
  }

函数重载

    interface Info {
        name: string;
        age: number;
    }
    
    // overload
    function a(name: string, age: number): Info;
    function a(info: Info): Info;
    
    function a(a: string | Info) {
    if (typeof a === "object" && a) {
        return a;
    }
    return {
        name: "",
        age: 1
    };
    }

泛型

泛型就是为了解决: 在使用的时候再传类型， 比如一个数组，我们想让进队列和出队列元素类型一样 有可能都是 字符串， 有可能都是数字，这种场景可以使用泛型

第一种使用：创建一个泛型类

class Queue<T> {
  private data: T[] = [];
  push = (item: T) => this.data.push(item);
  pop = (): T | undefined => this.data.shift();
}

// 使用时候传入类型：number
const queue = new Queue<number>();
queue.push(0);
queue.push('1'); // Error：不能推入一个 `string`，只有 number 类型被允许

第二种使用：interface中使用

interface A<I>{ // I表示在使用的时候传入的真正类型
  name: I,
  id?: number
}

let obj: A<string> = {
  name: '4'
}

let obj2: A<{age: number}> = {
  name: {age: 8},
}

疑问

• never 用途

答案：never类型是 TypeScript 中的底层类型,表示永远不存在的值的类型。应用举例：1）总是会抛出错误的函数function fail(message: string): never { throw new Error(message); } 2) never 被用于条件类型，以排除掉不需要的情况:type Arguments<T> = T extends (...args: infer A) => any ? A : never

• typeof 和interface区别

答案：参考文章

React中的TypeScript

1， 类型： JSX.Element

let jsx: JSX.Element = <div>dddd</div>
// wrong
jsx = null;
jsx = 2;
jsx = "2";

2, 类型： React.ReactChild

let child: React.ReactChild = <div>dddd</div>
// wrong
child= null
child = false
// ok
child = 'n'
child = 6

3, 类型： React.ReactNode

let node: React.ReactNode;
// ok
node = null
node = 2;
node = '2';
node = false;
node = true;
node = <div>nihao</div>;
node = [];

疑问

• ReturnType是什么？ (答案在高级用法中)

// props from connect
type StateProps = ReturnType<typeof mapStateToProps>;
// props from dispatch
type DispatchProps = ReturnType<typeof mapDispatchToProps>;

高级用法

typeof

typeof用于推断类型, type 用于声明类型

let people = {
    age: 9,
    name: ''
}
type info = typeof people
let newPeople: info = {
    age: 2,
    name: 'jj'
}

keyof

用于获取类型的key值

type Person = {
    name: string;
    age: string;
}

type K1 = keyof Person // 'name' | 'age'
let k2:K1[] = ['name']
// wrong
let k3:K1[] = ['aaa']

in

用于遍历类型的key

    interface Person {
        name: string;
        age: number;
        location: string;
    }
    type Optional<T>={
        [P in keyof T]? : T[P]
    }

    type newPerson = Optional<Person> 
    // newPerson = {
    //     name?: string;
    //     age?: number;
    //     location?: string;
    // }

    type infoKey = "age" | "name";
    type info = { [key in infoKey]: any };
    // info = {
    //     age: any,
    //     name: any
    // }

ReturnType

获取函数返回值类型。

function fun(age: number){
    return {
        age
    }
}

type info = ReturnType<typeof fun>
// info = {
//     age: number
// }

三元操作

type getType<T> = T extends Function ? T : never
// 使用
const a = function(){}

const b: getType<typeof a> = () => 2

infer

表示在 extends 条件语句中待推断的类型变量。

type getArguType<T> = T extends (a: infer A)=>any ? A: never
const a = function(arr: number): void{}
type arguType = getArguType<typeof a>
// 此时arguType = number

// wrong
let info: arguType = 'd'
// ok 
let info2: arguType = 9
``