typescript学习笔记

最新推荐文章于 2024-08-13 08:41:10 发布

abiao555

最新推荐文章于 2024-08-13 08:41:10 发布

阅读量192

点赞数

分类专栏： typescript js 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/abiao555/article/details/107074180

版权

js 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

typescript

1 篇文章 0 订阅

订阅专栏

typescript是微软开发的一个javascript的一个超集。支持es6规范。它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

es是客户端脚本的规范，es5，es6是这些规范的不同版本。JavaScript与typescript是两种客户端脚本语言，JavaScript实现了es5规范，typescript实现了es6规范。

搭建typescript开发环境

NPM 安装 TypeScript：npm install -g typescript

（NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题）

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关命令，如查看tsc版本：tsc -v

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

第一个typescript文件：hello.ts内容如下

export class Hello{}
编译生成js文件并执行
tsc hello.ts
node hello.js

typescript特性：

1.多行字符串：

var a=`sdfasd
fs
adf`

2.字符串新特性：

var myname="aaaa";

var myfunc=function(){

return "ssdsdfsdf";

}

console.log(`<div>

<span>${myname}</span>

<p>${myfunc()}</p>

</div>`); //注意不是单引号

3.自动拆分字符串

下面例子用字符串模板调用函数

function test(str,name,age){

console.log(str);

console.log(name);

console.log(age);

}

var name1='aaaa';

var getage=function (){

return 22;

}

test`adfasdfsdfs adf${name1}sdf${getage()}sadf`

参数类型的新特性：

声明参数指定类型：var str1: string = "hello";

也可以不声明类型，typescript会自动根据值腿短类型 var str1 = "hello";

可以为变量设置一个any类型，这样这个变量可以设置成任何类型，既可以是字符串也可以是数字

其他常用数据类型实例：

var age: number = 18;
var man: boolean = true;

//设置函数的参数类型及返回值类型
function aaa(name: string, age:number=18): string {
return 'sdf';
}

//设置空返回值的函数
function bbb(name: string): void {
alert(234);
}

//自定义类型
class Person {
name: string;
age: number;
}
var p1 = new Person();
p1.name = "zhang san";
p1.age = 18;

函数的可选参数与默认值参数：在参数名后面加"?"表示这个参数是可选参数，可选参数与默认值参数都要在必填参数后面

function aaa(name: string,xueli?:string,age:number=18): string {
return 'sdf';
}

用Rest and Spread操作符声明任意数量参数的方法：

function func1(...args) {
args.forEach(function (arg) {
console.log(arg);
})
}

func1(1, 2, 3);

func1(5,6,7,8,9,3)

//Rest and Spread操作反过来使用(注意目前typescript并不支持这种方法，但是生成的js可以正常使用)

function fun2(a,b,c) {
console.log(a);
console.log(b);
console.log(c);
console.log("==================");
}

var parame1 = [1, 2];
var parame2 = [3, 4, 5, 6, 7, 8];
fun2(...parame1);
fun2(...parame2);

generator函数：控制函数的执行过程，手工暂停或恢复代码执行

function* aaa() {
console.log("aaa");
yield;
console.log("bbb");
}

var fun1 = aaa();
fun1.next();
fun1.next();

注意generator函数需要在声明函数的function后面添加*号，使用generator函数时候需要复制给一个变量。需要使用next执行下一步

析构表达式：通过表达式将对象或数组拆解成任意数量的变量

针对对象的析构表达式：

function getdata() {
return {
aaa: "zhang san",
age: 100,
zzz: {
z1: 10,
z2:20
},
yyyy: 888,

}
}

//以前调用方法
var data1 = getdata();
var name1 = data1.aaa;
var age1 = data1.age;
console.log(name1);
console.log(age1);
console.log("====");

//新的获取方式
var { aaa, age } = getdata();
console.log(aaa);
console.log(age);

注意{}中的参数名要和方法名一致，否则需要用下面方法映射下

