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就是'小黑'