TypeScript 最常用的一些基本语法

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

好了，笔者常用到的也就是这些，欢迎有问题的小伙伴到下方留言。