【TS】基础(一)

TS(TypeScript)

• TS是JS类型的超集（在JavaScript的基础上添加静态类型定义）。
• TS主要提供了类型系统和对TS新标准的支持。
• 在运行TS文件时，会被编译成JS文件

TS的特性

• 始于JS，归于JS：TS始于IS的语法和语义，最终会被编译成JS运行
• 强大的工具构建大型应用程序：静态检查，代码重构
• 先进的JS：提供新的和不断发展的JS特性

TS的优缺点

优点

• 提供静态检查
• 可读性和可维护性更好
• 兼容JS
• 更好的开发工具

缺点

• 开发成本高，首次开发需要更长的时间编写代码
• 增大项目体积，比JS文件多了类型注解

TS和JS的区别

TS	JS
强类型语言	弱类型语言
静态检查	解释型语言
支持模块、泛型、接口	不支持模块、泛型、接口
需要编译成JS文件运行	直接运行

TS常用类型

原始类型

• number
• string
• boolean
• undefined
• null
• symbol

// 原始类型
let num: number = 22;
let str: string = 'Dliraba';
let bool: boolean = true;
let empty: null = null;
let un: undefined = undefined;
let sym: Symbol = Symbol()

TS相比JS的写法区别在，变量名后面需要写类型注解，例如’:number’

数组

数组的类型注解有两种写法：

• string[]:数组中的元素都是字符串类型
• Array:数组中的元素都是数字类型

// 数组
let arr: number[] = [1, 2, 3];
let arrStr: Array<string> = ['ay', 'rb', 'dl']

类型别名 type

使用type可以给指定类型定义一个名称

//类型别名 type
type Arr=number[]
let arrA:Arr=[1,22222,333333,2222222222,33333333333333333333333]

联合类型 ‘|’

将类型使用连接符"|"连接起来，
变量可以是给定类型的任意一种

//联合类型
//数组的元素可以是数字、字符串或者由数字组成的数组的任意一种
type Type1 = number | string | number[]
let arrType: Type1[] = [1, 2, 3, 'wsd',[1,8,2]]

函数

函数需要给参数和返回值写类型注解
如果函数没有返回值，则写":void"

//函数  参数和返回值类型注解
function fn(val: string): string {
    return val
}
//函数没有返回值写void
function fn(val: string): void{
    val++
}

对象

需要写出对象中每个参数的类型，且参数名需要一一对应

//对象
let obj3: {name:string,age:number,sex:string} = {
    name: 'Ashely',
    age: 30,
    sex: 'women'
}

接口 interface

声明对象类型并定义一个别名
属性名后面添加’?'表示参数可选

interface Person {
    name: string,//必写参数，使用Person类型的对象中没有name会报错
    age?: number,//可选参数，对象中不写也不会报错
    sex?: string,
    id?:number
}
let obj3: Person = {
    name: 'Ashely',
    age: 30,
    sex: 'women'
}

继承 extends

interface可以使用extends继承

interface Person {
    name: string,
}
interface PersonPlus extends Person {
    phone:number
}
let obj4:PersonPlus = {
    name:'joker',//name是继承来的，不写name会报错
    phone:123123123
}

interface和type的区别

• interface只能声明对象类型
• type可以声明任意类型

类型断言

类型断言是一种将类型从一种形式转换为另一种形式的方法，‌尤其是在当你确信某个值具有某种类型，‌但TypeScript的类型检查器无法确认时。

两种写法：

• 参数 as 类型
• <类型>参数

function fn(val: any): boolean {
    return <boolean>val
}
fn(1)

谨慎使用！！！类型断言只能够欺骗TypeScript 编译器，无法避免运行时的错误，滥用类型断言可能会导致运行时错误

枚举enum

建立映射关系
字符串 = number
如果number没有指定则从0开始，后面的参数如果没有指定number则为前一个数自增1

enum Sta{
    '麻辣烫'=1,
    '拌饭',
    '板面',
    '火锅'
}
console.log(Sta[1])//打印“麻辣烫”

任意类型any

any是TS中特殊类型的一种，可以赋值任何数据类型的变量。‌当不确定变量的具体类型时，‌可以使用any类型。‌过度使用any类型可能会导致类型安全降低。