TypeScripit基础篇（一）

前言

跟着本文一步一步开始学习 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 支持面向对象的所有特性，比如 类、接口等。

类详细介绍已经单独拿出了一篇来介绍，点击跳转