• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript学习笔记

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
 
 

1、什么是 TS?

  • 定义 
    • TS 是 JavaScript 的一个超集,主要提供了 类型系统 和 对 ES6 的支持
    • TS 可以编译成纯 JavaScript 运行于任何浏览器上
    • TS 编译工具可以运行在任何服务器和系统上
    • TS 是开源的
  • 优点 
    • 增加了代码的可读性和可维护性
    • 包容性非常好
    • 拥有活跃的社区
  • 缺点 
    • 学习成本偏高,需要理解接口、泛型、类、枚举类型等概念
    • 短期会增加开发成本
    • 集成到构建流程需要一定的工作量
    • 可能和一些库结合的不太好
 

2、安装 TS

安装命令: npm install -g typescript,该命令会在全局环境下安装 tsc 命令。 
编译 TS 文件方式:tsc hello.ts。 
TS 编写的文件以 .ts 为后缀。 
TS 中使用 : 指定变量类型,: 前后有无空格都可以。

 

3、基础

JavaScript 类型分为两种:

  • 原始数据类型 
    • 布尔值 
      new Boolean() 返回的是 Boolean 对象;Boolean() 返回 boolean 类型。
    • 数值
    • 字符串
    • null
    • undefined 
      undefined 类型只能赋值为 undefined, null 类型的变量只能赋值为 null。与 void 的区别是,undefined 和 null 是所有类型的子类型。
    • ES6 中的新类型 Symbol
  • 对象类型

空值(void): JS 没有空值的概念,在 TS 中用空值表示没有任何返回值的函数;声明 void 类型的变量只能将它赋值为 undefined 和 null。 
任意值(Any)

  • 表示允许赋值为任意类型。
  • 声明一个变量为任意值之后,对它的任何操作,返回内容的类型都是任意值。
  • 变量在声明的时候,未指定其类型,会被识别为任意值类型。

类型推论

  • TS 会在没有明确指定类型的时候推测出一个类型
  • 如果定义的时候没有赋值,会被推测成 any 类型,而不会被类型检查

联合类型

  • 表示取值只能是多种类型中的一种,类型之间用 | 分隔
  • 当 TS 不确定一个联合类型的变量是哪个类型时,只能访问此联合类型的所有类型里共有的属性或方法

对象的类型——接口

  • 在 TS 中使用接口定义对象的类型
  • 接口是对行为的抽象,具体如何行动需要由类去实现接口
  • 对对象的形状进行描述:赋值的时候,变量的形状必须和接口的形状保持一致,多、少都不行
  • 可选属性:属性名称?: 类型
  • 任意属性:一旦定义了任意属性,那么确定属性和可选属性都必须是它的子属性,[propName: string]: string
  • 只读属性:只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候

数组类型

  • 类型 + 方括号 let numArray : number[] = [1, 2, 3]; 数组内只能是数字类型。
  • 数组泛型 Array<elemType> let array: Array<number> = [1,2,3]
  • 使用接口表示数组
 
  1. interface NumberArray {
  2. [index: number]: number;
  3. }
  4. let array: NumberArray = [1,2,3];

只要 index 的类型是 number,值必须是 number 类型

  • any 表示数组中允许出现任意类型 let list: any[] = ['Liu', 25, { website: 'http://liu.com' }];
  • 类数组不是数组类型,有自己的接口定义,如 IArguments,NodeList,HTMLCollection 等
 
  1. function sum() {
  2. let args: IArguments = arguments;
  3. }

函数类型

  • 在 TS 中需要对函数的输入和输出进行约束
 
  1. function sum(x: number, y: number): number {
  2. return x + y;
  3. }
  4. sum(2, 6);

输入参数多或者少都会报错。

 
  1. let mySum: (x: number, y?: number) => number = function (x: number, y: number): number {
  2. if(y) {
  3. return x + y;
  4. } else {
  5. return x;
  6. }
  7. };

在 TS 中 => 表示函数的定义, 左边是输入类型,右边是输出类型;y 是可选参数,且必须位于必选参数后面; TS 会将添加了默认值的参数识别为可选参数

类型断言

  • 手动指定值的类型 <类型>值值 as 类型
  • 类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的

声明文件 
内置对象 
用 TS 写 node.js 需要引入第三方声明文件npm install @types/node --save-dev


    鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    上一篇:
    TypeScript如何创建一个工程(有源码工程)发布时间:2022-07-18
    下一篇:
    TypeScript-类型兼容性发布时间:2022-07-18
    热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap