TypeScript入门 | 青训营笔记

眩晕的洋葱
73 阅读2分钟

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

1、什么是TypeScript？

一直在学的都是Javascript，只听说过Typescript，这不，入门级的课程就来了吗？

首先，什么是Typescript？

  • 静态类型
    • 可读性增强：基于语法解析TSDoc，ide增强
    • 可维护性增强：在编译阶段暴露大部分错误 => 多人合作的大型项目中，获得更好的稳定性和开发效率
  • JS的超集
    • 包含于兼容所有Js特性，支持共存
    • 支持渐进式引入与升级

总而言之：TypeScript是JypeScript的超集，静态类型和面向对象编程，并且适合大型应用或者多人协作。

2、基本语法

基础数据类型：

        // 字符串
        const q: string = 'string';
        
        // 数字
        const w: number = 1;

        // 布尔值
        const e: boolean = true;

        // null
        const r: null = null;

        // undefined
        const t: undefined = undefined;

与js定义基本数据类型比较，如此写法让TS这一个弱类型语言看上去是一个强类型语言

函数类型

根据基本数据类型的写法，那函数类型也就是“依样画葫芦”啦。

    function add(x:number, y:number):number {
        return x+y;
    }

对象类型

image.png

函数重载

image.png

数组类型

在前面加个type即可

image.png

TypeScript补充类型

image.png

TypeScript泛型

image.png

3、高级类型

  • 联合/交叉类型
    • 为书籍列表编写类型 => 类型声明繁琐，存在太多重复
    • 联合类型：表示一个值可以使几种类型之一
    • 交叉类型：多种类型叠加到一起成为一种类型，包含了所需的所有类型的特性 image.png
  • 类型保护与类型守卫
  • 高级类型
  • 函数返回值类型

4、高级应用

由下图可以知道，尽管你写的是TS文件，在使用npm安装tsc后，浏览器并不会直接读取你的ts文件，而是使用tsc运行编译转为js文件后再运行，所以可以不用怕ts与js的兼容性问题~

image.png

5、自我补充

比较一下Typescript与Javascript

  • Typescript更适合编写应用程序
  • Typescript跨平台、开源
  • 开始于JS，结束于JS
  • 重用JS，直接引入JS流行的库
  • 类、接口、模块
  • 在Vue、Node、React中都可以使用Typescript
  • 强类型限制（JS是弱类型）

6、个人总结

也就只学到了一点点关于ts的皮毛，确实是一门值得去学习的语言了。希望之后学有余力的时候能够回过头来深入学习一下吧。

avatar
文章
阅读
粉丝