30分钟速成TypeScript

2023-10-26


一、TypeScript 是什么?


TypeScript 是 JavaScript 的超集,在 JavaScript 的基础上增加了类、模块、接口、泛型和静态类型(可选)等常见的概念。


从编程语言的动、静来区分,TypeScript属于静态类型的编程语言,JS属于动态类型的编程语言,静态类型是编译期做类型检查,动态类型是执行期做类型检查。


所有 JavaScript 代码都是有效的 TypeScript 代码,任何 JavaScript 项目都可以无缝引入 TypeScript,TypeScript 编译器最终会把 TypeScript 代码编译成 JavaScript 代码。


本文只关注 TypeScript 额外增加的区别于 JavaScript 的语法。


二、为什么要使用TypeScript


1、OOP面向对象特性

TypeScript 对于 OOP(面向对象程序设计) 背景的人来说感觉应该熟悉,其实开发 TypeScript 的工程师正是领导 C# 开发的微软工程师,但工程师们谨慎地只借用了对 TypeScript 有意义的特性,TypeScript 其实它更像 JavaScript 本身。


2、提高了开发效率

不可否认,一个 TypeScript 项目将会比同等的 JavaScript 代码有更多的行数,但是它有助于描述你正在操纵的数据,从而降低了整体的认知成本。它 通过减少记忆成本和消除打开不相关的文件手动检查类型来提高开发速度。


三、TypeScript 详细介绍


1、布尔类型

let isVisable: boolean = false;

2、数值类型

let count: number = 20;


3、字符串类型

let name: string = 'xiaowang';

如果不知道是什么类型,可以使用 “any” (任意)类型

let sure: any = 5;
sure = '重新赋值转换为字符串类型';
sure = false;       // 还可以重新定义为布尔类型

4、常量

使用 const 关键字将一个字面量修饰为常量。

const num = 9;
num = 1; 			// 常量不能重新被赋值,这里会报错

5、数组

TypeScript 中的数组有两种表示形式,一种是有类型的数组,另一种是泛型数组。

有类型的数组:

// 
let list: number[] = [1, 2, 3];


泛型数组:

let list: Array<number> = [1, 2, 3];

6、枚举

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

7、 void 关键词

它用于表明函数没有任何返回值的情况:

function Alert(): void {
  alert('我是弹出框!');
}

8、函数

支持使用 lambda 胖箭头表达式和类型推断

一般的函数

let fun1 = function(n: number): number { return n * n; };

根据返回值推断函数返回类型

let fun2 = function(n: number) { return n * n; };

胖箭头表达式

let fun3 = (n: number): number => { return n * n; };

根据返回值推断返回类型的胖箭头表达式

let fun4 = (n: number) => { return n * n; };

根据返回值推断返回类型的胖箭头表达式,省略花括号的同时,可以同时省去 return 关键字

let fun4 = (i: number) =>  i * i;

9、接口

接口是结构化的,任何具备接口中声明的全部属性的对象,都与该接口兼容。

interface Student {
  name: string;
  age?: number;    // 使用 "?" 标识,表明该属性是一个非必需属性
  move(): void;    // 函数
}

实现 “Student” 接口的对象,当它具备 “name” 属性和 “move” 方法之后可被视为一个 “Student”

let p: Student = { name: 'xaioming', move: () => {} };

带可选属性的对象

let smallStudent: Student = { name: 'xaioming', age: 5, move: () => {} };

下例由于该对象 “age” 属性的类型不是 “number” ,所以不是一个 “Student”

let invalidStudent: Student = { name: 'Bobby', age: true };

接口也可以描述一个函数的类型

interface FindFunc {
  (source: string, subString: string): boolean;
}

参数名并不重要,参数类型才重要

let myFind: FindFunc;
myFind = function(src: string, sub: string) {
  return src.search(sub) !== -1;
};

10、类

类成员访问权限默认都是公共的 (public).

类构造函数- 在类构造函数中使用 public/private 关键字修饰的变量,会被声明为类的成员属性。

