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 是个只读属性