var { aaa: xxx, age, zzz: {z1}} = getdata();
console.log(xxx);
console.log(age);
console.log(z1);

zzz: {z1}能获取到zi的值

针对数组的析构表达式：

var array1 = [1, 2, 3, 4];
var [num1, num2] = array1;//获取的是1，2
var [,,num3, num4] = array1;//获取的是3，4
var [num5, num6, ...other] = array1; //other是一个数组，里面的值是3，4

var array1 = [1, 2, 3, 4];
function diyfunc([num1,num2,...other]) {
console.log(num1);
console.log(num2);
console.log(other);
}

diyfunc(array1);

箭头表达式：用来声明匿名函数，消除传统匿名函数的this指针问题

var sum = (arg1, arg2) => arg1 + arg2;

var sum = (arg1, arg2) => {
return arg1 + arg2;
}

var sum = function (arg1, arg2) { return arg1 + arg2; };
上面三种方法是等价的

//无参箭头表达式声明的一个方法
var sum =()=>{
console.log(231123);
}

//只有一个参数的箭头表达式声明的一个方法
var sum =arg1=>{
console.log(arg1);
}

//箭头函数实例：打印数组中的偶数
var myarray = [1, 2, 3, 4, 5, 6];
console.log(myarray.filter(aaa => aaa % 2 == 0));
//filter用于对数组元素进行过滤。

//箭头函数this用法
function bbb(name: string) {
this.name = name;
setTimeout(() => {
console.log("name is " + this.name);
},1000)
}
bbb('aaa');

//箭头函数forEach（注意这个不支持break）
var array1 = [1, 2, 3, 4];
array1.forEach(val=>console.log(val));

传统for in以及for of
var array1 = [1, 2, 3, 4];
for (var n in array1) { //n从0开始
console.log(n+"==="+array1[n]);
}

for (var n of array1) { //n从1开始
console.log(n+"==="+array1[n]);
}
for of可以适用于对象，数组，字符串等很多地方

typescript类：

class Person {

constructor() { //构造方法
console.log('xxxx');
}

public name;
age

run() {
console.log(this.name+" is running");
}
}
var p1 = new Person();
p1.name = "zhang san";
p1.run();

实例：

class Person {

public name;
constructor(name:string) { //构造方法
this.name = name;
}

run() {
console.log(this.name+" is running");
}
}
var p1 = new Person('zhang san');
p1.run();

//上面这个实例可以简写为

class Person {
constructor(public name:string) { //构造方法
this.name = name;
}
run() {
console.log(this.name+" is running");
}
}
var p1 = new Person('zhang san');
p1.run();

类的继承:

class Person {
constructor(public name:string) { //构造方法
this.name = name;
}
eat() {
console.log(this.name+" is eat");
}
run() {
console.log(this.name+" is running");
}
}

class Employee extends Person{
constructor(name:string,code:string) {
//子类声明构造方法必须调用父类的构造方法
super(name);
}
code: string;
work() {
super.eat();
console.log(this.name+" is working");
}
}
var e1 = new Employee('xiao li','101');
e1.work();

泛型：参数化的类型，一般用于限制集合的内容

var workers: Array<Person> = [];
workers[0] = new Person("wk1");
workers[2] = new Employee("wk2","102");

接口的两种用法：

接口的继承方法：

interface Animal {
run();
}
class Dog implements Animal {
run() {//类必须继承接口的方法
console.log("eat grass");
}
}

将接口作为某个类的某个方法参数的验证

interface Person {
name: string;
age: number;
}

class wker{
constructor(public config:Person) {
console.log("xxx");
}
}
var p1 = new wker({
name: "xing ming",
age:20
});

模块：可以帮助开发者将代码分割为可重用的单元。一个ts文件就可以看做是一个模块

模块常用的两个关键字：export对外暴露什么方法，import导入某个模块

实例：

a.ts代码：