TypeScript基础

TypeScript基础

01-基本数据类型

// js 会自动推断类型为 number
let a = 100

// 可以直接使用 node 来执行 ts 文件，如果不行可以安装一个 ts-node 模块

// 不能将一个字符串类型的值赋给 number 类型
// a = '200'

// 定义 一个变量 b,指定 b 的数据类型是 number
let b: number = 10

// 定义变量类型时可以大写可以小写
let c: String = '你好'

let d: boolean = true

// ts 发现类型错误时，编辑器先会给你报错，当我们执行 ts-node 文件的时候会被中断后续代码
// d = '你好'
// 在项目中一个类型错误不会影响整个项目的执行

console.log(d);

// 如何给对象定义类型
let e: object = {
    a: 1,
    b: 2
}

console.log(e);

02-接口

// 接口是用来给对象及内部属性定义类型的方法

let obj = {
    a: 1,
    b: 2
}

// 对象写法，不管其内部有什么属性，这些属性是什么类型都不做任何验证。不专业
let obj1: object = {
    a: 1,
    b: 2
}

// 正常定义对象类型，如果对象中的属性特别多
let obj2: { a: number; b: number; } = {
    a: 1,
    b: 2
}

// 接口的写法，内部是用来说明该对象的每个字段的数据类型，关键字是 interface
// 多个属性之间可以使用 , 或者 ; 或者不写来进行分割，如果你不知道或者记不清
// 该怎么写的时候，那就干脆不写.
// 如果有些属性是不确定有还是没有的，我们可以加一个 ? 设置为可选属性
interface iObj {
    a: number
    b: number
    c?: number
}

// 正规定义对象类型
let obj3: iObj = {
    a: 1,
    b: 2
}

// 接口： 接口就是为对象内部及属性定义类型用的
// 接口是为 对象 的数据类型而设计的一种类型注解的方式

// 如果是一个数组那么我们又该如何添加类型呢
let list = [1, 2, 3, 4, 5, '看手相']

03-数组

const list = [1, 2, 3, 4, 5]
// 定义一个数组类型的数组，该数组中只能放数字
const list1: number[] = [1, 2, 3, 4, 5]

// 泛型写法
const list2: Array<number> = [1, 2, 3, 4, 5]


// 数组中定义多类型数据
const list3: (string | number)[] = [1, 2, 3, 4, 5, '字符串']
const list4: Array<number | string | boolean> = [1, 2, 3, 4, 5, '字符串',true]


const list5: { name: string, age: number }[] = [
    {
        name: '张三',
        age: 20
    },
    {
        name: '李四',
        age: 25
    },
    {
        name: '王五',
        age: 22
    }
]

interface iObj {
    name: string
    age: number
    sex?: boolean
}


const list6: iObj[] = [
    {
        name: '张三',
        age: 20,
    },
    {
        name: '李四',
        age: 25
    },
    {
        name: '王五',
        age: 22
    }
]


const list7: Array<iObj> = [
    {
        name: '张三',
        age: 20,
    },
    {
        name: '李四',
        age: 25
    },
    {
        name: '王五',
        age: 22
    }
]

04-type

let direction = 'up' // down   left    right


// 设置固定值中的一个
type tDir = 'up' | 'down' | 'left' | 'right'

// 设置值的时候只能为我们定义值的其中一个
let d1: tDir = 'down'
d1 = 'left'


// type 和 interface 类似，最大的区别就是 = 
// 建议给对象设置类型的时候使用 interface
// 如果需要使用一个或者多个固定值的时候可以使用 type
type tObj = {
    name: string
    age: number
}

const obj: tObj = {
    name: '你好',
    age: 20
}

05-函数

// 定义函数是可以有参数也可以有多个参数，可以有返回值也可以没有返回值
function a() {
    console.log(1);
}

// 定义一个无参数无返回值的函数
// :void 表示该函数没有返回值
// :冒号后面的是返回值类型
function fn1(): void {
    console.log(1);
}


