TypeScript学习笔记(2019最新最全)

最新推荐文章于 2023-09-20 22:30:44 发布

Gavincoder

最新推荐文章于 2023-09-20 22:30:44 发布

阅读量1.3k

点赞数 1

分类专栏： Javascript 大前端 typescript

本文链接：https://blog.csdn.net/weixin_39200308/article/details/90597453

版权

本文详细介绍了TypeScript的学习笔记，包括其简介、环境搭建、基本数据类型、类、函数、接口、泛型和模块等内容。TypeScript作为JavaScript的超集，提供了静态类型检查、面向对象特性，是未来开发的趋势。文中还分享了如何安装和使用TypeScript，以及各种类型的示例，如boolean、number、string、Array、enum、any、void等。此外，还讨论了类的创建、继承和访问修饰符，函数类型、参数和泛型的应用，以及接口和模块的概念。

摘要由CSDN通过智能技术生成

欢迎大家加入我的github项目,一起学习，一起发展

--->全栈工程师进阶学习站
--->我的前端学习笔记
--->行业内最新最群的报告，工作日每日更新

TypeScript学习笔记

1.TypeScript简介

1.JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

特点：

1).解析型语言( 可以直接执行 )

2).弱类型语言( 没有类型检查 )

CMD 开发方式。CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的

CommonJS、AMD与CMD规范的区别：http://blog.csdn.net/jackwen110200/article/details/52105493

2.TypeScript

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zsXPhrGy-1578037093297)(4.png)]

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向JavaScript语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。2012年十月份，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript 0.9，向未来的TypeScript 1.0版迈进了很大一步。

特点：

1).编译型语言( 将 ts 编译成 js ; ts不可以直接执行 )

2).强类型语言( 类似 : Java , C# , 有类型检查 )

3).真正面向对象的语言（继承，接口，封装，泛型 …）

4).AMD开发方式。AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。

CommonJS、AMD与CMD规范的区别：http://blog.csdn.net/jackwen110200/article/details/52105493

**TypeScript中文文档：**https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

TypeScript 教程： https://www.w3cschool.cn/typescript/

3.为什么学习TypeScript

用过的人基本都说它好用：https://www.tslang.cn/index.html#download-links

也是未来的趋势

2.TypeScript环境搭建

1.安装TypeScript编译器

1.安装node环境

https://nodejs.org/en/ 到官网下载默认安装，安装好后就可以npm包管理器

node -v  // 检查是否安装好node

2.安装TypeScript编译器

通过npm包管理器安装TypeScript命令行工具

npm install -g typescript   // typescript 是一个编译器，负者将ts文件编译成js文件

最后可以在命令行执行tsc 检查typescript是否安装成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OU6FDS81-1578037093297)(1.png)]

2.编译ts文件

1.编写typescript文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaJ7EQDT-1578037093298)(2.png)]

/**
 * 定义一个HelloWorld的类
 */
class HelloWorld{
   

    /**定义一个show方法*/
    show(){
   
        console.log('show');
    }

}

2.将typescript文件编译成js文件

tsc 01-helloworld.ts   //将typescript文件编译成js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WUhmNHUX-1578037093298)(3.png)]

注意：webStrom默认会自动将ts文件编译成js文件

3.TypeScript基本数据类型

基本类型：https://www.tslang.cn/docs/handbook/basic-types.html

boolean number string   Array  enum any void  null undefined symbol

1.boolean

1.ts定义boolean类型变量

/**js写法*/
var isDone1=true;

/**ts写法*/
var isDone2:boolean=false;
console.log(isDone1,isDone2);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FTZgXWJl-1578037093299)(5.png)]

2.ts文件编译成js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhJ61Wah-1578037093300)(6.png)]

3.执行js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cSUdxztb-1578037093300)(7.png)]

2.number

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CojaHsHQ-1578037093301)(8.png)]

3.string

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjqQxcRJ-1578037093302)(9.png)]

4.Array

https://www.tslang.cn/docs/handbook/basic-types.html

1.第一种方式声明数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wf2wAUqN-1578037093303)(10.png)]

2.第二种方式声明数组

使用数组泛型，Array<元素类型>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rFmfN5Hs-1578037093303)(11.png)]

5.enum

1.定义枚举

/**js语法*/
...
/**ts语法*/
enum College2{
   
    IOS,
    Android,
    HTML5,
    UI
}
console.log(College2.HTML5); // 获取枚举的索引  2
console.log(College2[2]);  //获取枚举的名称 HTML5

