TypeScript快速入门

Easter79
• 阅读 526

TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。
TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。
TypeScript是微软开源的,它有这强大的技术后盾。

TypeScript快速入门

基础类型

TypeScript作为JavaScript的超集,它具有更规范化的数据数据类型,不再像JavaScript一样。它更像Java这样的语言一样。

布尔值

最基本的数据类型就是简单的true/false值

let isDone: boolean = false;

数字

和JavaScript一样,TypeScript里的所有数字都是浮点数。这些浮点数的类型是 number 。除了支持十进制和十六进制,TypeScript还支持ECMAScript中引入的二进制和八进制。

let decLiteral: number = 6;                    // 十进制let hexLiteral: number = 0xf00d;        // 十六进制let binaryLiteral: number = 0b1010;    // 二进制let octalLiteral: number = 0o744;        // 八进制

字符串

在TypeScript中使用string表示文本数据类型。和JavaScript一样,可以使用双引号(")或单引号(')表示字符串。

let name: string = 'bob';        // 个人推荐使用单引号name = 'smith';

还可以使用模本字符串,它可以定义多行文本和内嵌表达式。

let name: string = `Gene`;let age: number = 27;let sentence: string = `Hello, my name is ${name}.I'll be ${age + 1} years old next month.`;

数组

TypeScript像JavaScript一样可以操作数组元素。有两种方式可以定义数组。

  • 第一种,可以在元素类型后面街上 [] ,表示由此类型元素组成的一个数组:

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

  • 第二种,使用数组泛型, Array<元素类型>

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

JavaScript中支持的所有数组操作,在TypeScript中都支持。

元组

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。比如,你可以定义一对值分别为string和number类型的元组。

// Declare a tuple typelet x: [string, number];// Initialize itx = ['hello', 10];     // OK// Initialize it incorrectlyx = [10, 'hello'];  // Error

枚举

enum 类型是对JavaScript标准数据类型的一个补充。像C#、Java等其他语言一样,使用枚举类型可以为一组数值赋予友好的名字。

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

默认情况下,从 0 开始为元素编号。你也可以手动的指定成员的数值。例如,我们将上面的例子改成从 1 开始编号:

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

或者,全部都采用手动赋值:

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

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如,我们知道数值为2,但是不确定它映射到Color里的哪个名字,我们可以查找相应的名字:

enum Color {Red = 1, Green, Blue}let colorName: string = Color[2];console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

Any

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any类型来标记这些变量:

let notSure: any = 4;notSure = "maybe a string instead";notSure = false; // okay, definitely a boolean

在对现有代码进行改写的时候,any类型是十分有用的,它允许你在编译时可选择地包含或移除类型检查。你可能认为 Object有相似的作用,就像它在其它语言中那样。但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法:

let notSure: any = 4;notSure.ifItExists(); // okay, ifItExists might exist at runtimenotSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)let prettySure: Object = 4;prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

当你只知道一部分数据的类型时,any类型也是有用的。比如,你有一个数组,它包含了不同的类型的数据:

let list: any[] = [1, true, "free"];list[1] = 100;

变量声明

let和const是JavaScript里相对较新的变量声明方式。像我们之前提到过的, let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题。const是对let的一个增强,它能阻止对一个变量再次赋值。
因为TypeScript是JavaScript的超集,所以它本身就支持let和const。下面我们会详细说明这些新的声明方式以及为什么推荐使用它们来代替 var。
如果你之前使用JavaScript时没有特别在意,那么这节内容会唤起你的回忆。如果你已经对 var声明的怪异之处了如指掌,那么你可以轻松地略过这节。

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

在TypeScript中,接口的定义和Java中结构的定义是类似的:

interface Point {    x: number;    y: number;}

可选属性

接口里的属性不全都是必需的。有些是只在某些条件下存在,或者根本不存在。可选属性在应用“option bags”模式时很常用,即给函数传入的参数对象中只有部分属性赋值了。

interface Point {    x: number;    y: number;    label?: string;}

在TypeScript中使用?标记可选属性。

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly来指定只读属性:

interface Point {    readonly x: number;    readonly y: number;}

你可以通过赋值一个对象字面量来构造一个Point。赋值后, x和y再也不能被改变了。

let p1: Point = { x: 10, y: 20 };p1.x = 5; // error!

函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。除了描述带有属性的普通对象外,接口也可以描述函数类型。
为了使用接口表示函数类型,我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

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

传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员来讲就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015,也就是ECMAScript 6开始,JavaScript程序员将能够使用基于类的面向对象的方式。使用TypeScript,我们允许开发者现在就使用这些特性,并且编译后的JavaScript可以在所有主流浏览器和平台上运行,而不需要等到下个JavaScript版本。

TypeScript中的类和Java中的类相似:

class Greeter {    greeting: string;    constructor(message: string) {        this.greeting = message;    }    greet() {        return "Hello, " + this.greeting;    }}let greeter = new Greeter("world");

本文分享自微信公众号 - Java码农(jarcoder)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
GitHub上的7个热门TypeScript项目,要不要学一下呢?
TypeScript是JavaScript的一个超集,支持ECMAScript6标准(ES6教程)由微软开发的自由和开源的编程语言。设计目标是开发大型应用,它可以编译成纯JavaScript,编译出来的JavaScript可以运行在任何浏览器上。语言特性TypeScript是一种
Easter79 Easter79
2年前
TypeScript学习笔记
TypeScript学习笔记TypeScript是JavaScript的超集,任何合法的JS程序都是合法的TypeScript程序TypeScript通过向JavaScript增加可选的静态类型声明来把JavaScript变成强类型程序语言。静态类型声明可约束函数、变量、属性等程序实体。TypeScript语言内
Easter79 Easter79
2年前
TypeScript 教程
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C的首席架构师,已工作于TypeScript的开发。\1\TypeScript扩展了JavaScript的句法,所以任何现有的JavaScript程序可以不
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
5个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
程昱 程昱
3个月前
TS 从入门到深度掌握,晋级TypeScript高手
TS从入门到深度掌握,晋级TypeScript高手download》quangneng.com/177/TypeScript从入门到深度掌握:成为TypeScript高手TypeScript是一种由微软开发的开源编程语言,它是JavaScript的一个超集
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k