简单的TypeScript入门小教程TypeScript是微软开发的开源编程语言，Type + JavaScript（t

TypeScript是微软开发的开源编程语言，Type + JavaScript（type是类型 => 在 JS 基础之上，为 JS 添加了类型支持），简称：TS

什么情况用TS而不是js

以下是一些建议

你做的是一个大型的项目？
是否是一个团队开发模式？
是否在编写通用的代码库？

TypeScript编写的代码是无法直接在js引擎（浏览器/Nodejs）中运行的，最终还需要经过编译成js代码才可以正常运行。

安装

一. npm安装:

全局安装 typescript 包（编译引擎）-> 注册 tsc
命令 npm install -g typescript
新增 hello.ts 文件，执行 tsc hello.ts 命令生成hello.js文件
执行 node hello.js 运行js文件查看效果

二. 利用已集成的脚手架,例如create-vue来安装

类型注解

概念：类型注解指的是给变量添加类型约束，它的好处是：

使变量只能被赋值为约定好的类型
编写代码的过程中可以有相关的类型提示

例如: let a:string = 'asd',如果这时让 a=1,则代码报错,提示a必须是string类型

简单类型如何进行类型注解

简单类型的注解完全按照 JS的类型（全小写的格式）来书写即可

let a:string = 'asd'
let name:string = '小花'
let age:number = 15
......

类型推论

某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型, 换句话说：由于类型推论的存在，有些场合下的类型注解可以省略不写

发生类型推论的 2 种常见场景:

声明变量并初始化时
决定函数返回值时

// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

数组类型注解

作用

不仅可以限制变量类型为数组而且可以限制数组成员的类型
编码时不仅可以提示数组的属性和方法而且可以提示成员的属性和方法

语法

//常用语法
//类型为数组,且元素必须是number类型
const arr:number[] = [1, 2, 3]
//使用 | 表示可以写多种类型, | 称之为联合类型
const arr1:(number | string)[] = [1, 'a', '2']

//泛型函数语法
const arr2:Array<number | string> = [1, 'a']

类型别名-type

顾名思义,给需要重复使用的类型注解取个名字

//定义,首字母大写
type arr = (string | number)[]

//使用
const arr:arr = ['1', 2]

元组类型

当一个数组的长度和元素顺序且类型固定的情况下,我们可以使用元组

type Arr = [string, number, boolean, string]
const arr: Arr = ['a', 1, true, 'd']
const arr1: Arr = [1, 1, 1, 1]

要求第一个值为string类型第二个值无报错
要求第三个值为boolean类型第四个就不看了,能猜到是要求类型为string类型

函数类型注解

基本语法

// 1.使用别名,格式为 'type 别名 = (形参:形参类型...) => 返回值类型
// 注意,无返回值时,返回值类型为void,只有明确返回undefined,才可以写undefined
type fn = () => undefined
const returnUndefined:fn = () => {
    return undefined
}

// 2.直接注解
const render = ():void => {}
const getMsg = (num:number): number => {
    return num * 2
}

// 3.形参默认值
const getMsg = (num:number = 123): number => {
    return num * 2
}

对象类型注解

对象类型可以使用接口 interface来定义

// 接口也是由键值对构成的,键为对象的属性名,值为该属性的值的数据类型
interface Humen {
  name: string
  age: number
}

可以看到,如果对象和接口定义的不同就会报错,图为缺少属性name和age:

想要让某些值为可选的,可以使用?来设置

interface Humen {
  name?: string
  age?: number
}

可以看到没有报错了

断言

有时候,我们希望某个不属于该类型的值不会被判定为错误,就可以使用断言,例如初始对象数据和拿到数据的对象的属性不同(初始一般为空对象)

// 这里没写类型,所以被ts自动推断为'{}'类型
const foo = {};
foo.bar = 123;       // Error: 'bar' 属性不存在于 ‘{}’
foo.bas = 'hello';   // Error: 'bas' 属性不存在于 '{}'

// 这里定义一个类型
interface Foo {
  bar: number;
  bas: string;
}
// 我们断言,这里的{}就是Foo类型
const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

非空断言- `!`

让ts认为!前的对象必不为空

索引签名

我们知道,对象调用时,属性名可以是变量,并且需要通过[]来调用,在ts里,我们也可以通过断言设置这里存有属性名的变量的类型

const a = {
    name: '张三',
    age: 15
}
const A = {
    toString() {
        return 'name'
    }
}
// 通过断言来设置[]内的类型
console.log(a[b.toString() as 'name' | 'age'])

枚举

使用关键字enum定义当我们给一组数值赋予名字,就可以使用枚举,例如后端要求传一个type属性,值为1时,代表a类型,值为2时,代表b类型,值为3时,代表c类型

enum Type = {
    a = 1
    b = 2
    c = 3
}

// 使用
function respond(recipient: string, message: Type): void { // ... }
console.log(Type.a)

简单的TypeScript入门小教程