带薪学习TS的类型

bash 复制代码
# TS 相较于 JS的优点
  1. TS是静态类型的语言,它在编译时就能发现错误,而js是动态类型的语言,只有在执行的时候才能发现错误减少找bug,改bug的时间,提升开发效率。
  2. 程序中任何位置的代码都有代码提示,随时随地的安全感增加了开发体验。
  3. 强大的类型系统提升了代码的可维护性,使得重构代码更加容易。
  4. TS类型判断机制不需要在代码中的每个地方都显示标注类型,让你在享受优势的同时降低了成本。
  5. TS支持最新的ECMAScript语法,优先体验最新的语法。

你好TS

看一段简单的TS代码:

TS 复制代码
let age: number = 18

这段代码相较于JS多number的类型定义。TS要求对所有声明的变量进行类型定义,这就说明TS是一门强类型的语言。那我们该怎么定义变量的类型呢?不同场景有不同的方式。

TS增加的类型

原始类型

TS 复制代码
let str: string = 'name'

其他的都一样的写。

数组类型

TS 复制代码
1.
let arr: number[] = [1,2,3] //数字数组
let bool: boolean[] = [false,true] //布尔数组
2.
let str: Array<string> = ['a','b','c']

联合类型

多种类型定义拼接,不能通过&拼接,因为一个数据不可能同时拥有多种类型。

TS 复制代码
1.
let arr1: (string | number)[] = [2,3,4,'a']  //有括号:字符串和数字数组
let arr3: number | string[] = 123            //无括号:数字或字符串数组
2.
let arr2: (number | Array<string>)[] = [['a','b','c'],2,6] //嵌套数组

类型别名

定义一个可以复用的类型别名,用在对象身上得注意了,对象中没有你定义的类型数据会报错。

TS 复制代码
type CustomArray = (number | string)[]
let arr4: CustomArray = [1,2,3]

函数类型(1. 单独指定参数、返回值类型 2. 同时指定)

单独

{}和()中间的是返回值类型定义

TS 复制代码
function addOne(num1: number,num2: number): number { 
    return num1 + num2
}
const addTwo = (num1: number,num2: number): number=>{
    return num1 + num2
}

同时

TS 复制代码
const add: (num1:number,num2: number) => number = (num1,num2) =>{
    return num1 + num2
}

函数没有返回值,可以不写void,自定义可选参数

TS 复制代码
function greet(name: string): void{}
const sayHi = (content: string) =>{} 
                // ts函数参数必须全传,需要自定义可选参数,?需要放在最后面的参数
const println = (name: string,gender?: string):void => {}

函数重载

TS 复制代码
//定义接受一个参数或三个参数或可接受
function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;

function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {

    if (d !== undefined && y !== undefined) {

        return new Date(y, mOrTimestamp, d);

    } else {

        return new Date(mOrTimestamp);

            }

}

const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5);
const d3 = makeDate(2,5) //这里不能确定第二个参数是谁的,报错

Object类型

  1. 对象类型,必须指定数据的类型,指定了类型必须定义。
TS 复制代码
type Person = {
    name: string,
    age: number,
    // sayHi: (content: string)=> void
    sayHi(content: string): void,
    girlFriend?: string  //可选
}

let obj: Person = {
    name:'老六',
    age: 18,
    sayHi(content){
        console.log('学ts');
        
    }
}

obj.girlFriend = '五开人'
console.log(obj);
  1. 假如我没有定义obj.gril,但是我去访问它, ts访问不存在的类型会报错。
  2. 要增加类型,可以在类型定义里面 girlFriend?: string
  3. ts就像写注释给编辑器看,不写注释你就不是好的程序员。
  4. 有个好处就是会有提示,访问没有的属性也会报错。
  5. 定义type可以让我们在编写对象时更简便: let obj2: Person = { }
相关推荐
Mr_Mao2 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜053 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~4 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.5 小时前
serviceWorker缓存资源
前端
RadiumAg6 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo6 小时前
ES6笔记2
开发语言·前端·javascript
yanlele6 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子7 小时前
React状态管理最佳实践
前端
烛阴8 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子8 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端