这是我参与「第四届青训营 」笔记创作活动的的第2天

1. TypeScript与React/Vue/Angular的关系

2014-10 Angular支持 2016-05 React支持 2020-09 Vue支持

2. TypeScript与JavaScript的关系

Javascript是动态的，TypeScript是静态的

3. TypeScript的基本语法

数据类型:

const a:string = "string";
const b:number = 1;
const c: boolean = true;
const d: null = null;
const e: undefined = undefined;

对象类型：

const bd: NBytedancer = {
    jobId: 1,
    name: "sha",
    age: 10,
    hobby: 'dancing',
}
interface NBytedancer = {
    readonly jobId:number;
    name:string;
    age:number;
    hobby?: string;
    /*带？属于可选属性,可以不存在*/
    [key:string]:any;
    /*any为任意属性*/
}

函数类型

function add(x:类型,y：类型):类型{
    return x + y;
}
const mult:(x:number, y:number)=>number = (x,y) => x*y; //箭头函数

函数重载

它可以简单地称为一个单独功能可以执行多项任务的能力。

• TypeScript 的函数重载： 为同一个函数提供多个函数类型定义来进行函数重载，目的是重载的pickCard函数在调用的时候会进行正确的类型检查。
• js 因为是动态类型，本身不需要支持重载，直接对参数进行类型判断即可，但是ts为了保证类型安全，支持了函数签名的类型重载，即多个overload signatures和一个implementation signatures juejin.cn/post/691230…

数组类型和泛型

type Arr1 = number[]; //使用类型+方括号

type Arr2 = Array<string|number|Record<string,number>>;//数组泛型

type Arr3 = [number,string,number,number]; //元组

interface Arr4{
    [key:number]:any;
}

其他TypeScript类型

TypeScript泛型

类型别名

type IObjArr = Array<{
    key:string;
    [objKey:string]:any;
}>

类型判断

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

使用的时候需要用as关键字断言result类型为正确类型