一、创建TS
1.介绍
ts是以JavaScript为基础构建的语言
2. 安装
npm i -g typescript
tsc //测试是否安装成功
3.使用
1.创建ts文件
2.在命令行执行 tsc 文件名 //编译ts文件成js文件
二、语法介绍
1.基本数据
1.1类型声明
类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量(参数、形参)的类型
指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
1.2使用
定义
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{}
使用
let a: number //声明一个变量a,同时指定类型number
a = 1
let b:string = '123'//声明一个变量b并直接赋值
let b = '123' //变量声明和赋值同时进行,可以省略类型声明
function fun1(cc: number, dd: number): number {
//cc: number 参数1:数值型
//dd: number 参数2:数值型
//第三个number 表示返回值为数值型
return cc + dd
}
const res = fun1(123, 234)
console.log(res)
1.3参数类型
类型 | 描述 |
---|---|
number | 任意数字 |
string | 任意字符串 |
boolean | 布尔值true或false |
字面量 | 限制变量的值就是该字面量的值 |
any | 任意类型 |
unknown | 类型安全的any |
void | 没有值(或undefined) |
never | 不能是任何值 |
object | 任意的JS对象 |
array | 任意JS数组 |
tuple | 元素,TS新增类型,固定长度数组 |
enum | 枚举,TS中新增类型 |
1.3.1使用
number
let decimal: number = 6;
boolean
let isDone: boolean = false;
string
let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let sentence: string = `Hello, my name is ${fullName}.
字面量
// 只能赋值10
let a1: 10
a1 = 10
// b1只能赋值'max'或'min'
let b1: 'max' | 'min'
b1 = 'max'
b1 = 'min'
// c1只能赋值给string或number的值
let c1: string | number
c1 = 1
c1 = '123'
any
// any 表示任意类型的值
// 使用TS时,不建议使用any类型
// 声明变量不指定类型,则TS解析器会自动判断类型为any(隐式any)
// 类型为any的变量赋值给其他类型时不会报错
let aa: any
aa = 1
aa = true
aa = 'dd'
unknown
// unknown 表示未知的值
// 类型为unknown的变量不能直接赋值给其他类型时,否则会报错
let aa: unknown
aa = 1
aa = true
//如果想给其他类型赋值就可以先判断在赋值,就不会报错
let bb: string
if (typeof aa === 'string') {
bb = aa
}
//类型断言可以解决
bb = aa as string
bb = <string>aa
void
//void 用来表示空,函数中设置就表示没有返回值
function aa(): void {
console.log(123)
}
aa()
never
// never 表示永远不会返回结果
function aa(): never {
throw new Error('报错了')
}
object
//object 表示一个js对象
let obj: object = {};
// {}用来指定对象中可以包含哪些属性
// 语法 { 属性名:类型,属性名?:类型,[xxx: string]: any}
// 属性:?表示可选属性 [xxx: string]: any 表示可以有任意属性
let b1: { name: string; age?: number }
b1 = { name: '123', age: 1 }
let c1: { name: string; [aa: string]: any }
c1 = {
name: '123',
aa: '123',
bb: 123
}
// 设置函数结构的类型声明
// 语法 (参数: 类型, 参数: 类型) => 类型
let d1: (xx: number, xx1: number) => number
d1 = function (n1: number, n2: number): number {
return n1 + n2
}
array
let aa: string[] //表示字符串数组
aa = ['123', '234']
let bb: Array<number> //表示数值数组
bb = [1, 2, 3, 4]
tuple
let aa: [string, string] //表示只存在两个值都是string类型
aa = ['123', '234']
enum
enum Gender {
Male = 0,
Female = 1
}
let aa: { name: string; gender: Gender; na: Gender }
aa = {
name: 'cc',
gender: Gender.Male,
na: 1
}
1.4类型断言
bb = aa as string
bb = <string>aa介绍
有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型
定义
变量 as 类型
<类型> 变量
使用
let aa: unknown = 'ccc'
let bb: string
bb = aa as string
bb = <string>aa
1.5. |和& 使用
// | 表示满足其中的一个
let cc: string | number
cc = 11
cc = '22'
// & 表示同时满足
let aa: string & number
let bb: { name: string } & { age: number }
bb = {
name: 'aa',
age: 123
}
1.6. 类型别名使用
type myType = string
let m: myType
m = '123'
type myType1 = 1 | 2 | 3 | 4 | 5
let aa: myType1
let bb: myType1
aa = 1
bb = 2
2.编辑选项
2.1自动编译文件
2.1.1介绍
编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
2.1.2使用
在命令行
tsc xxx.ts -w
2.2自动编译整个项目
1.在根目录创建一个tsconfig.json文件
2.在命令行执行
tsc 或 tsc -w
2.2.1tsconfig.json配置
{
//指定哪些ts文件需要被编译
// ** 表示任意目录
// * 表示任意文件
"include": [
"./src/**/*" //表示所有src目录下的文件都会被编译
],
// 不需要编译的文件
// 默认值[“node_modules”, “bower_components”, “jspm_packages”]
"exclude": [
"./src/hello/**/*" //表示所有src目录下hello目录下的都不会被编译
],
// 继承的配置文件
"extends": "./configs/base", //当前配置文件中会自动包含config目录下base.json中的所有配置信息
// 指定被编译文件的列表,只有需要编译的文件少时才会用到
"files": ["core.ts", "sys.ts"], //列表中的文件都会被TS编译器所编译
// compilerOptions 编译器的选项
"compilerOptions": {
// target 指定ts被编译的版本(ES3(默认)、ES5、ES6、ES7、ESNext)
"target": "ES6",
// module 指定要使用的模块化的授权
// 值:CommonJS、UMD、AMD、System、ES2020、ESNext、None
"module": "ES6",
// lib用来指定项目中使用的库,默认情况下不用设置
// 值: 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'.
"lib": [],
// outDir表示编译后的文件存在位置
"outDir": "./dist",
// outFile 表示代码合并成一个文件
// 设置完后所有的全局作用域中的代码都会合并到一个文件中
// outFile只支持module为amd和system
"outFile": "./dist/app.js"
// 是否对js文件进行编译,默认为false
"allowJs": false,
// 是否检查js代码是否符合语法的规范,默认为false
"checkJs": false,
// 是否移除注释
"removeComments": false,
// 不生成编译后文件 true不编译 false 编译
"noEmit": false,
// 当存在错误时不编译文件 true 启用 false 不启用
"noEmitOnError": false,
// 用来设置编译后的文件是否设置严格模式,true 启用 false 不启用
"alwaysStrict": false,
// 严格模式的总开关
"strict": false,
// 不允许存在隐式的any true 启用 false 不启用
"noImplicitAny": false,
// 不允许不明确类型的this true 启用 false 不启用
"noImplicitThis": false,
// 严格检查空值 true 启用 false 不启用
"strictNullChecks": false,
// 严格检查bind、call和apply的参数列表
"strictBindCallApply": false,
// 严格检查函数的类型
"strictFunctionTypes": false,
// 严格检查属性是否初始化
"strictPropertyInitialization": false,
// 检查switch语句包含正确的break
"noFallthroughCasesInSwitch": false,
// 检查函数没有隐式的返回值
"noImplicitReturns": false,
// 检查未使用的局部变量
"noUnusedLocals": false,
// 检查未使用的参数
"noUnusedParameters": false,
// 检查不可达代码 true忽略不可达代码 false不可达代码将引起错误
"allowUnreachableCode": false
}
}
}