学习TypeScript| 青训营笔记

69 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第4天

TypeScript的基础介绍

TypeScript是由微软开发的自由并开源的语言,是JavaScript的超集(相当于包含了JavaScript)。TypeScript与JavaScript都是弱类型语言即定义的变量类型可以根据需求变化,但前者是静态,后者是动态。所以TypeScript虽然是弱类型语言,但它在定义变量的时候需要显式指明数据类型。之后我将写一段代码验证这点。

学习一门新的编程语言那自然是从如何输出“Hello World!”做起。

const hello : string = "Hello World!"
console.log(hello)

再附上一段用JavaScript写的“Hello World!”

const hello  = "Hello World!"
console.log(hello)

两者的区别就在于是否显式指明hello的数据类型,也就是前文提到的静态和动态语言的区别。而TypeScript跟JavaScript比起来具有什么好处呢?

  • 可读性增强: TypeScript基于语法解析TSDoc,ide增强。
  • 可维护性增强:在编译阶段,TypeScript将会暴露大部分错误。
  • 团队开发性好:以上两点说明了TypeScript在大团队合作的项目中具有更高的稳定性和合作效率。

TypeScript的基础语法

TypeScript的基础数据类型

TypeScript有number,string,boolean等11种基础数据类型。

  • any :任意类型,可以赋予任意类型的值。
  • number : 数字类型,双精度 64 位浮点值。它可以用来表示整数和分数,也可以表示进制,例子如下。 let binaryLiteral: number = 0b1010; // 二进制
  • string : 字符串类型,使用单引号或双引号。
  • boolean : 布尔类型,表示逻辑值true和false。
  • 数组类型 : 在元素类型后面加上[]let arr: number[] = [1, 2]; 或者使用数组泛型 let arr: Array<number> = [1, 2];
  • 元组类型 : 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
  • enum :枚举类型用于定义数值集合。enum Color {Red, Green, Blue};
  • void :用于标识方法返回值的类型,表示该方法没有返回值。
  • null :空值,表示对象值缺失。
  • undefined :未定义的值,用于初始化变量为一个未定义的值。
  • never : 其他所有类型的子类型,代表从不会出现的值,通常表现为抛出异常或无法执行到终止点(例如无限循环)。

注意 : 不管是TypeScript还是JavaScript都没有整数类型

对象类型

首先解释下什么是对象类型。对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等,如下示例:

interface object = { 
    read only key1: number; //只读属性,无法修改 
    key2: string; //字符串
    key3: "1"|"2" |"3"; //选择
    key4?: string; // 用?代表可选属性,定义该属性可以不存在
    [key5: string]: any; //代表任意属性,约束所有对象属性都必须是该属性的子类型
    

在定义好对象后,可以通过object.key6= "any"来添加任意属性,其中“key6”代表属性名,“any”代表属性值。

函数类型

直接展示函数类型的示例:

function add(x: number, y: number):number{
    return x + y;
}
consult mult:(x: number, y: number)=> number = (x,y) = x * y;

引用

青训营TypeScript课程

菜鸟教程-TypeScript