网站开发经理招聘,小学全部课程免费教学软件,网站开发过程总结,自己做静态网站的步骤文章的最下面有官网链接可以进行练习#xff01;
变量声明
TypeScript 在 JavaScript 的基础上加入了静态类型检查功能#xff0c;因此每一个变量都有固定的数据类型
let#xff1a;声明变量的关键字#xff0c;const则代表常量
示例代码#xff1a;
// string#…文章的最下面有官网链接可以进行练习
变量声明
TypeScript 在 JavaScript 的基础上加入了静态类型检查功能因此每一个变量都有固定的数据类型
let声明变量的关键字const则代表常量
示例代码
// string字符串可以用单引号或双引号
let msg: string hello world
// number数值整数、浮点数都可以
let age: number 21
// boolean布尔
let finished: boolean true
// any不确定类型可以是任意类型
let a:any jack
a 21
// uniton联合类型可以是多个指定类型中的一种
let u: string|number|boolean rose
u 18
// Object对象
let p {name: Jack, age: 21}
console.log(p.name)
console.log(p[name])
// Array数组元素可以是任意其他类型
let names: Arraystring [Jack, Rose]
let ages: number[] [21,18]
console.log(names[0])
条件控制
TypeScript 与大多数开发语言类似支持基于 if - else 和 switch 的条件控制
if - else 示例代码
// 定义数字
let num:number 21
// 判断是否是偶数
if(num % 2 0) {console.log(num 是偶数)
} else {console.log(num 是奇数)
}
// 判断是否是正数
if(num 0) {console.log(num 是正数)
} else if(num 0){console.log(num 是负数)
} else {console.log(num 为0)
}
switch 示例代码
let grade: string A
switch (grade) {case A: {console.log(优秀)break}case B: {console.log(合格)breka}case C: {console.log(不合格)breka}default: {console.log(非法输入)break}
}
循环迭代
TypeScript 支持 for 和 while 循环并且为一些内置类型如 Array 等提供了快捷迭代语法 普通循序
// 普通 for
for(let i 1; i 10; i){console.log(点赞 i 次)
}
// while
let i 1;
while(i 10){console.log(点赞 i 次)i;
}
for 迭代器
// 定义数组
let names: string[] [Jack, Rose]
// for in 迭代器遍历得到数组角标
for (const i in names) {console.log(i : names[i])
}
// for of 迭代器直接得到元素
for (const name of names) {console.log(name)
}
函数
TypeScript 通常利用 function 关键字声明函数并且支持可选参数、默认参数、箭头函数等特殊语法
定义函数
// 无返回值函数返回值 void 可以省略
function sayHello(name: stirng): void{console.log(你好 name )
}
sayHello(Jack)
// 有返回值函数
function sum(x: number,y: number): number {return x y
}
let result sum(21,18)
console.log(21 18 result)
// 箭头函数
let sayHi (name: string) {console.log(你好 name )
}
sayHi(Rose)
函数 - 可选参数
// 可选参数在参数名后加 ?表示该参数是可选的
function sayHello(name?: stirng){// 判断 name 是否有值如果无值则给一个默认值name name ? name : 陌生人console.log(你好 name )
}
sayHello(Jack)
sayHello()
函数 - 参数默认值
// 参数默认值在参数后面赋值表示参数默认值
// 如果调用者没有传参则使用默认值
function sayHello(naem: string 陌生人){console.log(你好 name )
}
sayHello(Jack)
sayHello()
类和接口
TypeScript 具备面向对象编程的基本语法例如 interface、class、enum 等也具备封装、继承、多态等面向对象基本特征
类、接口、枚举
// 定义枚举
enum Msg{HI Hi,HELLO Hello
}
// 定义接口抽象方法接收枚举参数
interface A {say(msg: Msg):void
}
// 实现接口
class B implements A {say(msg: Msg): void {console.log(msg I am B)}
}
// 初始化对象
let a:A new B()
// 调用方法传递枚举参数
a.say(Msg.HI)
继承
// 定义矩形类
class Rectangle {// 成员变量private width: numberprivate length: number// 构造函数constructor(width: number, length: number) {this.width widththis.length length}// 成员方法public area(): nuber{return this.width * this.length}
}
// 定义正方形
class Square extends Rectangle{constructor(side: number) {// 调用父类构造super(side, side)}
}let s new Square(10)
console.log(正方形面积为 s.area())
模块开发
应用复杂时我们可以把通用功能抽取到单独的ts文件中每个文件都是一个模块module模块可以相互加载提供代码复用性
rectangle.ts
// 定义矩形类并通过 export 导出
export class Rectangle {// 成员变量public width: numberpublic length: number// 构造函数constructor(width: number, length: number) {this.width widththis.length length}
}
// 定义工具方法求矩形面积并通过 export 导出
export function area(rec: Rectangle): number{return rec.width * rec.length
}
index.ts
// 通过 import 语法导入from 后面写文件的地址
import {Rectangle, area} from ./rectangle
// 创建 Rectangle 对象
let r new Rectangle(10, 20)
// 调用 area 方法
console.log(面积为 area(r))
我们可以通过链接进入官网TypeScript TS Playground - 用于探索 TypeScript 和 JavaScript 的在线编辑器 (typescriptlang.org) 进行练习
如想了解更多 TypeScript 语言可以通过官网TypeScript: The starting point for learning TypeScript (typescriptlang.org)了解更多
