前言
跟着本文一步一步开始学习 TypeScript
你需要有Es6
/Js数据类型
等基础
安装
npm install -g typescript
运行第一个 TypeScript 程序
Runoob.ts 文件
const hello:string = 'Hello World!'
console.log(hello)
运行
tsc Runoob.ts
得到如下 js 代码
var hello = "Hello World!";
console.log(hello);
执行
node Runoob.js
整个流程图如下:
tsc
也可以同时执行多个ts
文件
tsc file1.ts file2.ts file3.ts
类型
基础类型
// 数字类型
let num:number = 1
// 字符串类型
let str:string = 'Hello'
// 布尔类型
let bool:boolean = true
// 数组类型
let arr: number[] = [1, 2, 3]
let arr: Array<number> = [1, 2, 3]
// 元组 (数量和类型有限的数组———元组)
let x = [string, number]
x = ['Runoob', 1] // 运行正常
x = [1, 'Runoob'] // 报错
// void 没有返回
function hello(): void {
console.log('hello')
}
// null
let x:null = null
// undefined
let x:undefined = undefined
枚举
enum Color { Red, Green = 3, Blue }
let c: Color = Color.Bule; // 4
// 反向映射
console.log(Color['Red'] === 0) // true
console.log(Color['Blue'] === 4) // true
console.log(Color[0] === 'Red') // true
console.log(Color[4] === 'Bule') // true
// 计算所得属性
const getValue = () => {
return 0;
};
enum List {
A = getValue(),
B = 2, // 此处必须要初始化值,不然编译不通过
C,
}
console.log(List.A); // 0
console.log(List.B); // 2
console.log(List.C); // 3
总结
- 如果不赋默认值,默认初始值是0,每一项+1,
- 如果有初始值则后一项是前一项初始值+1
- 如果枚举的某个属性是通过计算赋值,那么它后面一位的成员必须要初始化值
变量声明
变量是一种使用方便的占位符,用于引用计算机内存地址。
语法
var [变量名]: [类型] = 值
// 声明变量没有设置类型和初始值,那么当前变量可以是任意值
var [变量名]
类型断言
类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型。
语法
<类型>值 && 值 as 类型
例子
var str = '1'
var str2:number = <number> <any> str
console.log(str2) // 1
console.log(typeof str) // string
类型推断
当类型没有给出时,TypeScript
编译器利用类型推断来推断类型。如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态 any
类型。
例子
var num = 2; // 类型推断为 number
console.log("num 变量的值为 "+num);
num = "12"; // 编译错误
console.log(num);
函数
在ts中用法
function func_name( param1 [:datatype], param2 [:datatype], param3? [:datatype]):type{
return data
}
- param1、param2、param3 为参数名(规定三个入参,param3 是可选参数。如果入参少于两个会执行错误)。
- datatype 为参数类型
- type 指函数返回值的类型
- data 函数返回值(需要与type制定类型保持一致)
函数重载
重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。
每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。
语法
// 参数类型不同
function disp(string):void;
function disp(number):void;
// 数量不同
function disp(n1:number):void;
function disp(x:number,y:number):void;
// 顺序不同
function disp(n1:number,s1:string):void;
function disp(s:string,n:number):void;
例子
// 定义函数重载需要定义重载签名和一个实现签名。
// 重载签名
function disp(s1:string):void;
function disp(n1:number,s1:string):void;
// 实现签名
function disp(x:any,y?:any):void {
console.log(x);
console.log(y);
}
disp("abc")
disp(1,"xyz");
联合类型
联合类型(Union Types)可以通过管道(|)
将变量设置多种类型,赋值时可以根据设置的类型来赋值。
例子
var val:string|number
val = 12
console.log("数字为 "+ val) // 数字为:12
val = "Runoob"
console.log("字符串为 " + val) // 字符串为:Runoob
// 也可以声明数组为联动类型
// var arr:number[]|string[];
接口
接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。
语法
interface interface_name {
}
例子
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
console.log("Customer 对象 ") // Customer 对象
console.log(customer.firstName) // Tom
console.log(customer.lastName) // Hanks
console.log(customer.sayHi()) // Hi there
interface namelist {
[index:number]:string
}
// 类型一致,正确
var list2:namelist = ["Google","Runoob","Taobao"]
接口继承
接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口。继承使用关键字 extends。
语法
// 单接口继承
Child_interface_name extends super_interface_name
// 多接口继承
Child_interface_name extends super_interface1_name,super_interface2_name,…,super_interfaceN_name
例子
interface IParent1 {
v1:number
}
interface IParent2 {
v2:number
}
// 单接口继承
interface ChildInfo extends IParent1 {
name: string
}
// 多接口继承
interface Child extends IParent1, IParent2 { }
var Iobj:Child = { v1:12, v2:23}
var Iobj2:ChildInfo = { v1: 12, name: '可鲁可' }
console.log("Iobj2 v1: "+Iobj2.v1+" Iobj2 name: "+Iobj2.name) // Iobj2 v1: 12 Iobj2 name: 可鲁可
console.log("Iobj v1: "+Iobj.v1+" Iobj v2: "+Iobj.v2) // Iobj v1: 12 Iobj v2: 23
类
TypeScript 是面向对象的 JavaScript。
类描述了所创建的对象共同的属性和方法。
TypeScript 支持面向对象的所有特性,比如 类、接口等。
类
详细介绍已经单独拿出了一篇来介绍,点击跳转