手摸手教你使用Typescript

678 阅读3分钟

一. TypeScript是什么

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。

二. TypeScript的简介

它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

三. TypeScript的使用场景

TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计,并且可以编译为JavaScript。

四. TypeScript的优势有哪些

1.类型系统辅助开发工具的提示系统(尤其团队开发)。
比如说,当我们在调用公共函数时,编辑器可以清楚地告诉你该函数需要几个参数、参数是什么类型的、哪些参数是可选的。这样可以省去大量查阅、沟通成本,提高开发效率。
2.对错误代码的标示、防止类型自动转换 。
在自己写代码的过程中能及时发现类型转换导致的错误,方法调用传参是否全面,参数类型是否正确,维护一个好的系统就是少写新BUG。
总结:既能享受静态类型带来的优点,如 IDE全方位的开发辅助和严格的代码检查;又能让代码像 Javascript 一样简洁和灵活!

五. TypeScript的常见使用方法

前端 Typescript的常用的基础类型
1.boolean
2.number
3.array
4.null
5.undefined
6.any  (偷懒的时候使用)
7.void (常用于方法没有返回值)

// 声明的一个接口类型

interface Params {
    tag1: number, //必传类型
    tag2: { //对象类型 需要声明对象内的属性类型
        name: string,
        length: number
    },
    tag3 ?: string, //选传类型
    readonly tag4 : string, //在初始化时创建、之后只能读取
    [propName: string]: any //可能有其他的未知属性 属性类型任意
}

interface AddParam {
    moreTags: string 
}

interface OwnerParams extends Params, AddParam{
    special: boolean //接口类型组合
}

举个🌰当我们定义一个对象后,在使用对象时会自动提示他有哪些属性和这些属性的类型值。

当我们去掉未知类型后,在当前对象上声明一个新的属性会提示错误🙅‍♂️

划重点,当我们多人开发的时候,使用TS 能让我们明白这个方法的传递参数是什么结构类型,返回指是什么结构类型。这样就能减少沟通中的误差,Code Talks 在开发调用中能很轻易的发现错误,少写BUG

TS只是在开发中会需要多写类型定义代码,帮我们避免类型转换的困扰。实际编译后会转化成javascript,实际部署代码量并不会增加。TS的上手比较简单,可以先从基础数据类型开始使用,为大型项目打基础。