入门TypeScript｜ 青训营笔记

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

---

一、为什么是TypeScript

微软-VScode

源于Javascript，兼容JS

TS为静态类型，弱类型

• 可读性强
• 可维护性
• 开发大型项目的稳定性和开发效率

二、基本语法

const w: number=1;

变量名：类型=value;

对象类型 Istudent

interface Iemployee{
    readonly jobId: number;  //只读属性，初始化后不可再赋值
    name: string;
    sex: 'male'|'female'|'others';
    hobby?=string;        //可选属性
    [key: string]: any;   //任意属性

函数类型

const mult: (x:number, y:number) =>number=(x, y) =>x*y;

可用接口定义

定义

function greet():string { // 返回一个字符串 return "Hello World" }

函数重载

function disp(s1:string):void;
function disp(n1:number,s1:string):void;
function disp(x:any,y?:any):void {
    console.log(x); 
    console.log(y);
    } 
disp("abc") 
disp(1,"xyz");

数组

补充

type IEmptyFuncyion=() => void;  //空类型
type IAnyType=any;    //任意类型。所有类型的子类型
enum EnumExample{     //枚举，正反向 b 
    add='+',
    mult='*',
    }
EnumExample['add']==='+';
EnumExample['+']=='add';

泛型

不预先定义，使用时再指定类型

function getReoeatArr(target) {
 return new Array(999).fill(target);
 }
 
type IgetRepeatArrR = <T>(target: T) => T[];

接口/类 泛型

interface IX<T, U>{
    key: T;
    val: U;
}

class IMan<T>{
    instance: T;
    }

约束：符合字符串 type IGetRepeatStringArr= <T extends string>(target: T) =>t[];

默认参数类型 type IGetRepearArr<T =number> =(target: T) => T[];

字符串、字面量

指定的字符串/数字

type IDomTag = 'html'|'body'|'div'|span';
type IOddNumber  =1|3|5|7|9;

三、高级类型

联合/交叉类型

• 联合：IA|IB;
• 交叉：IA&IB；

类型保护/首卫

函数返回为类型谓词，子作用域生效。

实现reverse函数，自动判断类型

function logBook(book: IBookItem){
    if(book.type==='history')
    console.log(book.range);
    else
    console.log(book.theme);

函数返回值类型

实现delayCall类型声明 ，接受入参 后返回结果

function delayCall(func){
    return new Promise(resolve =>{
        setTimeout( () =>{
            const result =func();
            reslove(result):
            }, 1000);
        });
    }

extends表示类型推断（三元表达式）

type IDelayCall = <T extends () =>any>(func: T) => ReturnType<T>;

四、工程应用

Webpack配置启动 loader： ts->js
awesome-typescript-loader - npm (npmjs.com)

node.js 用TSC编译