Typescript快速入门

278 阅读2分钟

typescript 简介

typescript 作为一种javascript的超集比 JS 增加了一些常用面向对象的概念,比如, 类(class)、 生成器、 接口 和 静态类型检查等,来帮助开发者更好的去组织开发大型应用。

环境准备

开始使用typescript,我们仅仅需要通过npm 安装 typescript 包即可。


npm install -g typescript

安装完成后,我们就可以来使用typescript 给我们带来的帮助。

静态类型

现在我们来看一下,哪些类型是我们可以使用的。

Number 数字类型

在TS中,所有的浮点类型数值,均用number 表示,包括16进制数据和二进制数据。

代码示例:

 
let number: number = 0.00012 // 浮点数据
let hex: number = 0xbeef // 16 进制数据
let test: number = 0010001 

String 字符串类型

跟其他语言中一样, TS 用String 类型,来存储所有文本类数据。 当然,你也可以用 `` 文本表达式来实现多行文本值。

代码示例:


let Str: string = 'this is a String';

// 多行文本示例
let multiStr: string = `this is a 

multi line string demo`;

// 文本字符串示例
let expression: string =  'this is a expression';
let expressionString: string = `this is a express demo ${ expression }`

Boolean 布尔类型

跟其他语言一样, TS 同样提供最基础的布尔类型支持, 用boolean 来表示一个变量只能有 true , false 两个值。

代码示例


let booleanFalse: boolean = false;

let booleanTrue: boolean = true;

现在我们,已经对TS中,基本数据类型有了个比较好的认识。当我们想为变量指定类型时,只需要在变量名后, 增加 : 和类型,就达到了为变量指定类型的目的。

多类型

因为js 作为弱类型语言,可以一个变量存储不同类型的值。 Ts同样提供了,多类型生命的办法。 你只需要在类型指定的地方通过 | 操作符。 就能轻松实现多类型变量的声明。

代码示例:

		
	// 声明一个可以同时存储 字符串和数字的变量 并赋值 String
	let multiType: string | number = 'String' 
	// 为multiType 变量赋值 数字
	multiType = 10
	

类型断言

有些时候,我们在写代码的时候,是有需求,去变更一个变量的类型,变更为非声明时的类型。 在TS 中,临时变更变量类型的方法,我们称为类型断言。

类型断言有两种方式,分别为 as 关键字 和 <> 表达式。下边我们展开来说一下。

as 关键字

代码示例:

// 声明一个类型为any 的str
let str: any = 'I am a String'
// 将str 断言为 String 类型,并使用length 方法
let strLength = (str as string).length

// 如果像这样,则会引发报错
strLength = str.length

<> 表达式

这种 方法和大多数其他语言的用法差不多。

代码示例:


let str: any = 'I am a String'
let strLength = (<string>str).length

Array 数组

数组在typescript 中,表示一个同样对象的和集合。 创建数组有2种办法。

[] 数组表达式

我们可以通过,将[]表达式写在基础类型之后来创建一个数组。

示例代码:


let strings: string[] = ['hello', 'world', '!'];

使用泛型数组类型

我们同样可以使用泛型数组类型,来创建一个新的数组。

示例代码:


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

// 对第一个例子进行改造
let strings: Array<string> = ['hello', 'world', '!']

数组项包含多种类型的写法

在我们日常开发中, 经常会出现,数组项的类型不同的情况。 我们来看一下TS中,这样的情况怎么处理吧。

示例代码:


let StringAndNumbers:(string | number)[] = ['hello', 'world', 2022]

多维数组

接下来,我们看一下多维数组,在Ts中应该如何声明。

示例代码:


// 声明一个数字矩阵
let multyNumbers: number[][] = [[1,2,3],[4,5,6]]

tuples

我们会通过tuples 来,进行具体数字项的类型指定。

示例代码:


let test: [number, string] = [1, 'hello']

enum 枚举类型

像其他强类型语言一样,在typescript中,同样提供了枚举类型,来解决我们日常开发中的常量定义集合相关问题。 在typescript中 同时支持,基于数字的枚举和基于字符串的枚举。