下例:age 会像 name 一样被声明定义为类成员属性,而不再需要额外代码。

class Student {

  name: string;   // 成员属性

  constructor(name:string, public age: number=1) {
    this.name = name;
  }

  // 成员函数
  move() { retun this.age++;}

  // 静态成员
  static normal = new Student('xiaoming', 10);
}

let p1 = new Student('xiaowang', 12);
let p2 = new Student('xiaoxi');      // age 为构造器中指定的默认值:1

类的继承

class BigStudent extends Student {
  constructor(name:string,  age: number, public major:string="计算机") {
    super(name, age); // 必须显式调用父类的构造函数
  }

  // 重写父类中的 dist() 函数
  dist() {
    let d = super.dist();
    return d+d;
  }
}

11、模块

模块 “.” 符号可以作为子模块的分隔符:

module Geometry {
  export class Square {
    constructor(public length: number = 0) {
    }
    area() {
      return Math.pow(this.length, 2);
    }
  }
}

let s1 = new Geometry.Square(6);

为模块创建一个本地别名:

import G1 = Geometry;
let s2 = new G1.Square(2);

12、 泛型

类泛型

class Student<T1, T2> {
  constructor(public param1: T1, public param2: T2) {
  }
}

接口泛型

interface Student<T> {
  param1: T;
  param2: T;
}

函数泛型

let student2 = function<T>(p: Student<T>) {
  return new Student(p.param1, p.param2);
};


let tuple = student2({ param1: 'hello', param2: 'world'});

13、模板字符串

使用反引号的字符串

// 嵌入变量的模板字符串
let name = 'wangming';
let greeting = `Hi ${name}, how are you?`;

// 有多行内容的模板字符串
let multiline = `This is an example
of a multiline string`;

14、引用定义文件

<reference path="jquery.a.ts" />

参考资料:


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

30分钟速成TypeScript 的相关文章