// 顶一个返回值是 string 的函数
function fn2(): string {
    console.log(1);

    return '11'
}

// 定义返回值是一个对象
function fn3(): { name: string; age: number } {
    console.log(1);

    return {
        name: '高举',
        age: 20
    }
}


interface iObj {
    name: string;
    age: number
}
function fn4(): iObj {
    return {
        name: '高举',
        age: 20
    }
}


// 定义一个返回值是固定的函数
type tDir = '东' | '南' | '西' | '北'
function fn5(): tDir {
    return '北'
}


function fn6(): number[] {
    return [1, 2, 3, 4]
}
function fn7(): Array<number> {
    return [1, 2, 3, 4]
}


// 带参数的函数定义
// any: 表示任意类型,在不确定或者不知道是什么类型时，可以设置成 any
function fn8(a: any, b: number): void {
    console.log(a, b);
}

// b?: number 设置为可选参数
function fn9(a: any, b?: number): void {
    console.log(a, b);
}

// b: number = 10 带有默认值且有返回值的函数
function fn10(a: any, b: number = 10): number {
    console.log(a, b);

    return a + b
}

// 冒号前面的是变量名，冒号后面的是变量的类型 () => void
// 等号后面的是赋值的内容
const fn11: () => void = function (): void { }


const fn12: () => number = function (): number {
    return 1
}


const fn13: (a: number) => number = function (a: number): number {
    return 1
}

interface iObj {
    name: string
    age: number
}
const fn14: (a: number) => iObj = function (a: number): iObj {
    return {
        name: '高举',
        age: 18
    }
}

const fn15: (a: iObj) => iObj = function (a: iObj): iObj {
    return {
        name: '高举',
        age: 18
    }
}

06-接口合并

interface iAdmin {
    adminname: string,
    token: string
}


// ts 中可以将两个同名的 interface 自动合并，合并需要注意如果遇到相同
// 属性名，那么其类型一定要保持一致，或者直接不要二次定义
interface iAdmin {
    // token: number
    psw: string
}


const admin: iAdmin = {
    adminname: '',
    token: '',
    psw: ''
}

07-泛型

// function cerateArr(length: number, value: any): Array<any> {

//     let res: any[] = []

//     for (let i = 0; i < length; i++) {
//         res.push(value)
//     }

//     return res
// }

// const arr: any[] =  cerateArr(10, 'A')


// 泛型 
// T 变量理解为一个可变的类型，类型取决于调用时传递的是什么类型
function cerateArr<T>(length: number, value: T): Array<T> {

    let res: T[] = []

    for (let i = 0; i < length; i++) {
        res.push(value)
    }

    return res
}

const arr: string[] = cerateArr<string>(5, 'A')
const arr2: number[] = cerateArr<number>(5, 6)


// 数组
let list = [1, '好好努力吧，别考试就你一个人不过，情人节就你一个人过']
let list1: Array<number | string> = [1, '好好努力吧，别考试就你一个人不过，情人节就你一个人过']
let list2: (number | string)[] = [1, '好好努力吧，别考试就你一个人不过，情人节就你一个人过']

// 元组: 明确已知元素的个数以及每个元素的数据的时候使用 元组
let list3: [number, string] = [1, '你好']

// 只能数组两个内容
// let list4: [number, string] = [1, '你好', 1]

08-枚举

// 定义一个枚举
// enum eDir {
//     Up = 'up',
//     Down = 'down',
//     Right = 'right',
//     Left = 'left'
// }

// const left: eDir = eDir.Left

// console.log(left);

// enum 枚举是对 JavaScript 标准数据类型的一个补充，使用枚举类型
// 可以为一组值赋予友好的名称

enum eState {
    a = 10000,
    b,
    c,
    d,
    e
}

if (10001 == eState.b) {
    console.log('登录成功');
}