ts(typescript)：基础类型

在线地址 教程地址 高级类型
基本类型

用了ts都说好，好处在于限制变量和函数的类型，这样就减少了很多代码的判断

  let isDone: boolean = false;  // 指定为布尔类型，修改为其它类型的值会报错
  let hexLiteral: number = 0xf00d;
  let myName: string = 'Tom';

  isDone = true
  let n: null = null;
  let myFavoriteNumber: any = 'seven'; // 任意类型

不被类型检测

// let myFavoriteNumber = 'seven'; myFavoriteNumber = 7; 这种会报错，ts会进行类型推断
let a; a= 1; a= '123' // 等价于定义了any类型，a**ny 类型而完全不被类型检查**

接口

interface Person {
  name: string;
  age?: number; // 可选属性
  [propName: string]: any; // 允许有其它任意类型的属性
   readonly id: number; // 只读属性
}
let b: Person= {
  name: '123',
  age: 123,
  id: 234254124
} 

对vue中的data变量进行约束

函数

let mySum = function (x: number, y: number, z?: number, d: string = 'Cat', ...items: any[]): number {
  // (x: number, y: number, z?: number可选参数, d: string = 'Cat'给参数默认值, ...items: any[]剩余参数) : number为函数指定返回类型
  if(z) {
    return x + y+ z;
  } else {
    return x + y;
  }
   
};

数组

let fibonacci: number[] = [1, 1, 2, 3, 5]; // 数组的项中不允许出现其他的类型
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];


const stringArr: string[] = ['1', 'g']

枚举类型

// enum枚举类型:为接口字段的数值赋予友好的名字
enum examState {
  loading = 0, // 未出结果
  pass = 1, // 通过
  notPass = 2, // 未通过
  null = 3 // 缺考
}
console.log(examState.notPass)

const resetPassword = 'Login/FindPwd' // 重置密码
const getAllRegion = 'Address/AllRegion' // 获取所有的省市区
const editUserInfo = 'User/CheckUserinfo' // 编辑用户信息

// 为函数赋默认值
function hasDefault({ name = 'zs', age = 19 } = { name: String }) {
  return name + '' + age
}
console.log(hasDefault({ age: 22 }))

接口

// 一： 接口是可以给函数的参数定义类型
// 1.必传属性 2. 可选属性(变量用 const，若属性用readonly。) 3.只读属性 (第一次赋值后不可被修改) 4.额外的属性检查
interface rankingObj {
  pageNum: number
  numPerPage: number
  rankYear: string
  rankMonth: string
  userName: string
  organNbr: string
  rankParentType: string
  // [propName: string]: any
}
async function getData(obj: rankingObj) {
  obj.rankYear = obj.rankYear ? obj.rankYear : ''
  obj.rankMonth = obj.rankMonth ? obj.rankMonth : ''
  obj.userName = obj.userName ? obj.userName : ''
  console.log(obj)
}
const rankParentTypes: string[] = [
  'PERSON_CURR_YEAR_RANK', // 农户综合排名
  'PERSON_SELF_CHECK_CURR_MONTH_RANK', // 个人自查月度排名
  'PERSON_BE_CHECKED_CURR_MONTH_RANK' // 个人被查月度排名
]
let param1: rankingObj = {
  pageNum: 1, // 页码的字段
  numPerPage: 10, // 每页数据量的字段
  rankYear: '2019',
  rankMonth: '11',
  userName: '',
  organNbr: '001001007061', // 接口验证字段
  rankParentType: rankParentTypes[0] // 接口验证字段 (农户排名)
}
getData(param1)

// 1.函数的参数名不需要与接口里定义的名字相匹配
interface toggleCaseFn {
  (source: string, upperOrLower: string): string
}
let toggleCase: toggleCaseFn = function(a: string, b: string) {
  if (b === 'upper') {
    return a.toUpperCase()
  } else if (b === 'lower') {
    return a.toLowerCase()
  } else {
    return a
  }
}
console.log(toggleCase('sdfFsdfgdsGDSFGdfgg', 'lower'))

运算符 解构运算符

let first = [1, 2]
let second = [3, 4]
let myArr = [...first, ...second]
let son = {
  name: 'xq',
  age: 23,
  sex: 'male'
}
let defaults = { food: 'spicy', price: '$$', ambiance: 'noisy' }
let fatherObj = {
  ...defaults,
  ...son
}
console.log(myArr, fatherObj)

类

// 数据类型----类
class Student {
  fullName: string
  constructor(public first, public second, public last) {
    this.fullName = first + second + last
  }
}
document.body.innerHTML =
  document.body.innerHTML + new Student('you', 'neng', 'wei')

ts中常用的工具类型
（Record、Partial 、 Required 、 Readonly、 Pick 、 Exclude 、 Extract 、 Omit）
链接

ts中type和interface的用法和区别

interface 接口名称 { 属性名: 类型 }
type 名称 = 限定的类型
interface可以重复声明 type可以声明基本类型、联合类型、元组类型

ts的代码题

<div class="data__tit_cjd" style="color: #262626;font-size: 17px;line-height: 24px;font-weight: 500;"><label>3. </label>一个关于 TS 的代码题<br>
<br>
// 假设有一个这样的类型：<br>
interface initInterface {<br>
  count: number;<br>
  message: string;<br>
  asyncMethod&lt;T, U&gt;(input: Promise&lt;T&gt;): Promise&lt;Action&lt;U&gt;&gt;;<br>
  syncMethod&lt;T, U&gt;(action: Action&lt;T&gt;): Action&lt;U&gt;;<br>
}<br>
<br>
// 在经过 Connect 函数之后，返回值类型为<br>
type Result {<br>
  asyncMethod&lt;T, U&gt;(input: T): Action&lt;U&gt;;<br>
  syncMethod&lt;T, U&gt;(action: T): Action&lt;U&gt;;<br>
}<br>
<br>
// 其中 Action&lt;T&gt; 的定义为：<br>
interface Action&lt;T&gt; {<br>
  payload?: T<br>
  type: string<br>
}<br>
<br>
// 现在要求写出Connect的函数类型定义。<br>
<br>
&nbsp;&nbsp;<span class="score-val-ques" style="color: #262626;font-size: 14px;background: #F6F6F6;padding: 3px 6px;border-radius:11px;word-break: keep-all;vertical-align:top">分值5分</span></div>

答案