TypeScript-初识

引言

TypeScript（静态类检查器）提供了 JavaScript 的所有功能，并且在这些功能之上添加了一层： TypeScript 的类型系统。TypeScript 会在执行前检查程序是否有错误，并根据值的种类进行检查。

一、定义属性

const str:string = '1111'
const a = 1
// let arr: Array<any> = [] // 定义数组
let arr = <any>[] // 类型断言 同等与 下面的 as
// let arr = [] as any // 类型断言 

// 字面类型 指定值
let x : 1 | 2 = 1

二、基础function用法

// = 默认值
const fn = (params:{x:number,y:number} = {x:1,y:2}):boolean => params.x > params.y
console.log(fn({x:66,y:23})) // true
// 如果有默认值 可以放 undefined 占位
console.log(fn()) // false
// 取函数剩余所有参数
function push (arr: any[], ...items: any[]) {
    items.forEach(item => {
        arr.push(item)
    })
}
push(arr, 1, '2', 3)

三、联合定义类型 type 与 interface

1、type

/***
 * 1. type可以定义 基本类型的别名，如 type myString = string
 * 2. type可以通过 typeof 操作符来定义，如 type myType = typeof str
 * 3. type可以申明 联合类型，如 type unionType = myType1 | myType2
 * 4. type继承是 & 
***/
type ID = string | number   // 可以用 typeOf 来判断 进行对应的操作
let id:ID
id = 111 // ok
// id= {} // error
type typeParams = {
    name:string,
    age?:number // 问好可选参数
}
// type 继承
type typeParams2 = typeParams & {
    age:number
}
let params1:typeParams = {
    name:'1111'
}
let params2:typeParams2 = {
    name:'1111',
    age:2222
}

2、Interfaces

/*
    1、interface可以合并声明，type不行
    2、interface extends 继承
*/
interface personnelInfo{
    name:string, 
    readonly sex:string, // readonly 只读
}
interface personnelInfo{
    age:number,
    resData?: personnelInfo[]; // 定义数组内容
}
interface bb extends personnelInfo{
    getInfo():object, // 定义方法
    setName:(name:string) => void,
    [propName: string]:any;  // 代表可以新增任意属性
}
const obj:bb = {
    name:'1111',
    sex:'男',
    resData:[
      {
        name:'1111',
        age:2222,
        sex:'男'
      }
    ],
    age:99,
    getInfo:function(){
       return {name:this.name,age:this.age}
    },
    setName:function(name){
        this.name = name
    },
    test:'1', // 任意属性
    test2:222  // 任意属性
}

const arr2:Array<bb> = []

interface numberIndex {
    [x: number]: string
}
// 相当于声明了一个字符串类型的数组
let chars: numberIndex = ['A', 'B']

四、类型断言 as

// unknown 和 any 都是自定义类型 两者区别
/*
  unknown 更加严格，在操作之前会进行某种检查,不允许访问属性，不允许赋值给其他有明确类型的变量，如果用as断言了，需要断言为相对应的类型
  any 不会检测,可以随意赋值，any级别最高
  例如
    let a:unknown = 1
    a.msg // error 
    a.split(',') // error 
    let b:any = 1
    b.any // ok
*/
let num2:any = 1;
let str3 = num2 as string // 类型转换
num2 = '1'; num2=2
// str3=111 异常
str3='111'

let num1:number = 1;
let str2 = num1 as unknown as string // 类型转换
// str2 = 222 异常
str2 = '222'

const foo = <personnelInfo>{ // 这样的类型断言不会检查除错误
    name:'1111',
    // sex:'男',
    // age:99,
}

console.log(num1,num2,str2,str3)

五、unknown 和 any的区别

unknown 更加严格，在操作之前会进行某种检查,不允许访问属性，不允许赋值给其他有明确类型的变量，如果用as断言了，需要断言为相对应的类型。

any 不会检测,可以随意赋值，any级别最高

 // 例如
let a:unknown = 1
a.msg // error 
a.split(',') // error 
let b:any = 1
b.any // ok

六、枚举

/* 枚举常用在字面化表达一个变量的不同类型值，比如：性别。只能使用枚举里面的值 */
enum Sex{
    nan='男',
    nv ='女'
}
let cc:Sex | null = Sex.nan
// cc = '111' // 不能将类型“"111"”分配给类型“Sex” error
cc = Sex.nv
// 如果没有赋值 默认值为0
enum Direction {
    Up,
    Down,
    Left,
    Right
}
let direction:Direction =Direction.Up
console.log(direction) // 0

猜你喜欢