1. TypeScript是什么
- TypeScript是以JavaScript为基础构建的语言
- 一个Javascript的超集
- 可以在任何支持JavaScript的平台中执行
- TypeScript扩展了JavaScript,并添加了类型
- TS不能被JS解析器直接执行,它需要编译成JS
2. TypeScript增加了什么
- 类型
- 支持ES的新特性
- 添加ES不具备的新特性
- 丰富的配置选项
- 强大的开发工具
3. 开发环境搭建
- 下载安装Node.js(省略)
- 使用npm全局安装typescript(进入命令行输入:
npm i -g typescript
,查看是否安装成功) - 创建一个ts文件
- 使用tsc对ts文件进行编译(执行命令:tsc xxx.ts)
4. 基本类型
-
类型声明
也可以 直接使用字面量进行类型声明
let q:10; q = 10;
可以使用 | 来连接多个类型(联合类型)
let b: 'male' | 'female'; b = 'male'; b = 'female';
-
自动类型判断
类型:
-
boolean
-
number
-
string
-
数组
array
(有两种方式可以定义数组。 第一种,可以在元素类型后面接上 [ ],表示由此类型元素组成的一个数组,,第二种方式是使用数组泛型,Array<元素类型>)
-
元组
Tuple
(就是固定长度的数组) -
枚举
enum
-
Any
(表示的是任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测,不建议使用any类型),声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any(隐式的any) -
unknown
(类型安全的any) -
Void
(用来表示空,以函数为例,就表示没有返回值的函数)function fn():void{ return undefined; }
-
Null 和 Undefined
-
Never
(表示永远不会返回结果) -
Object
//{}用来指定对象中可以包含哪些属性 //语法: {属性名:属性值,属性名:属性值} //在属性名后边加上?,表示属性是可选的 let ad: {age?: number, name: string} let dc: object; dc = {}; //[propName: string]:any 表示任意类型的属性 let cc: {name: string, [propName: string]:any}; cc = {name: '猪八戒', age: 18, gender: '男'} //设置函数结构的类型声明 //语法:(形参:类型,形参:类型) => 返回值 let ar: (a: number, b: number) => number; ar = function(n1, n2): number { return n1 + n2; }
-
类型断言 as 或者 <>
(可以用来告诉解析器变量的实际类型) -
类型的别名
5.编译选项
-
自动编译单个文件
tsc ts文件名 -w
-
所有文件自动编译,需要新增tsconfig.json文件,然后输入
tsc
就能编译出所有js文件,输入tsc -w
就能监视所有ts文件 -
tsconfig.json文件是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译
-
include用来指定哪些ts文件需要被编译
//**表示任意目录 * 表示任意文件 "include": [ "./src/**/*" ] //exlude表示不需要被编译的文件目录 "exlude": [ "./src/hello/**/*" ]
-
compilerOptions 编译器的选项
6. 使用webpack打包ts代码
-
npm init -y
项目初始化 生成pakage.json
文件 -
安装四个依赖
npm i -D webpack webpack-cli typescript ts-loader
-
在生成的package.json文件中新增
-
创建tsconfig.json文件
{ "compilerOptions": { "module": "ES2015", "target": "ES2015", "strict": true } }
-
创建webpack.config.js文件
//引入一个包 const path = require('path'); module.exports = { //指定入口文件 entry: "./src/index.ts", //指定打包文件所在目录 output: { //指定打包文件的目录 path: path.resolve(__dirname, 'dist'), //打包后文件的文件 filename: "bundle.js" }, //指定webpack打包时要使用模块 module: { //指定要加载的规则 rules: [ { //test指定的规则生效的文件 test: /\.ts$/, //要使用的loader use: 'ts-loader', //要排除的文件 exclude: /node-modules/ } ] } }
-
执行
npm run build
进行打包 -
安装babel解决兼容性问题
pm i -D @babel/preset-env babel-loader core-js
7.面向对象
-
类
//使用class关键字来定义一个类 /** * 对象中主要包含了两个部分: * 属性 * 方法 */ class Person { //定义实例属性 name: string = '孙悟空'; //在属性前使用static关键字可以定义类属性(静态属性) static age: number = 18; } const pre = new Person(); console.log(pre); console.log(pre.name, Person.age);
-
构造函数和this(ts实例方法中this就是调用方法的对象)
class Dog{ name: string; age: number; //constructor被称为构造函数 //构造函数会在对象创建时调用 constructor(name: string, age: number) { //在实例方法中,this就表示当前的实例 //在构造函数中当前对象就是当前新建的那个对象 //可以通过this向新建的对象中添加属性 this.name = name; this.age = age; } bark() { // alert('wangwang') //在方法中可以通过this来表示当前调用方法的对象 console.log(this); } } const dog = new Dog('小黑', 5); const dog2 = new Dog('小白', 15); // console.log(dog); // console.log(dog2); dog2.bark(); //this就是'小黑'