默认情况下，IOS , Android,HTML5,UI从0开始为元素编号。你也可以手动的指定成员的数值。如下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K34mUfKf-1578037093304)(12.png)]

2.枚举的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xsLNtQGB-1578037093305)(13.png)]

/**ts语法*/
enum College2{
    IOS,
    Android,
    HTML5,
    UI
}
// 返回的类型是College2枚举类型(number也可以)
var index:College2=College2.HTML5;//获取索引
// 返回的类型是string类型
var College2Name:string=College2[2];//获取枚举名

console.log(index);//获取索引
console.log(College2Name); //获取枚举名
console.log(College2);// 打印枚举对象

6.any

是任意类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6gnLrQ0s-1578037093305)(14.png)]

7.void

1.void声明变量

void声明的变量时，变量只能为赋予undefined和null，赋予其它会报错。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vz0vcpM2-1578037093306)(file:///F:/xiaomage/%E8%AF%BE%E4%BB%B6/TypeScript/day01/md/15.png?lastModify=1519607187)]](15.png)

2.void声明函数返回类型(常用)

/**ts语法:声明函数的返回类型位string*/
function show2():string{
   
    return 'show2'
}

/**ts语法:声明函数的返回类型位void*/
function show3():void{
   
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aiYV0dNK-1578037093306)(16.png)]

8.类型推测

在编译时, 发现代码中的类型使用有错时会报错

1.var变量会自定推测其类型

https://www.tslang.cn/docs/handbook/type-inference.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fj31cNfj-1578037093307)(17.png)]

在编译时, 发现代码中的类型使用有错时会报错：

error TS2322: Type ‘abc’ is not assignable to type ‘number’.

2.数组也会自动推测其类型

var arr=[3,'asd',false,3]; // 编译器自动推测其类型为any 
arr[4]='sdf'; // 不会报错

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZQmoRfCV-1578037093307)(18.png)]

在编译时 , 发现代码中的类型使用有错时会报错：

error TS2322: Type ‘addf’ is not assignable to type ‘number’.

9.冲突检查

在编译时，发现代码有冲突的地方会报错：

error TS2678: Type ‘string’ is not comparable to type ‘number’.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-urHKUQRr-1578037093308)(19.png)]

10.联合类型

1.在变量中使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Ny26XVW-1578037093309)(20.png)]

2.在参数中使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HdFjqKeK-1578037093309)(21.png)]

4.TypeScript类-Class

https://www.tslang.cn/docs/handbook/classes.html

1.类的创建

1.js创建一个Person类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P12mDmAO-1578037093310)(22.png)]

/*1.构造函数*/
function Person(name,age){
   
   this.name=name;
   this.age=age;
}

/*2.添加方法*/
Person.prototype.getName=function () {
   
    console.log(this.name);
}

/*3.新建一个person对象*/
var person=new Person('jack',12);
console.log(person);

2.ts创建一个Person类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VyTelUgx-1578037093310)(23.png)]

/*1.定义一个Person2类*/
class Person2{
   
    /*2.添加属性,并声明属性的类型*/
    name:string;
    age:number;
    /*3.类的构造器*/
    constructor(name:string,age:number){
   
        this.name=name;
        this.age=age;
    }
    /*4.定义方法*/
    getName():void{
   
        console.log(this.name);
    }
}
/*5.新建一个Person对象*/
var person2=new Person2('lili',20);
console.log(person2);
person2.getName()

2.类的继承

1.js实现类的继承

原型式继承 , 原型链继承 ,借用构造函数 , 组合继承 …

/**1.js语法*/
/*1.定义一个Person1类*/
function Person1(name,age){
   
    this.name=name;
    this.age=age;
}

Person1.prototype.getName=function () {
   
    console.log(this.name);
}

/*2.定义一个Student类*/
function Student(name,age,job){
   
    /*借用构造器函数*/
    Person1.call(this,name,age);
    this.job=job;
}

/*3.让Student类继承Person1类 (原型链继承)*/
Student.prototype=new Person1();
Student.prototype.constructor=Student;

/*4.给Student类添加方法*/
Student.prototype.getJob=function () {
   
    console.log(this.job);
}

/*5.新建一个Student对象*/
var student=new Student('jack',23,'study');
console.log(student);
student.getJob();
student.getName();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hqCP0wgo-1578037093311)(24.png)]

2.ts实现类的继承

/**
 * Created by liujun on 2018/2/26.
 */

最低0.47元/天解锁文章

Gavincoder

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录