TypeScript 入门 | 青训营笔记

78 阅读2分钟

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

TypeScript的简述

TypeScript是由微软开发的自由和开源的编程语言,是 JavaScript 的一个超集,支持 ECMAScript 6 标准。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。目前Visual Studio Code对TypeScript的支持最好,因为VS Code和TypeScript都是由微软发布的
TypeScript的特点

  • 可读性增强:在ide上可生成一些说明TSDoc
  • 可维护性增强:在编译阶段就能暴露大部分错误 以上2点使得在多人合作的大型项目中,获得更好的稳定性和开发效率
  • 兼容所有的JS,支持共存
  • 支持渐进式引入与升级

TypeScript与JavaScript的异同

TypeScript与JavaScript都是弱类型语言 JavaScrip是动态类型语言(即不需要编译直接在浏览器上运行),TypeScript是静态类型语言(需要编译)

TypeScript的基本语法

  1. 数据类型 同样的意思 JS代码如下:JS代码运行时才确定数据类型 image.png
    TS代码如下:const/var/let 变量名: 数据类型=字面量 image.png
  2. 对象类型
    TS定义一个IBytedancer类型的对象bytedancer
    image.png
    TS用关键字interface定义一个类型,习惯上在类型名前加一个大写的I来表示这是一个自定义的类型来与类和对象区分。readonly表示这是一个只读属性,用|限定sex可能的取值,在属性名后加问号?表示该属性可有可无,any表示取值可以是任意类型 image.png image.png
  3. 函数类型
    JS定义函数
    image.png
    TS先声明一个函数类型,定义函数变量mult时再引用之前定义好的IMult函数类型
    image.png
    或定义函数的时候声明参数和返回值的类型 image.png
  4. 数组类型
  • 类型[]表示
    type IArr1=number[]表示数组元素只能是数字类型,比如const arr1: IArr1 =[1,2,3,4,5,6];同理type IArr1=string[]表示数组只能是字符类型,比如const arr1: IArr1 =['a','b','c','e','字符串']
  • 泛型表示
    type IArr2=Array<string | number | Record<string, number>>表示数组的元素只能是字符(串)或数字或 键为字符类型值为数字类型的键值对,比如const arr2: IArr2 =[1,'a','c',{a:1,b:2},2]
  • 元组表示
    type IArr3= [number, number, string, string]表示数组第1和第2位是数字类型,第3和第4位是字符类型,比如const arr3: IArr3 =[1,2,'string','b']
  • 接口表示
interface IArr4{
    [key:number]:any
}

表示键为数字类型,值为任何类型的字典(由多个键值对组成),即js中普通的数组。例如const arr4: IArr4 =[1,'a',{},()=>{},null,true]在JS中相当于const arr4=new Aarry()const arr4=[]