TypeScript学习 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天，今天学习了TypeScript的基本操作。

什么是TypeScript？

TS可以理解为JavaScript的扩展，扩展了js的语法。在引用时需要经过ts转换器转换才能使用。

基础语法

• 数组：let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];

• 元组：let info:[string,number,boolean]=["temp",1,false]

• any:可理解为任意，使用该类型需要处理类型判断问题 let a:any;a=10;a="temp";a=[10,20]

• 联合数据类型：管道符号连接标识数据类型的联合，下例value可为string和number类型 const log = (value : string | number )

• 类型别名：给定义的类型起一个别名，该别名可赋予多个类型，下例所示：

type temp= number | string
let a:temp="temp";
let a:temp=1;

面向对象

• Class：类的概念

class Person{
    age:number;
    name:string;
}

• 函数：函数增加了声明的方式

function add(a:number,b?:number):number{
...content...
}
/*箭头函数*/
const add = (a:number,b:number) => {
    return a+b
}

• 构造函数：随着类的实例化而自动执行的函数，和一般的构造函数使用方式差不多
• 继承：子类继承父类的属性和方法 class Son extends Person{}

函数重载： 不必为对不同函数类型参数个数而编写多个函数。多个函数使用同一个名字，即使用时参数的个数或数据类型可以不同，函数调用时虽然名字相同，但是会根据函数的个数以及类型进行调用。

高级数据类型

TypeScript的高级数据类型有

• 联合/交叉类型:

A|lB; 联合类型表示一个值可以是几种类型之一；lA&lB;交叉类型表示多种类型可一叠加一起成为新的一种类型，包含所有类型的特性。

• 类型保护和类型守卫

interface IA { a: 1, a1: 2 }
interface IB { b: 1，b1: 2 }
function log(arg: IA | IB) {
    //报错:类型“IA| IB"上不存在属性“a”。类型“IB"上不存在属性“a”。
    // 结论: 访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分 * /if (arg.a) {
    console.log(arg.a1)
}else {
    console.log(arg.b1);
}

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

总结

TypeScript支持ES6，方便了对于js的编写，js是会在执行时发生错误，但是TypeScript会在编译阶段发生报错警告，这个特性帮助我们在开发阶段减少犯错的几率。