建网站要定制还是第三方系统wordpress内置编辑器
文章的最下面有官网链接可以进行练习！
变量声明
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: Array<string> = ['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)了解更多