前端基础概述-TypeScript|青训营笔记

这是我参与

「第四届青训营」笔记创作活动的第7天

什么是TypeScript

TypeScript 起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目
TypeScript 是静态类型的语言，根JavaScript一样也是弱类型语言，支持Vue和React
TypeScript 设计目标是开发大型应用，它可以编译成 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上

TypeScript 与 JavaScript的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，JavaScript代码能够与TypeScript一起工作，支持渐进式引入和升级
TypeScript增加了类型推断、接口、泛型等特性

关于语法

基本数据类型

//字符串
const str : string = 'string';
//整型
const num : number = 1;
//布尔
const bool : boolean = true;
//null
const n : null = null;
//undefined
const unde : undefined = undefined;

基本数据类型同 JavaScript 无太大差别

对象

//接口
interface Myobject{
    //只读：不能在对象初始化外赋值
    readonly ID : number;
    name : string;
    sex : 'male' | 'female';
    //可选属性：可用可无
    hobby ?: string;
    //任意属性: 约束所有对象属性都必须是该属性的子类型
    [key : string] : any;
}

readonly 标记只读

?: 标记可选

函数

interface funn{
    (x : number, y : number) : number;
}
const fun : funn = (x,y) => x*y;

数组

type Iarr1 = number[];
type Iarr2 = Array<string | number | Record<string , number>>;
type Iarr3 = [number,number,string,];
interface Iarr4{
    [key : number] : any;
}
const arr4 : Iarr4 = ['string',()=> null,{},[]];

通过别名可以让数组产生多种形态

泛型

//不指定具体的类型，而是在使用时再指定类型
type Igetarr = <T>(target : T) =>T[];
//泛型接口
interface funx<T,U>{
    key : T;
    val : U;
}
//泛型类
class Iobject<T>{
    instance : T;
}
//泛型别名
type Itypearr<T> = Array<T>;
//泛型约束，限制泛型指定的数据类型
type onlyT = <T extends string>(target : T) => T[];
//参数默认类型
type IRepeatArr<T = number> = (target : T) => T[];

别名&断言

//通过type关键字定义别名类型
type IobjArr = Array<{
    key : string;
    [objKey : string] : any;
}>
function keyBy<T extends IobjArr>(objArr : Array<T>){
    //未指定类型时，result类型为{}
    const result = objArr.reduce((res,val,key) =>{
        res[key] = val;
        return res;
    },{});
    //通过as关键字断言result为特定类型
    return result as Record<string,T>;
}

字面量

//指定别名类型的固定值
type IdomTag = 'html' | 'body' | 'div' | 'span';
type IoddNumber = 1 | 3 | 5 | 7 | 9;

高级类型

联合/交叉

//联合类型:表示一个值可以是几种类型之一
const people = [{
    name : 'henry',
    age : 20,
    sex : 'male',
},{
    name : 'rose',
    age : 18,
    sex : 'female',
}]
//交叉类型：多种类型叠加为一种类型，包含了所有类型的特性
type peopleList = Array<{
    name : string;
} & ({
    age : number;
    sex : 'male';
} | {
    sex : 'female';
})
>

类型守卫

interface IA{a : 1,a1 : 2}
interface IB{b : 3,b1 : 4}
//类型守卫：定义函数返回值是类型谓词，生效范围是子作用域
function isIA(arg : IA | IB) : arg is IA{
    return !!(arg as IA).a;
}
function showlog(arg : IA | IB){
    if(isIA(arg)){
        console.log(arg.a1)
    }
    else{
        console.log(arg.b1);
    }
}