TypeScript 是什么
TypeScript
是一款用来检查 Javascript 数据类型的工具语言。
TypeScript 有什么用
帮助开发者在代码编译成 JavaScript 前检测数据类型是否正确,如果不正确则给出相应的 error
提示,有助于开发效率和代码的稳定性。
tsconfig.json 配置文件
每个项目在使用 Typescript
时,根目录都会生成一个 tsconfig.json
文件,这个文件可以用来告诉 TypeScript
在编译器期间时使用什么样的规则去进行检测,下面是默认配置:
{
"compilerOptions": {
"target": "es2017", // 编译后的js代码将采用2017标准版的语法
"module": "commonjs", // 使用commonjs模块规范来 import 或 export 模块
"strictNullChecks": true // 变量赋空值时,要么是`undefined`或`null`
},
"include": ["**/*.ts"]// 将所有含有*.ts后缀的文件进行检查编译
}
接下来我们开始看看最常用的语法有哪些吧
定义数组
// 普通数组
let bestNumber: number[] = [] // 一维数组
let bestNumbers: number[][] = [] // 二维数组
let bestNumbers: number[][][] = [] // 三维数组
// 使用扩展符形成数组
function getArs(...ars:string) {
console.log(arr) }
getArs(['hello', 'world'])
定义元组
元组也属于数组,不同的是它可以定义多种数据类型
,其它跟数组差不多,但也有一些额外要注意的,看例子。
// 正常使用
// 一维元组
let mixup: [string, number, string, boolean, object] = ['hello', 1, 'world', true, {
}]
// 二维元祖
let mixup: [string, boolean, number][] = [['hello', true, 1]]
// 三维元组
let mixup: [string, boolean, number][][] = [[['hello', true, 1]]]
// 注意1:不能将数组赋给元组,哪怕定义的类型是相同的都会报错。
let mixup: [string, string] = []
let arr: string[] = ['Hello', 'world!']
mixup = arr // error
// 注意2:元组的长度是固定的,不能进行 push或 [index] 赋值。
let mixup: [string, string] = ['Hello', 'world!']
mixup[2] = 'Welcome' // error
mixup.puah('Welcome'] // error
定义 enum
enum
可以是 number/string
类型,默认是 number
类型。
// 1. number 类型:默认从 0 开始,即 South = 0, North = 1, East = 2, West = 3
enum Direction{
South,
North,
East,
West
}
console.log(Direction.South == 0 ) // true
let myDirection: Direction = Direction.South // 0
// 官方建议 enum 使用 string 类型,因为它更严格一些,而 number 类型会有一些 ‘特殊‘ 比如
myDirection = 100 // 赋值成功,并不会报 type error
// 2. string 类型
enum DirectionString {
South = "SOUTH",
North = "NORTH",
East = "EAST",
West = "WEST"
}
let myDirectionString: DirectionString
myDirectionString = DirectionString.South // SOUTH
myDirectionString = "Hello" // 赋值失败,报 type error
myDirectionString = DirectionString.NNN // 报 value error
定义对象
// 1. 普通对象
let person: {
name: string, age: number, sex: boolean} = {
name: 'Jack', age: 100, sex: false}
// 2. 函数参数是对象
function person(personObject: {
name: string, age: number, sex: boolean}) {
console.log(personObject.name + '=====' + personObject.age + '=====' + personObject.sex)
}
person({
name: 'Tony', age: 10, sex: false})
// 3. 数组嵌套对象
let arrForObject: {
name: string, age: number, sex: boolean}[] = [
{
name: 'Tony',
age: 12,
sex: false
}
]
定义 type (别名)
使用 type
可以节省重复定义数据类型,个人觉得跟声明变量一样,而 type
就像 let / const
的关键字。
// type 定义对象
// 注:type 是对象时要注意用分号 `;` 而不是逗号 `,`
type Person = {
name: string;
age: number;
}
// 将 Person 当做变量传递进去
let aCompony: {
boss: Person,
empoyess: Person[],
empoyessOfTheMonth: Person
}
// 此时 aCompony 相当于这样
let aCompony: {
boss: {
name: String, age: number},
empoyess: {
name: String, age: number}[],
empoyessOfTheMonth: {
name: String, age: number}
}
// type 定义函数、参数、以及返回结果
type OperatorFunction = (a: number, b: number) => number
// 1. OperatorFunction 可以直接使用
function OperatorFunction(num1, num2) {
return num1 + numb2
}
OperatorFunction(1, 2) // 3
OperatorFunction(1, NaN) // 报 type error
// 2. OperatorFunction 作为 count 的参数类型(回调函数)
function MathOperation(count: OperatorFunction) {
return count(100, 200)
}
function add(a, b) {
return a + b
}
function wrongAdd(a, b) {
return a + b + ''
}
MathOperation(add)(1, 2) // 3
MathOperation(wrongAdd)(1, NaN) // 报 type error
定义泛型
泛型指的是传递进去什么类型,里面就是什么类型,跟 type
类似,不同的是它需要将变量放到 <XXX>
里面。
/****** 定义对象泛型 *******/
type Family<T> = {
father: T,
children: T[]
}
// 使用方式1:传递原始类型 string
let createFamily: Family<string> = {
father: 'Tony',
children: ['Jack', 'Tom', 'John']
}
// 使用方式2:传递自定义类型 Person
type Person = {
name: string, age: number}
let createFamily: Famliy<Person> = {
father: {
name: 'Tony', age: 1000},
children: [
{
name: 'Jack', age: 200},
{
name: 'Jiff', age: 300}
]
}
/****** 定义函数泛型 *******/
function getArrayData<T>(value: T, n: number): T[] {
return Array(n).fill(value)
}
let strArr: string[] = getArrayData<string>('Hello', 10)
// 输出 ['Hello', 'Hello', 'Hello', ...] 10次
let Person: {
name: string, age: number}[] = getArrayData<{
name: string, age: number}>({
name: 'Tony', age: 20}, 10)
// 输出 [{name: 'Tony', age: 20}, {name: 'Tony', age: 20}, ...] 10次
定义接口 (interface)
定义 interface
也跟定义 type
一样,只不过 interface
是专门用来定义对象
的。
// 正常定义 interface
// 注:interface 定义对象时要注意用逗号 `,` 而不是分号 `;` 跟 type 相反的
interface UserNameOptions{
firstName: string,
lastName: string,
username: string
}
// 问号表示该 key 是可选项
interface UserNameOptions{
firstName?: string,
lastName?: string,
username: string
}
// 将 PersonInfo 作为变量传递给另一个 interface Person 里的 info
interface PersonInfo {
name: string,
age: number
}
interface Person{
info: PersonInfo
}
// interface 还可以继承 interface
interface Me extends Person {
weight: string | number
}
// 类使用 interface 时得使用 implements 关键字
class Too implements Me {
}
管道符 |
|
表示或者,其原理跟 JS 中的 ||
计算表达含义一样。
// 使用方式1,接收多个可选数据类型
type Mycolor = {
}
let obj: {
name: string, age: string | number, color: Mycolor | string}
obj = {
name: 'Tony', age: 10, color: []}
obj = {
name: 'Tony', age: '10', color: 'ornage'}
// 使用方式2,接收多个可选基本值
type Color = 'red' | 'ornage' | 'blue'
function getColor(color: Color) {
}
getColor('orange') // 正常
getColor('yellow') // error
好了,笔者常用到的也就是这些,欢迎有问题的小伙伴到下方留言。