5分钟上手TypeScript
image.png
1.安装TypeScript
本篇介绍通过Visual Stdio Code终端来安装
- 针对使用npm的用户
npm install -g typescript
2.创建第一个TypeScript文件
在编辑器中，新建HelloWorld.ts文件
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
3.编译代码
使用了
.ts扩展名，但是这段代码仅仅是JavaScript而已。 你可以直接从现有的JavaScript应用里复制/粘贴这段代码。
在VS Code终端的命令行上，运行TypeScript编译器：
tsc greeter.ts
输出结果为一个
greeter.js文件，它包含了和输入文件中相同的JavsScript代码。一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！
4.TypeScript数据类型
let或者var都可以定义变量(强类型)
-
字符型
"",'',``中包裹的内容都是字符
let a: string = "a"; a = "b"; -
布尔型
let b: boolean = false; b = "a";//报错，不能随意更改类型 -
数值型
let c: number = 1; c = 0x00ff; c = 1.2e+2; -
数组类型
//确定数组中的元素必须是数值 let d: number[] = [1, 2, 3, 4]; let d1: Array<string> = ["a", "b", "c", "d"]; -
元组类型
//前面的类型与后面初始化的值，必须一一对应 let e: [string, boolean, number] = ["a", true, 1]; -
枚举类型
enum Color { RED = "0xff0000", GREEN = "0x00ff00", BLUE = "0x0000ff" } console.log(Color.RED); enum MouseEvents { CLICK = "click", MOUSE_DOWN = "mousedown", MOUSE_UP = "mouseup" } document.addEventListener(MouseEvents.CLICK, clickHandler); function clickHandler() { } -
对象
let o: object = { a: 1, b: 2 }; o = null; let s;//s默认为undefined -
默认设置任意类型
let i: any = 3; a = "a"; let x = "b";//默认为any
5.函数类型
在函数后的冒号后面写入，返回值的类型，如果是void类型，则不能有return语句；
设置void表示当前函数不返回任何值
function fn(_a: string, _b: number = 1): void {
}
function getSum(a: number, b: number = 10): number {
return a + b;
}
6.类型断言
-
断言原理
- 类型断言（Type Assertion）可以用来手动指定一个值的类型。
- 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的;
-
语法格式
<类型>值 或者 值 as 类型
-
举例如下：
7.继承
typescript中类的继承用到的是：extends和super
不同之处，要尤其注意他们的修饰符
-
TypeScript的访问修饰符
跟java类似，TypeScript的访问修饰符有三个，分别是public、private、protected 。TypeScript的默认访问修饰符是public。
- public声明的属性和方法在类的内部和外部均能访问到。
- protected声明的方法和属性只能在类的内部和其子类能访问。
- private声明的方法和属性只能在其类的内部访问。
class Objects {
constructor() {
}
public static assign(target, ...arg: Array<object>): object {
if (arg.length === 0) return target;
for (let i = 0; i < arg.length; i++) {
for (let prop in arg[i]) {
target[prop] = arg[i][prop];
}
}
return target;
}
}
class Box {
// 只能当前类或者它的所有子孙类，可以调用
protected elem: HTMLDivElement;
protected speed: number = 2;
// 构造函数不加返回类型
constructor() {
this.elem = this.createElement();
}
// 通过private设置私有方法,只有当前类才能调用,在外面实例化对象后不能调用
private createElement(): HTMLDivElement {
let div = document.createElement("div");
Objects.assign(div.style, {
width: "50px",
height: "50px",
position:"absolute",
backgroundColor: "red"
})
// div.addEventListener("click", this.clickHandler);
div.addEventListener("click", (e:MouseEvent)=>this.clickHandler(e));
return div;
}
// 通过public设置为公有类型，在外面实例化对象后可以调用
public appendTo(parent: Element) {
parent.appendChild(this.elem);
}
private clickHandler(e: MouseEvent): void {
// 断言(确定、肯定)e.currentTarget是HTMLDivElement
(e.currentTarget as HTMLDivElement).style.backgroundColor = "blue";
this.update();
}
protected update(): void {
this.speed += 2;
this.elem.style.left = this.speed + "px";
}
}
class Ball extends Box{
constructor(){
super();
this.elem.style.borderRadius = "50px";
}
protected update():void{
super.update();
}
}
let b:Ball = new Ball();
b.appendTo(document.body);
8.接口
实现（implements）是面向对象中的一个重要概念。
一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用
implements关键字来实现。这个特性大大提高了面向对象的灵活性。举例来说，门是一个类，防盗门是门的子类。
如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。
这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：
interface Alarm {
alert();
}
class Door {
}
//防盗门继承于门，实现了报警的功能
class SecurityDoor extends Door implements Alarm {
alert() {
console.log('SecurityDoor alert');
}
}
//车也实现了报警的功能
class Car implements Alarm {
alert() {
console.log('Car alert');
}
}
- 一个类可以实现多个接口：
interface Alarm {
alert();
}
interface Light {
lightOn();
lightOff();
}
//车实现了接口报警器和车灯两个接口
class Car implements Alarm, Light {
alert() {
console.log('Car alert');
}
lightOn() {
console.log('Car light on');
}
lightOff() {
console.log('Car light off');
}
}
- 接口继承接口
接口与接口之间可以是继承关系：
interface Alarm {
alert();
}
interface LightableAlarm extends Alarm {
lightOn();
lightOff();
}
- 接口继承类
class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};
今天就介绍到这里了，感觉不错的话，给个赞吧~~~
网友评论