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

什么是TypeScript?

TypeScript是由微软开发的开源的编程语言。TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript，TypeScript可以在任何浏览器上运行。TypeScript是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。

下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系：

TypeScprit官网：www.typescriptlang.org

安装使用

npm install -g typescript

TypeScript基础

JS：动态类型，弱类型语言

TS：静态类型，弱类型语言

动态类型：执行阶段确定类型的匹配

弱类型语言：特征是类型转换，强类型语言中，数字和字符串是无法相加的。

TypeScript 和 JavaScript的区别

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页。
可以在编译期间发现并纠正错误	可以在编译期间发现并纠正错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用
支持模块、泛型和接口	不支持模块，泛型或接口
支持 ES3，ES4，ES5 和 ES6 等	不支持编译其他 ES3，ES4，ES5 或 ES6 功能

TypeScript的优点

静态类型

可读性增强：基于语法解析TSDoc,ide增强

可维护性增强：可以暴露出大部分错误，语法编写错误，类型匹配错误等。
JS的超集

包含于兼容所有js特性，支持共存支持渐进式引入和升级

基础语法

基础类型 string number boolean null undefined
对象类型

interface classA{
    readonly jobId:number;//只读属性
    name:string;
    sex:'man'|woman', 
    age:number,
    hobby?:string;// 可选属性
    [key:string]:any // 任意属性：约束所有对象都必须是该属性的子类型
}
class ClassA:classA={
    jobId:12452,
    name:'lin',
    sex:'man',
    age:28,
}

函数类型

interface Imult{
    (x:number,y:number):number;
}
const mult:Imult=(x,y)=>x*y;

function multA(x:number,y:number):number{
    return x*y;
}

const multB:(x:number,y:number)=>number=(x,y)=>x*y

函数重载

function makeDate(timestamp:number):Date;
function makeDate(m:number,d:number,y:number):Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number):Date{
    if(d!==undefined&&y!==undefined){
        return new Date(y,mOrTimestamp,d);
    }else{
        return new Date(mOrTimestamp);
    }
}
const d1=makeDate(1234566);
const d2=makeDate(5,5,5);

数组类型

//定义
type Arr1=number[];
type Arr2=Array<string|number,Record<string,number>>
// 元组表示
type Arr3=[number,string]
// 接口表示
interface Arr4{
    [key:number]:any
}
// 初始化
const arr1:Arr1=[1,2,3];
const arr2:Arr2=[1,2,'3,'4',{a:1}];
const arr3:Arr3=[1,'3'];
const arr4:Arr4=['string',()=>null,{},[]]// 任意类型

补充类型

// 空类型
type IEmptyFunction=()=>void;
// 任意类型，
type IAnyType=any;
// 枚举类型：支持枚举值到枚举名的正、反向映射
enum EnumExample{
    add='+',
    mult='*',
}

泛型

function getRepeatArr(target){
    return new Array(100).fill(target);
}

type IGetRepeatArr=(target:any)=>any[];
/ 不预先指定类型
type IGetRepeatArr1=<T>(target:T)=>T[];

// 泛型接口&多泛型
interface IX<T,U>{
    key:T;
    val:U;
}
// 泛型类
class Itype<T>{
    instance:T;
}
// 泛型别名
type ITypeArr<T> =Array<T>;

类别别名&类型断言

type IObjArr=Array<{
    key:string;
    [objKey:string]:any;
}>
function KeyBy<T extends IObjArr>(objArr:Array<T>){
    const result=objArr.reduce((res,val,key)=>{
        res[key]=val;
        return res;
    },{});
    // 判断
    return result as Record<string,T>;
}

字符串/数字字面量：指定字符串/数字必须的固定值

type ITag='html'|'body'|'div';
type INumber=1|2|3|4;

TypeScript入门 | 青训营笔记

什么是TypeScript?