typescript光速入门

文章目录

运行环境
数据类型
函数
面向对象

TypeScript(后称ts)是微软开发的开源编程语言，是JavaScript(后称js)的超集并可以转译成纯的js，对React、Angular、Vue这三大框架都有非常友好的支持。

有一点js的基础会更好：javascript光速入门

运行环境

在线环境

微软提供了在线的ts运行环境，不仅在右侧实时将其翻译为js，还可以点击运行，直接查看输出结果。

tsc

在本地可通过npm来安装，安装完成之后，通过tsc语句翻译。

npm installl -g typescript
tsc helloworld.ts

其中helloworld.ts文件内容为

//helloworld.ts
const s = "Hello World"
console.log(s)

tsc是ts的命令行工具，对ts翻译后，会在相同路径下生成同名的js文件，而且这个js文件十分质朴，和普通的js没啥区别，可在浏览器中调用，或者用node helloworld.js。

通过tsc -h可以显示帮助信息。

ts-node

若希望跳过翻译这个步骤，直接运行ts文件，其实也是可以的，但需要下载一个工具ts-node

npm install -g ts-node

然后可以直接运行

>ts-node helloworld.ts
Hello World

也可以进入ts-node的交互式命令行，并执行ts代码

>ts-node
> const s = "hello world"
undefined
> s
'hello world'

数据类型

在js中，数据类型不必声明，可随时更改，在ts中则不可，除非采用关键字any来修饰。下面的示例在ts-node交互式命令行中运行

> let a : number = 5;
> a = 6
6       //可重新赋值
> a = "a"
//报错，由于a的数据类型不允许发生变化
> var b = 5;
> b = "b"
// 尽管没用冒号声明，但ts自动推算出b是数值，故仍然不能是字符串
> let c : number|string //变量可以有多种类型
> c = "c"
> c = 2     //不报错
//反引号可内嵌表达式，这个引号就是表示代码片的那个引号。
> let a_b: string = `a=${a}, b=${b}`;
> console.log(a_b)
a=6, b=5
> let arr: number[] = [1,2,3]
> let arr2: Array<number> = [2,3,4]   //数组泛型
> let cell: [string,number,boolean] = [myName, myAge, flag]  //元组内部的元素不必同类型

js中提供了Undefined和Null类型，前者表示未设置值的变量，后者表示空变量，二者可以赋值给任何类型。但是在ts中，这仍旧属于跨类型行为，需要用|来粘合

> let flag : boolean|null|undefined;
> flag = null
> flag = true

其条件、循环等控制语句和js十分雷同，故不赘述。

函数

传参

由于ts对类型的要求比较严格，所以函数在传参时需要声明数据类型。此外，提供了修饰符?用于可选参数，并且支持默认参数，比js更加规范一些。

//ts代码
function add(x:number, y:number=12, z?:number):number{if (z)return x+y+z;   //单行代码可以不用{}，但对于python写习惯的人来说不建议这么做elsez = 0;return x+y;
}
console.log(add(1));    //由于y默认为12，所以输出为13
console.log(add(1,2));  //如果在声明时，z不加?会报错。

通过tsc将其转成js文件如下。

function add(x, y, z) {//js中需要在函数中声明默认参数。if (y === void 0) { y = 12; }   if (z)return x + y + z;elsez = 0;return x + y;
}
console.log(add(1));
//此时z的值为undefined,故if(z)为false
console.log(add(1, 2));

typescript还支持剩余参数表达式

//ts代码，用...nums表示剩余的数量未知的参数
function muti(x:number,...nums:number[]){var sum: number = x;for(var i = 0; i<nums.length; i++)sum *= nums[i]       //在ts中其实可以不写分号，但一般建议写上return sum;
}
console.log(muti(3))        //输出为3
console.log(muti(3,4,5))    //输出为60

转成js代码如下

function muti(x) {var nums = [];        for (var _i = 1; _i < arguments.length; _i++) {nums[_i - 1] = arguments[_i];//在js中，默认剩余参数为arguments}var sum = x;for (var i = 0; i < nums.length; i++)sum *= nums[i];return sum;
}
console.log(muti(3));
console.log(muti(3, 4, 5));

重载

所谓重载，就是对于同一函数名，当我们传入不同的参数时，执行不同的操作。在js中，通过自动判断类型可达到重载目的。在ts中，则需事先精确地声明被重载的函数，以起到类型检查的作用。

//ts程序，如果输入参数是数字，则相加；如果是字符串则合并
function add(...str:string[]):string;//重载函数1
function add(...num:number[]):number;//重载函数2
//此为函数重载的实现，并不能算作一个新的重载函数
function add(...para:any[]):any{if(typeof para[0]==="string"){let str:string = "";para.forEach((val)=>{str = str+val});//forEach循环,参数val为para中的值return str;}else{let num = 0;para.forEach((val)=>{num+=val});return num;}
}console.log(add(1,2,3,4));         //输出为10
console.log(add('1','2','3','4'));  //输出为'1234'

转成js代码如下

function add() {var para = [];for (var _i = 0; _i < arguments.length; _i++) {para[_i] = arguments[_i];}if (typeof para[0] === "string") {var str_1 = "";para.forEach(function (val) { str_1 = str_1 + val; });return str_1;}else {var num_1 = 0;para.forEach(function (val) { num_1 += val; });return num_1;}
}
console.log(add(1, 2, 3, 4));
console.log(add('1', '2', '3', '4'));

可见ts中对重载函数的声明并未体现在js代码中，但是在ts文件中，输入console.log(add(1, 2, 3, '4'));编译器会自动检查出错误，而js并不会。或者将ts中最上面的两行声明代码注释掉，也不会检查出问题。

面向对象

在js中，对象实则是键值对的组合，类似于字典；ts中的对象才是真的对象，所以ts号称面向对象的js。

在ts中类的定义还是比较符合程序员的直觉的。

class Person{//构造函数，可以省略constructor(name:string,littleName:string){this.name = name;this.littleName = littleName;}public name: string;        //访问不受限制，默认修饰符private littleName: string; //private字段不能被外部访问//protected可以在派生类中被访问protected myLittleName(){console.log(this.littleName);}public printMyName(){console.log(this.name);}
}//类的继承用extends
class Chinese extends Person{public myName(){this.printMyName();this.myLittleName();    //protected字段可以被派生类访问/*但是不能访问littleNameconsole.log(this.littleName)会报错*/}
}
let a = new Person("Tony","铁蛋");
a.printMyName();   //输出为Tonylet b = new Chinese("Tony","铁蛋");
b.myName();       //输出为Tony，铁蛋

转成js的代码后瞬间头就大了

var __extends = (this && this.__extends) || (function () {var extendStatics = function (d, b) {extendStatics = Object.setPrototypeOf ||({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };return extendStatics(d, b);};return function (d, b) {extendStatics(d, b);function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};
})();
var Person = /** @class */ (function () {//构造函数，可以省略function Person(name, littleName) {this.name = name;this.littleName = littleName;}//protected可以在派生类中被访问Person.prototype.myLittleName = function () { console.log(this.littleName); };Person.prototype.printMyName = function () { console.log(this.name); };return Person;
}());
var Chinese = /** @class */ (function (_super) {__extends(Chinese, _super);function Chinese() {return _super !== null && _super.apply(this, arguments) || this;}Chinese.prototype.myName = function () {this.printMyName();this.myLittleName();};return Chinese;
}(Person));
var a = new Person("Tony", "铁蛋");
a.printMyName();
var b = new Chinese("Tony", "铁蛋");
b.myName();