1.ts初步介绍
2.ts开发环境的搭建
3.基本类型
4.编译选项介绍
5.结合构建工具webpack使用TS。
1.ts初步介绍:
什么是 TypeScript?
- TypeScript 是添加了类型系统的 JavaScript,适用于任何规模的项目。
- TypeScript 是一门静态类型、弱类型的语言。
- TypeScript 是完全兼容 JavaScript 的,它不会修改 JavaScript 运行时的特性。
- TypeScript 可以编译为 JavaScript,然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
- TypeScript 拥有很多编译选项,类型检查的严格程度由你决定。
- TypeScript 可以和 JavaScript 共存,这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
- TypeScript 增强了编辑器(IDE)的功能,提供了代码补全、接口提示、跳转到定义、代码重构等能力。
- TypeScript 拥有活跃的社区,大多数常用的第三方库都提供了类型声明。
- TypeScript 与标准同步发展,符合最新的 ECMAScript 标准(stage 3)。
2.ts开发环境的搭建
1.使用npm全局安装typescript
输入:npm i -g typescript
2.创建一个ts文件(后缀加上.ts的文件
3.执行编译:tsc 文件名.ts 就会生成一个编译好的js文件
3.基本类型:
1.类型声明:
- 类型声明是TS非常重要的一个特点
- 通过类型声明可以指定TS中变量(参数、形参)的类型
- 指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
- 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
let 变量:类型
let 变量:类型
let 变量:类型=值;
function fn(参数:类型,参数:类型):类型{
...
}
ts拥有自动的类型判断机制,当对变量和赋值是同时进行的,ts编译器会自动判断变量的类型
所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明
基本类型有
类型 | 例子 | 描述 |
number | 1, -33, 2.5 | 任意数字 |
string | 'hi', "hi", | 任意字符串 |
boolean | true、false | 布尔值true或false |
字面量 | 其本身 | 限制变量的值就是该字面量的值 |
any | * | 任意类型 |
unknown | * | 类型安全的any |
void | 空值(undefined) | 没有值(或undefined) |
never | 没有值 | 不能是任何值 |
object | {name:'孙悟空'} | 任意的JS对象 |
array | [1,2,3] | 任意JS数组 |
tuple | [4,5] | 元素,TS新增类型,固定长度数组 |
enum | enum{A, B} | 枚举,TS中新增类型 |
1.number,字符串,布尔值类型声明
、、对aa 声明number类型,接下来的aa的赋值就必须是数字类型,其他类型就会报错
let aa:number
、、对aa 声明字符串类型,接下来的aa的赋值就必须是字符串类型,其他类型就会报错
let bb:string
、、对aa 声明布尔类型,接下来的aa的赋值就必须是布尔类型,其他类型就会报错
let cc:boolean
2.字面;量声明
let color:'red' | 'green' | 'yellow' 表示color 可以为这是哪个值,其他的不行
let c: boolean|string
c=true c='hellow'
3.any 表示任意类型,任意赋值
let d: any = 4;
d = 'hello';
d = true;
4.unknown
let notSure: unknown = 4;
notSure = 'hello';
5.void 用来表示为空,以函数为例,就表示函数没有返回值(null,undfined 在这里都是为空的意思)
6.never 声明没有值 ,不是为空的意思,是连有都没有
function error(message: string): never {
throw new Error(message);
}
7.object
语法:let b:{name:sting,age:number}
规定了 对象b的键名和值
b={name:'柳大华',age:18}
如果键名后面带有?号表示该属性是可选的,可写可不写
let C={name:string,[propname:string]:any]}
表示这个对象里必须有个name键名和字符串值, 其他的任意建明都可以但是值的为字符串类型
7.array
let aa:string[] 声明值为字符串类型的数组
number[] 声明值为数字类型的数组
Array<number> 声明值为数字类型的数组
8.元组:就是固定长度的数组
当赋值或访问一个已知索引的元素时,会得到正确的类型:
let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;
tom[0].slice(1);
tom[1].toFixed(2);
也可以只赋值其中一项:
let tom: [string, number];
tom[0] = 'Tom';