基于数字的枚举

示例代码:


// 声明一个播放器状态的枚举类型 State 
enum State{
 Playing = 0,
 Paused = 1,
 Stopped = 2
}

在上边的例子中,我们定义了一个基于数字的枚举 State, 其中 Playing 值为 0、 Paused 值为1 、Stopped 值为2.

我们可以,简化为下面的代码。

// 在TS 枚举中,如果不指定属性的值,则默认其值为从0开始的自增数字。
enum State {
	Playing,
	Paused,
	Stopped
}

基于字符串的枚举

在TS中,声明基于字符串的枚举非常简单,我们只需要像例子1中的代码一样,给枚举值指定为任意字符串即可。

示例代码:


enum State {
 Playing = 'playing',
 Paused = 'paused',
 Stopped = 'stopped'
}

Object 对象

Typescript 中的对象是一个包含一组键值对的实例。 这些值可以是变量、数组甚至函数。 它也被视为表示非原始类型的数据类型。

代码示例:


let human = {
	name: 'Sean',
	age: 32,
	height: 178
}

我们还可以给这个对象增加 function.


let human = {
	name: 'Sean',
	age: 33,
	height: 178,
	sayHi: function () {
		console.log('hello world!')
	}
}

自定义类型

typescript 为我们提供了,自定义类型的功能,叫别名。 我们只需要使用type 关键字就可以很简单的创建出我们需要的自定义类型。

代码示例:


type Human = { name: string, age: number , height: number }

let human: Human = {name: 'Sean', age: 33, height: 178 }

函数参数及返回类型

typescript 让我们可以对函数的参数 和 返回值类型进行声明。 下边我们看一下如何去定义函数参数和返回值类型。

代码示例:


// 指定函数形参类型, 只需要在形参后,增加:type 就可以了
function printState(state: string) :void {
	console.log(`The state is ${state}`)
}

// 指定函数返回值类型, 仅仅需要在函数的闭合括号后,增加 :type。 
function twoSum(num1: number, num2: number): number {
	return num1 + num2
}

函数可选参数

typescript 同样允许我们为函数,增加可选参数。 我们只需要是用 ?表达式就能完成,为函数定义可选参数。

代码示例:

	
	// lastName 作为可选参数出现
	function printName(firstName: string, lastName?: string) {
	if (lastName) 
	 console.log(`Firstname: ${firstName}, Lastname: ${lastName}`);
	else 
		console.log(`Firstname: ${firstName}`);
	}

函数参数默认值

像上边的例子, 我们可以对其进行一些改造。为第二个参数增加默认值。

示例代码:

	
	// lastName 填充了,默认值 Shi 
	function printName(firstName: string, lastName: string = 'Shi') {
	    console.log(`Firstname: ${firstName}, Lastname: ${lastName}`);
	}

Interface 接口

Typescript 中的接口用于定义与我们的代码以及我们项目外的三方代码的契约。

接口只包含我们的方法和属性的声明,但不实现它们。 实现方法和属性是实现接口的类的责任。

我们来看一个例子:


interface Person {
	name: string
}

const person: Person = { name: 'Sean' } 

const person: Person = { names: 'Sean' }  //这段代码会报错。 并未实现,接口中约定的name

接口中的可选属性

在typescript中,并不是接口的所有属性都必须是必要属性,我们可以通过 ?操作符,来实现可选属性。

示例代码:


interface Person{
 name: string
 age?: number // age 作为可选属性,对Person 的实现,不是必须实现属性
}

const person: Person = {name: 'Sean', age: 33}
const person2: Person = {name: 'ELsa'}

接口中的只读属性

我们接口的一些属性也应该只在第一次创建对象时能修改。

我们可以通过将 readonly 关键字放在我们的属性名称之前来指定此功能。

示例代码:

interface Person{
 name: string
 readonly id: number
 age?: number
}

const person: Person = { name: 'Sean', id:1232452 }
person.id = 200 // 赋值失败。 因为, id 是个只读属性