一.TypeScript 简介
- TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。
- TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。
- TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。
二.javaScript 和 TypeScript 的概要介绍
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言
1.JavaScript
JavaScript 是一种轻量级的解释性脚本语言,可嵌入到 HTML 页面中,为用户带来流畅多样的用户体验.
JavaScript 是基于对象和事件驱动的,无需特定的语言环境,只需在支持的浏览器上就能运行。
JavaScript 语言具有以下特点:
- JavaScript 的语法简单,使用的变量为弱类型。
- JavaScript 兼容性较好,能够与其他技术(如 XML,REST API 等)一起使用。
- JavaScript 语言较为安全,仅在浏览器端执行,不会访问本地硬盘数据。
- JavaScript 只依赖于浏览器,与操作系统的因素无关。因此 JavaScript 是一种跨平台的语言。
2.TypeScript
TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言,可以载入 JavaScript 代码运行
TypeScript 具有以下特点:
- TypeScript 可用于开发大型的应用
- TypeScript 易学易于理解
- TypeScript 增加了静态类型、类、模块、接口和类型注解
- TypeScript 是 Microsoft 推出的开源语言,使用 Apache 授权协议
四.TypeScript 的优势
1.大型的开发项目
有时为了改进开发项目,需要对代码库进行小的增量更改.这些小小的变化可能会产生严重的、意想不到的后果,因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。
2.静态输入
静态类型化是一种功能,可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能,就会允许开发人员编写更健壮的代码并对其进行维护,以便使得代码质量更好、更清晰。
3.更好的协作
当发开大型项目时,会有许多开发人员,此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能,而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。
五.JavaScript 的优势
1.人气
JavaScript 的开发者社区可以很方便地找到大量成熟的开发项目和可用资源。
2.本地浏览器支持
TypeScript 代码需要被编译(输出 JavaScript 代码),这是 TypeScript 代码执行时的一个额外的步骤。
3.不需要注释
为了充分利用 TypeScript 特性,开发人员需要不断注释他们的代码,这可能会使项目效率降低。
4.灵活性
有些开发人员更喜欢 JavaScript 的灵活性。
六.TypeScript 开发环境搭建和编译代码
1.下载 Node.js
node.js 管网:https://nodejs.org/zh-cn/
2.安装 Node.js
这里就不详细说了,直接下一步就可以了
3.使用npm全局安装typescript
// 安装: 进入 cmd 命令行
npm install -g typescript
// 查看版本
tsc -v
注意点:编写ts文件,运行ts文件是先编译成js后在执行
4.编译代码
在命令行上,运行TypeScript编译器:
tsc greeter.ts
输出结果为一个greeter.js文件,它包含了和输入文件中相同的JavsScript代码。
七.基础类型
js基础类型分为两种:原始类型和对象类型,其中原始类型包括:数值、字符串、布尔值、null、undefined以及es6中的symbol、biignt。
ts支持与js几乎相同的数据类型。
1.布尔值/字符串/数值
// 声明一个变量a,同时指定它的类型为number
let a: number;
// a 的类型设置为number,在以后的使用过程中a的值只能是数字
a = 10;
// a = 'hello' // 此行代码会报错,因为变量a的类型是number,不能赋值字符串
let b: string;
b = 'hello';
// 声明完变量直接进行赋值
// let c:boolean = false;
// 如果变量的声明和赋值是同时进行的.Ts可以自动对变量进行类型检测
let c = false;
c = true;
//声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 undefined:
//var [变量名];
var cord;
(1). 如果变量的声明和赋值是同时进行的,ts可以自动对变量进行类型检测。
let str: string;
str = 'hello';
str = 9; // 报错
2.null和undefined
//这两个类型只有 自己
const onlyNull: null = null;
const onlyUndefined: undefined = undefined;
3.数组
TS里手动指明一个数组类型很简单,只需要在普通类型注解后面加上[]符号。比如声明一个布尔数组为 :boolean[]
//数组泛型,Array<元素类型>
let list: Array<number> = [1, 2, 3];
//string[] 字符串数组
let list: string[];
list = ['a', 'b', 'c'];
//number[] 数值数组
let list: number[] = [1, 2, 3];
示例如下:
let boolArray: boolean[];
boolArray = [true, false];
console.log(boolArray[0]); // true
console.log(boolArray.length); // 2
boolArray[1] = true;
boolArray = [false, false];
boolArray[0] = 'false'; // 错误
boolArray = 'false'; // 错误
boolArray = [true, 'false']; // 错误
4.元组
元组:元组就是固定长度的数组
元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同
// 语法:[类型, 类型, 类型]
let list: [string, number];
list = ['hello', 123];
list = ['hello'];// 报错
list = [123, 'hello']; // 顺序不一致
list = ['hello', 123, 11]; // 多余
5.| 和 &
// | 或 表示可以是字符串或数值,只要有一个符合就行
let str: string | number;
str = 1;
console.log(str.length)// 报错
str = 'hello';
console.log(str.length)// 正常运行
str = false; //报错
//& 表示同时,必须都符合
let str2: {name: string} & {age: number};
str2 = {name: '嘿嘿'}; //报错
str2 = {name: '嘿嘿', age: 18};
6.function
1. 默认参数( = )就是可以给 参数一个默认值 同时也可以给指定一个类型
const add = (a: number = 10, b: number = 20): number => {
return a + b
};
let result = add();
console.log(result); // 30
2. 因为指定了默认参数 add() 函数中在没有传递任何参数的时候 就按照给出的默认值去执行
const add = (a: number = 10, b: number = 20, c: number): number => {
return a + b + c
};
let result = add(undefined, undefined);
上面 add() 函数设定了3个参数 但是我在执行的时候只传递了 2 个占位参数,所以会报错
3. 在 js 中都可以不传递所有参数的 那么如何解决这个问题呢?
两个方法:
- 直接 用 undefined 做占位符传递一个 c 参数进去就好了
const add = (a: number = 10, b: number = 20, c: number): number => {
return a + b + c
};
let result = add(undefined, undefined, 30); // 60
- 可选参数
// 可选参数( ? )就是 这个参数可以是不传的
const add = (a: number = 10, b: number = 20, c?: number): number => {
return a + b + c
};
let result = add();
console.log(result); // 30
这样的函数方法 一个参数都不用传递 还可以正常运行