1. TS简介
- ts是js的超集
- ts对js进行了扩展,向js引入了类型的概念,并添加了许多新的特性
- ts代码需要通过编译器编译成js
- ts有更严格语法,更强大功能。
- ts可编译成任意版本的js代码(ES56…)
- ts代码结构更加清晰,变量类型更加明确,在后期代码维护胜于js
2. TypeScript 开发环境搭建
1.下载node.js并安装
- 64位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
- 32位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
2.使用npm全局安装ts
npm i -g typescript
3.创建一个ts文件
4.使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令:tsc xxx.ts
3. 基本类型
-
类型声明
-
类型声明是TS非常重要的一个特点
-
通过类型声明可以指定TS中变量(参数、形参)的类型
-
指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
-
简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
-
语法:
-
let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... }
-
-
-
自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明
-
number
-
let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; let big: bigint = 100n;
-
-
boolean
-
let isDone: boolean = false;
-
-
string
-
let color: string = "blue"; color = 'red'; let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. I'll be ${age + 1} years old next month.`;
-
-
字面量
-
也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围
-
let color: 'red' | 'blue' | 'black'; let num: 1 | 2 | 3 | 4 | 5;
-
-
any(尽量不使用any类型)
-
let d: any = 4; d = 'hello'; d = true;
-
-
unknown
-
let notSure: unknown = 4; notSure = 'hello';
-
-
void
-
let unusable: void = undefined;
-
-
never
-
function error(message: string): never { throw new Error(message); }
-
-
object(没啥用)
-
let obj: object = {};
-
-
array
-
let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];
-
-
tuple
-
let x: [string, number]; x = ["hello", 10];
-
-
enum
-
enum Color { Red, Green, Blue, } let c: Color = Color.Green; enum Color { Red = 1, Green, Blue, } let c: Color = Color.Green; enum Color { Red = 1, Green = 2, Blue = 4, } let c: Color = Color.Green;
-
4. 编译选项
-
自动编译文件
- 编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
- 示例:
-
tsc xxx.ts -w
-
-
自动编译整个项目
- 如果直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件。
- 但是能直接使用tsc命令的前提时,要先在项目根目录下创建一个ts的配置文件 tsconfig.json
- tsconfig.json是一个JSON文件,添加配置文件后,只需只需 tsc 命令即可完成对整个项目的编译
(以下为基本配置)
{
/*
tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译
"include" 用来指定哪些ts文件需要被编译
路径:** 表示任意目录
* 表示任意文件
"exclude" 不需要被编译的文件目录
默认值:["node_modules", "bower_components", "jspm_packages"]
*/
"include": ["./src/**/*"],
// "exclude": [
// "./src/hello/**/*"
// ]
/*
compilerOptions 编译器的选项 编译选项是配置文件中非常重要也比较复杂的配置选项
*/
"compilerOptions": {
// target 用来指定ts被编译为的ES的版本
"target": "es2015",
// module 指定要使用的模块化的规范
"module": "es2015",
// lib指定代码运行时所包含的库(宿主环境)
// "lib": ["es6", "dom"]
// outDir 用来指定编译后文件所在的目录
"outDir": "./dist",
// 将代码合并为一个文件
// 设置outFile后,所有的全局作用域中的代码会合并到同一个文件中
//"outFile": "./dist/app.js"
// 是否对js文件进行编译,默认是false
// "allowJs": true,
// 是否检查js代码是否符合语法规范,默认是false
// "checkJs": true,
// 是否移除注释
"removeComments": true,
// 不生成编译后的文件
"noEmit": false,
// 当有错误时不生成编译后的文件
"noEmitOnError": true,
// 所有严格检查的总开关
"strict": true,
// 用来设置编译后的文件是否使用严格模式,默认false
"alwaysStrict": true,
// 不允许隐式的any类型
"noImplicitAny": true,
// 不允许不明确类型的this
"noImplicitThis": true,
// 严格的检查空值
"strictNullChecks": true
}
}