TypeScript_代码007(未授权)

本文介绍: JS 已有类型原始类型，简单类型（ number/string/boolean/null/undefined ）复杂数据类型（数组，对象，函数等）TS 新增类型联合类型自定义类型（类型别名）接口元组字面量类型枚举 void …

JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Unc aug h t Ty peEr ro r）开发的时候，定义的变量本应该就有类型这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率。

从编程语言的动静来区分，Ty peSc rip t 属于静态类型的编程语言，Ja vaSc rip t 属于动态类型的编程语言 、

对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）

 let age = 18
 let age: number = 18

// 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18'

let age: number = 18
let myName: string = '老师'
let isLoading: boolean = false
// 等等...

// 写法一：
let numbers: number[] = [1, 3, 5]
// 写法二：
let strings: Array<string> = ['a', 'b', 'c']

    元组
let arr3 :[number , number,boolean]=[19,10,true]

let arr: (number | string)[] = [1, 'a', 3, 'b']

let timer: number | null = null
timer = setInterval(() => {}, 1000)
// 定义一个数组，数组中可以有数字或者字符串, 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]

let obj:{a:1}|{b:'3'}; //表示 只能是a类型 值为1 或者b 类型 值为'3'   不能有其他属性

object (常用) Object()

let num1 :object = {a:1};

let num2: object = [1];

let arr :(number | string ) []  =[1,2.3,'abc']
//联合类型：|
//注意事项：|的优先级比较低，需要用（） 包裹，一旦使用联合类型
//那么他们只能用他们共有的类型

timer = setInterval(() => {}, 1000)
// 定义一个数组，数组中可以有数字或者字符串, 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]


//灵活度高，可以随意搭配使用
//形式一：
type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]
//形式二：
type custom =number | string 
let arr5:custom[]=[12,3,3,'abc']
//形式三：
type s = string
type n = number
let str :s = 'abc'
let str :n=23

// 函数声明
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const add = (num1: number, num2: number): number => {
return num1 + num2
}

type AddFn = (num1: number, num2: number) => number
const add: AddFn = (num1, num2) => {
return num1 + num2
}

// 需求: 自己定义一个可选参数的函数
  let str: string = '刘狄威真帅'
  console.log(str.slice()) // 从头截到尾: 刘狄威真帅
  console.log(str.slice(1)) // 从指定索引开始截取到末尾: 狄威真帅

   // 包含头部 不包含尾部
  console.log(str.slice(1, 4)) // 从指定索引开始截取到指定索引


  // 注意事项: 必选参数不能在可选参数后 (符合常识)
  const print = (name?: string, gender?: string): void => {
    if (name &amp;&amp; gender) {
      console.log(name, gender)
    }
  }

//对象类型
  let obj: {
    //哪些属性及其类型的声明
    name:string,
    age :number,
    gender:string,
    hobby:string 
    //定义函数
    sayHi:(content:string)=>void 
  }={
    //对属性的赋值
    name:'张三',
    age :23,
    gender:'未知',
    hobby:'喝水',
    sayHi(content){
      console.log('你好'+content)
    }
  }

// 对象类型
  type Person = {
    name: string,
    age: number,
    gender: string,
    hobby: string,
    girlFriend?: string, // ? 表示可选属性
    // sayHi: (content: string) => void
    sayHi(content: string): void
  }

 // ts 就像在写注释, 以前写的注释是给程序员看的, ts 写的类型是给编辑器看的, 程序员也可以看
//对象1  
let obj1: Person = {
    name: '刘狄威',
    age: 38,
    gender: '未知',
    hobby: '圣杯布局',
    girlFriend: '乔碧萝',
    sayHi(content) {
      console.log('nihao:' + content)
    }
  }
//对象2
  let obj2: Person = {
    name: '某一帆',
    age: 66,
    gender: '未知',
    hobby: '黑卅导',
    sayHi(content) {
      console.log('你真别学了:' + content)
    }
  }

// 1，传统
  if (obj1.girlFriend) {
    obj1.girlFriend.concat()
  }

  // 2，优雅
  obj1.girlFriend &amp;&amp; obj1.girlFriend.concat()

  // 3，最新: 可选链操作符, 前面有才会执行后面的函数
  obj1.girlFriend?.concat()

// axios({
  //   url: '',
  //   method: 'get', // 其他属性都不是必选项, 就可以用 ? 可选属性来实现
  //   data: {}
  // })

// 作用: 给对象约束属性和方法
  // 基础语法:
  // interface 接口名 {
  //   属性名: 类型
  // }

  interface IPerson {
    username: string
    age: number
    gender: string
    sayHi: () => void
  }
  const p1: IPerson = {
    username: '刘狄威',
    age: 38,
    gender: '未知',
    sayHi() {
      console.log('我是榜一刘狄威, i'm rich')
    }
  }