开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

🎈大家好，我是李乐一，新人初来乍到，请多多关照~
📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

什么是typescript

1. typescript是javascript类型的超集，可以编译为javascript
2. typescript是可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的
3. typescript100%支持javascript
4. typescript为构建大型应用而生，小程序也可以同样使用
5. 强大的类型系统（强类型，静态类型）
6. 丰富了class的扩展功能（接口，抽象类）
7. typescript是强类型定义语言:强制数据类型定义的语言。也就是说，一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型

typescript的基本类型

1. ‘boolean’ – 布尔类型,可以赋值true/false和Boolean()对象
2. ‘number’ --数字类型，可以赋值’2/8/10/16进制’，‘整数类型’， ‘小数类型’，‘NaN’,‘Infinity（表示无穷大）’
3. ‘string’ – 字符串类型
4. ‘数组类型’ – ‘类型[]’ /’ Array<类型>’
5. ‘元组类型’ – ‘[类型]’
6. ‘enum’ – 枚举
7. ‘any’ – 任意类型
8. ‘void’ – 空置,定义方法时候没有返回值使用
9. ‘null/undefined’ – ‘Null 和 Undefined’
10. ‘never’ – 不存在类型一般用于错误处理函数.例如’抛出异常’/‘死循环’
11. ‘object’ – ts 中是泛指非所有非原始类型
12. ‘类型断言’ – 可以理解成断定这个类型是自己断言设置的类型

typescript的使用

使用tsc 文件名编译成js文件

tsc test.ts

基本类型使用的时候，通过冒号分割，以冒号左边为变量名，右面是变量的类型

typescript的基本静态类型

const count: number = 123;
const name: string = 'sara';
let bool: boolean = true;
// null undefinde void symbol
// 普通对象类型
const Person: {
    name: string,
    age: number
} = {
    name: 'sara',
    age: 18
}
// 数组对象类型
const PersonArr: string[] = ['a', 'b', 'c']

// 类 类型
class Person { }
const person: Person = new Person() // person属于Person类

// 函数形式
const createPerson: () => string = ()=> { return 'sara' } 
// 表明函数的类型，返回值是字符串

类型注解和类型推断

// type annotation 类型注解
let count: number;
count = 18
// 事先注解数据类型
// type interface 类型推断
let countInterfase = 123;
// 自动推断数据的类型

// 如果ts能自动推断就不用声明类型、如果不能就要给他声明类型
// 自动推断数据类型
const one = 1;
const two = 2;
const three = one + two
// 此时 one two不确定数据类型 any，应该给one two添加数据类型
// function getTotal(one:number, two:number)
function getTotal(one, two) {
    return one + two
}
const total = getTotal(1, 2)
const person= {
    name: 'sara', age: 18
}

函数参数和返回类型的注解

function getTotal(one:number, two:number) :number{
    return one + two
}
const total = getTotal(1, 2)

// 函数参数的类型，对象做参数的时候，需特别注意
function sayHello() {
    console.log('hello world')
}
// 函数永远执行不完,使用never
// 添加never以后，会执行死循环之后的代码

function errorFunction():never {
    throw new Error()
    console.log('hello world')
}

function forerver():never {
    while (true) { }
    console.log('hello world')
}

function add({ o, t }:{ o: number, t: number }) {
    return o + t
}
const all = add({ o: 1, t: 0 })

数组类型

// 定义数组类型方式1
const numberArr: number[] = [1, 2, 3]
// 定义数组类型方式2
const arr:Array<number> = [1,2,3]

// 定义其他类型的数组
const stringArr: string[] = ['a', 'b', 'c']
const undefinedArr: undefined[] = [undefined, undefined]

// 混合使用的时候
const arr: (number | string)[] = [1, 'string', 2]

// type alias 类别别名
type Male= { name: string, age: number }

class Boy{
    name: string;
    age: number;
}

// 对象属性添加类型
const Person: { name: string, age: number }[] = [
    { name: "sara", age: 18 },
    { name: "leo", age: 28 },
]

// 使用类别别名方式
const Person: girl[] = [
    { name: "sara", age: 18 },
    { name: "leo", age: 28 },
]

// 使用类的方式
const Person: Boy[] = [
    { name: "sara", age: 18 },
    { name: "leo", age: 28 },
]

元组的使用和类型的约束

// 数组定义数据类型
const Person: (string | number)[] = ['sara', 'doctor', 18]

// 是元组
const Person: [string, string, number] = ['sara', 'doctor', 18]
// 定义元组后，他的值和值的类型必须一一对应
const Person: [string, string, number][] = [
    ['sara', 'doctor', 18],
    ['sara', 'doctor', 18],
    ['sara', 'doctor', 18]
]