菜鸟教程: https://www.runoob.com/typescript/ts-basic-syntax.html
TypeScript 是一种给 JavaScript 添加特性的语言扩展。
准备
安装npm工具
设置镜像
npm config set registry https://registry.npmmirror.com
命令行
npm install -g typescript
npm install -g ts-node
将ts文件编译成js文件
tsc app.ts
基本类型
- any 声明为any的变量可以赋予任意类型的值。类似dynamic 编译时不会进行类型检查
- number 双精度 64 位浮点值。它可以用来表示整数和分数。
let decLiteral: number = 6; // 十进制 - string
反引号（`）来定义多行文本和内嵌表达式
let name: string = "Runoob";
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;
- boolean
- 数组 let arr: number[] = [1, 2]; 带泛型let arr: Array<number> = [1, 2];
- 元组 已知数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
let x: [string, number];
x = ['Runoob', 1]; // 运行正常
- 枚举
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 输出 2
- void 该方法没有返回值。
function hello(): void {
alert("Hello Runoob");
}
- null
- undefined
- never 不会出现的类型
如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型
let n: number | undefined | null;
n = 1;
n = null;
n = undefined;
let str: string | null | number;
str = '123';
console.log(str == null);
str = 123;
console.log(str == null);
str = null;
console.log(str == null);
let s: number; //undefine
console.log(s);
let ss: number = null; //null
console.log(ss);
/////never
let xx: never;
let yy: number;
// 编译错误，数字类型不能转为 never 类型
xx = 123;
// 运行正确，never 类型可以赋值给 never类型
xx = (() => {
throw new Error('exception');
})();
// 运行正确，never 类型可以赋值给 数字类型
yy = (() => {
throw new Error('exception');
})();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
throw new Error(message);
}
// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
while (true) {}
}
var st = '1';
//类型强转
var str2: number = <number>(<any>st); //str、str2 是 string 类型
console.log(str2);
class Person {
n = null; //实例变量
static n = 12; //静态变量
}
//循环
//1. 正常 fori
//2. for in for(j in array){}
//3. for of for(let a of array){}
//4. forEach array.forEach((value,index,array)=>{})
//5. every array.every((value,index,array)=>{})
//方法
function function_name(x: number, y: number): number {
// 语句
return x + y;
}
function_name(1, 2);
//可选的参数
function optionalFunction(first?: number, last?: number): number {
return first + last;
}
optionalFunction(10, 20);
//默认参数
function buildName(firstName: string, lastName = 'Smith', age = 10) {
return firstName + ' ' + lastName;
}
//剩余参数
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
//可选的参数
//可选的参数
function optionalFunction3(first?: number, last?: number, finalValue?: number): number {
console.log(finalValue); //undefine
return first + last + (finalValue ?? 1);
}
console.log(optionalFunction3(10, 20));
//位置参数 参数可选,可以为空
function locationPara({code}:{code?:number}){
}
//方法重构 方法名字相同，而参数不同，返回类型可以相同也可以不同
function disp(str: string): void;
function disp(num: number): void;
function disp(n1: number): void;
function disp(x: number, y: number): void;
//Number 对象属性
console.log('最大值为: ' + Number.MAX_VALUE);
console.log('最小值为: ' + Number.MIN_VALUE);
console.log('负无穷大: ' + Number.NEGATIVE_INFINITY);
console.log('正无穷大:' + Number.POSITIVE_INFINITY);
var ns: number = 100.1234;
ns.toFixed(2);
//toLocaleString() 把数字转换为字符串，使用本地数字格式顺序。
//toPrecision() 把数字格式化为指定的长度。 100.1234-->toLocaleString(3)->100
// 字符串String
//length 返回字符串的长度。
//prototype 允许您向对象添加属性和方法。
//charAt() 返回在指定位置的字符。
//concat 连接两个或更多字符串，并返回新的字符串。
//... 和js一样
//数组
var sites: string[];
sites = ['Google', 'Runoob', 'Taobao'];
//Array
var arr: number[] = new Array(4);
// var arr: number[] = new Array(1,2,3,4);
arr.length;
arr[0] = 4;
//迭代 for..in
//方法 concat() 拼接
//every 检测数值元素的每个元素是否都符合条件。
function isBigEnough(element, index, array) {
return element >= 10;
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
console.log('Test Value : ' + passed); // false
//filter() 检测数值元素，并返回符合条件所有元素的数组。
function isBigEnough(element, index, array) {
return element >= 10;
}
var passed = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log('Test Value : ' + passed); // 12,130,44
//join()
//map()
//pop() 删除数组的最后一个元素并返回删除的元素。
//push() 向数组的末尾添加一个或更多元素，并返回新的长度。
//reduce
var total = [0, 1, 2, 3].reduceRight(function (a, b) {
console.log(a, b);
return a + b;
});
console.log('total is : ' + total); // 6
//输出
3 2
5 1
6 0
//reverse() 反转数组的元素顺序。
//shift() 删除并返回数组的第一个元素。
//some() 检测数组元素中是否有元素符合指定条件。
//sort() 对数组的元素进行排序。
//splice() 从数组中添加或删除元素。
//Map对象
let myMap:Map<string,number> = new Map();
//以数组的格式来传入键值对
let myMap2 = new Map([
["key1", "value1"],
["key2", "value2"]
]);
//set get clear has delete size keys values
for (let value of myMap.values()) {
console.log(value);
}
for (let entry of myMap.entries()) {
console.log(entry[0], entry[1]);
}
//元组 元组中允许存储不同类型的元素，元组可以作为参数传递给函数。
var mytuple = [10,"Runoob"];
//操作 push() 向元组添加元素，添加在最后面。 pop() 从元组中移除元素（最后一个），并返回移除的元素。
//更新 mytuple[0] = 121
//联合类型
// 通过管道(|)将变量设置多种类型
var val:string|number
val = 1;
val = "123"
val = true //报错
//使用typeof 判断类型
//接口 接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
//接口继承
interface Person {
age:number
}
interface Musician extends Person {
instrument:string
}
var drummer = <Musician>{};
drummer.age = 27
drummer.instrument = "Drums"
//多继承
interface IParent1 {
v1:number
}
interface IParent2 {
v2:number
}
interface Child extends IParent1, IParent2 { }
var Iobj:Child = { v1:12, v2:23}
//类
class Car{
// 字段 相当于final
readonly engine:string;
// 构造函数
constructor(engine:string,name?:string) {
this.engine = engine
}
// set setEngine(engine :string){
// this.engine = engine //error
// }
// 方法
disp(names? :string):void {
console.log("发动机为 : "+this.engine)
}
}
var car : Car = new Car("引擎",undefined);
Object.defineProperty(car,'size',{
get() {
return "car name"
},
set(v) {
this.size = v;
},
})
car.disp("haha")
//继承
class Shape {
Area:number
constructor(a:number) {
this.Area = a
}
}
class Circle extends Shape {
disp():void {
console.log("圆的面积: "+this.Area)
}
}
var obj = new Circle(223);
obj.disp()
//instanceof 判断是否是某个类型 子类是否是父类的 child instanceof parent
//关键字 public 任何地方都能访问
// private 只能所在类访问
// protect 自己和子类访问
//类和接口
interface ILoan {
interests:number
}
class AgriLoan implements ILoan {
interest:number
rebate:number
constructor(interest:number,rebate:number) {
this.interest = interest
this.rebate = rebate
}
interests: number;
}
var obj = new AgriLoan(10,1)
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )
//命名空间
//TypeScript 中命名空间使用 namespace 来定义
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
//调用语法格式
SomeNameSpaceName.SomeClassName;
///一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它
/// <reference path = "SomeFileName.ts" />
//嵌套命名空间
//namespace命名空间
namespace Runoob {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}
//引用文件
/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
//TypeScript 模块 模块是在其自身的作用域里执行，并不是在全局作用域，
//这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们
//在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖
// 文件名 : SomeInterface.ts
export interface SomeInterface {
// 代码部分
}
import someInterfaceRef = require("./SomeInterface");
/// <reference path = "IShape.ts" />
export interface IShape {
draw();
}
import shape = require("./IShape");
export class Circle implements shape.IShape {
public draw() {
console.log("Cirlce is drawn (external module)");
}
}
import shape = require("./IShape");
export class Triangle implements shape.IShape {
public draw() {
console.log("Triangle is drawn (external module)");
}
}
import shape = require("./IShape");
import circle = require("./Circle");
import triangle = require("./Triangle");
function drawAllShapes(shapeToDraw: shape.IShape) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
//泛型 用法基本是和java/dart一样
//使用含有泛型的接口来定义函数的形状
interface CreateArrayFunc {
<T>(length: number, value: T): Array<T>;
}
//interface CreateArrayFunc<T> {
// (length: number, value: T): Array<T>;
//}
let createArray: CreateArrayFunc;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