随机推荐

  • flink watermark 生成机制与总结

    flink watermark 生成机制与总结 watermark 介绍 watermark生成方式 watermark 的生成值算法策略 watermark策略设置代码 watermark源码分析 watermark源码调用流程debug
  • 你知道几种延迟队列的实现方案?

    在开发中 往往会遇到一些关于延时任务的需求 例如 生成订单30分钟未支付 则自动取消 生成订单60秒后 给用户发短信 对上述的任务 我们给一个专业的名字来形容 那就是延时任务 那么这里就会产生一个问题 这个延时任务和定时任务的区别究竟在哪里
  • Reid训练代码之数据集处理

    本篇文章是对yolov5 reid这篇文章训练部分的详解 该项目目录为 config reid输入大小 数据集名称 损失函数等配置 configs 训练时期超参数定义 data 存储数据集和数据处理等代码 以及yolov5类别名称等 eng
  • 怎样更改itunes备份位置_什么是iTunes备份文件?

    由于它是由Apple创建的 因此iTunes改变了用户组织和播放音乐和视频的方式 iTunes已经允许数百万用户通过iTunes Store下载他们喜爱的曲目 歌曲和视频 值得庆幸的是 iTunes拥有一个先进的备份系统 能够备份和恢复Ip
  • Android libdvm.so 与 libart.so

    Android libdvm so 与 libart so 系统升级到5 1之后 发现system lib 下面没有libdvm so了 只剩下了libart so 对于libart模式 从4 4就在Developer optins里面就可
  • FsonFormat Eclipse Plugin 一键解决复杂JSON ,快速实现JavaBean

    简介 当开发人员或者测试人员在开发或者测试接口中 去获取到接口返回的结果值时 都要通过JSONObject和JSONArray解析json结构 然后再通过For循环遍历相应的Key 最后把value值进行App展示或者校验是否预期结果 编写
  • 有关树莓派+arduino构建小车

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题 有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一个表格 设定内容居中 居左 居右 Sma
  • eclipse中没有runtime environments_Go语言中的panic和recover

    初识别panic和recover 本节将分析两个经常成对出现的关键字 panic 和 recover 这两个关键字都与 defer 有千丝万缕的联系 也都是 Go 语言中的内置函数 但是提供的功能却是互补的 panic 能够改变程序的控制流
  • opencv 图像雾检测_雾的检测算法

    雾的检测算法相对来说文献不是很多 这次和大家介绍两篇相对来说比较容易实现的两篇文章 其中一篇是基于灰度直方图的方式进行分析检测 另一篇是将rgb图像空间转化为hsv空间进行分析检测 1 灰度图检测 首先来说第一片 Fog Detection
  • 如何用ai写文章?这三个软件可以自动生成文章

    随着人工智能技术的不断发展 ai写作已经成为了当今的热门话题 它是指利用机器学习 自然语言处理等技术 让机器能够像人类一样写作 相较于传统写作方式 ai写作大大提高了写作的效率和质量 可以让我们的创意和技术相融合 其应用范围也非常广泛 无论
  • 探索编程世界的宝藏:程序员必掌握的20大算法

    程序员必须掌握哪些算法 文章目录 1 引言 2 冒泡排序算法 编程世界的排序魔法 3 选择排序算法 排序世界的精确挑选器 4 插入排序算法 排序世界的巧妙插珠者 5 快速排序算法 排序世界的分而治之大师 6 归并排序算法 排序世界的合而为一
  • 统计并输出该字符串中26个英文字母

    字符串 第3题 描述 输入一个字符串 统计并输出该字符串中26个英文字母 不区分大小写 出现的次数 输入 输入一个字符串 输出 分行输出26个英文字母 不区分大小写 出现的次数 输入示例 I am a student 输出示例 a 2 d
  • Python:蒙特卡罗方法模拟解决三门问题

    蒙特卡罗方法与三门问题 蒙特 卡罗方法 Monte Carlo method 也称统计模拟方法 是一种统计学的方法 模拟方法 通过大量随机样本模拟问题 从而获得所要计算的值 三门问题 三门问题 Monty Hall problem 亦称为蒙
  • STM32:TIM_OCxInit函数用法解释

    TIM OC3Init函数是用于初始化定时器TIM的PWM输出通道3的函数 可以使用以下步骤进行使用 创建一个TIM OC InitTypeDef类型的结构体对象 例如命名为TIM OCInitStruct 使用TIM OCStructIn
  • 网络基础知识总结

    一 广域网和局域网 局域网 Local Area Network 简称LAN 也就是内网 局域网就是在固定的一个地理区域内由2台以上的电脑用网线和其他网络设备搭建而成的一个封闭的计算机组 它可以是邻居之间的2台电脑 也可以是一幢100层大楼
  • [深入研究4G/5G/6G专题-41]: URLLC-12-《3GPP URLLC相关协议、规范、技术原理深度解读》-6-MAC层调度器的总体架构、调度器的原理和三种URLLC调度器的增强方案

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文主页 https blog csdn net HiWangWenBing article details 125942872 目录 前言
  • 杭电ACM 1000题

    import java util Scanner public class Main public static void main String args Scanner cin new Scanner System in while c
  • ajax 跨域 session 丢失问题

    ajax 跨域时session丢失了 解决方法 首先我 Google 了一下这个问题的原因 我找到了这个 1 Access Control Allow Origin该字段是必须的 它的值要么是请求时Origin字段的值 要么是一个 表示接受
  • Cookie与前端安全

    目录 一 Cookie的作用 二 cookie与http协议 1 http响应 cookie的生成 2 http请求 cookie的发送 三 Cookie的属性 1 Expires Max Age 2 Domain Path 3 Secur
  • 30分钟速成TypeScript

    一 TypeScript 是什么 TypeScript 是 JavaScript 的超集 在 JavaScript 的基础上增加了类 模块 接口 泛型和静态类型 可选 等常见的概念 从编程语言的动 静来区分 TypeScript属于静态类型