TypeScript入门(上) | 青训营笔记

QinShiwen
108 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的的第10天。

为什么是TypeScript？

JavaScriptTypeScript
弱类型语言弱类型语言
动态类型静态语言

普及

  • 弱类型语言：在处理数字和字符串间的操作时会自动进行类型转换。如：
a = '1'
console.log(a+1)  //2
  • 动态类型特征：只有在执行的时候才回去做检验。
  • 静态类型特征：先走一遍编译流程再执行。

TypeScript优势

  • 静态类型优势：
    • 可读性强；
    • 可维护性强。（编译阶段就可以暴露错误）
  • TypeScript是JS的超集，支持兼容所有JS特性，支持渐进式引入与升级。

TypeScript基本语法

数据类型

基本语法:let/const/var attributeName: attributeType = value

基本类型：

const str:string = 'hello world'  //字符串
const num:number = 1
const bo:boolean = true
const no:null = null
const un:undefined = undefined

对象类型：

  • 使用interface创建对象类型。
  • 其中readonly意味着属性只读不可改。
  • 一般在属性名称后加问号表示可选属性：定义该属性可以不存在。该对象类型下的子类可以不用可选属性，但非可选属性是必须要存在的。
  • 任意属性：约束所有对象属性都必须是该属性的子类型。
  • 一个对象类型的demo：
interface Student{
    readonly stuId:number; //只读
    name:string;
    age?:number  //可选属性
    [key:string]:any
}
  • 定义该类型实例：
const Qsw: Student = {
    stuId:123456; 
    name:'QSW';
    age:22  //可选属性
}

函数类型

  • 给参数和返回值赋予类型。
const mult:(x:number,y:number) => number = (x,y) =>x*y
  • 更方便的方式：可以定义一个接口类型，可以使用该函数类型对象创建函数。
interface IMult {(x:number,y:number):number}
cont mult:IMult = (x,y) =>x*y

数组类型

  • 以下介绍两个常用的数组类型：
  • 类型1：类型+方括号，如以下demo中数组内元素全是number类型。
type Arr = number[];
const arr:Arr = [1,2,3,4]
  • 类型2：泛型表示，如下demo中数组内元素可以包含被定义的几种类型，可以不分顺序表示。
type Arr = Array<number|string|Record<string,number>>
const arr:Arr = [1,'2',{a:'3'}]
  • 还有空类型、枚举类型和任意类型。在此不做过多讲解。

TypeScript泛型

  • 不预先指定具体类型，而在使用时再指定类型的一种特性。
  • 泛型约束：限制泛型必须符合。比如参数必须是字符串，否则会报错。
type GetRepeatArr = <T extends string>(target:T)=>T[]
const getStrArr:GetRepeatArr = target => new Array(100).fill(target)
getStrArr(123)  //报错

字符串/数字类型

  • 指定字符串或者数字是必须固定的值，必须为其中之一。
type IDomTag = "div" | "span"
type IDomNum = 1|3|5|7
avatar
文章
阅读
粉丝