初始TypeScript

当当当！

粗鲁地学习一下ts，

我认为就是在js基础上多了类型声明，

#下面是一些个人见解

ts是什么？

1. 简称：TS 是js的超集（js有的ts都有）
2. ts = type + js （在js基础上，为js添加类型支持）

1. 是微软开发的开源编程语言，可在任何运行js的地方运行

1. 为什么要为js添加类型支持

	ts	js
编译语言类型	静态	动态
何时类型检查	编译期（代码执行前）	执行期（代码真正执行时）

 其实就是减少找bug的时间

2. 还没学习ts之前出buy经常会有报类型错误，找起来也很麻烦

3. 虽然粗略地看了一下ts，但是还没有运用到项目中，等实际运用时再做总结。

ts初体验

1. 使用vsCode终端时遇到的问题

（1）终端无法输入命令

• vsCode属性将此处取消勾选
• vsCode以管理员身份打开

（2）终端无法运行脚本 百度解决 通过命令可以解决问题

2. 类型注解

* 理解作在声明变量和赋值前先对变量做解释 用冒号 ：

// 最基本的类型声明
let age:number = 20
// 联合类型 （由两个或多个类型组成）
let arr: (number | string)[] = [1,2,3,'a','b']
// 已知数组长度限制数组个数
let position:[number,number] = [29.21,25.59]  // 如经纬度

* 类型别名 关键字：type

// 例如
type CustomArray = (number | string)[]    // 注意 = 即申请了一个变量
let arr1:CustomArray = ['blackpink',2016]

* 函数类型

function add1(num1:number, num2:number):number {
    return num1 + num2
}
// 函数表达式
const add2 = (num1:number, num2:number):number => {
    return num1 + num2
}
// 函数没有返回值 联系c语言 void
function greet(name:string):void {
    console.log('hello',name);
}

* 可选的参数（不知道你要不要加 那就来个？表示疑惑哈哈哈）

function myAxios(config:{url:string; method?:string}) {
    console.log(config);
}
// 联系发送请求时不同的请求方式需要的参数不同 即可添加可选 拿个需要 传进去就可以

* 接口

（1）关键字 interface

// 例如
interface IPerson {
    name: string
    age: number
    sayHi(): void
}
let person2:IPerson1 = {
    name: 'rosie',
    age: 18,
    sayHi() {}
}

（2）区别

	interface	type
相同点	都可以给对象指定类型
不同点	只能为对象指定	不仅可以为对象，可以为任意类型指定

（3）继承 

• 关键字：extends
• 继承所有属性
• 额外的属性再加

• interface p1 { x:number; y:number}
  interface p2 extends p1 {
      z:number        // p2 自己有的属性
  }

3. 类型推论

* 就是可以忽略一些类型声明，通过鼠标查看类型

* const声明的是常量，所以其值就是字面类型

* 函数参数类型要写

let age = 20    // 此时age就是number类型
function add1(num1:number, num2:number) {
    return num1 + num2     // 根据这里得到函数返回值类型为number 所以可以不写
}
const p: 18 = 18
const q: 'rosie' = 'rosie'

4. 类型断言

• 需要指定更加具体的类型
• 关键字as

• // link 是一个a标签 
  // 由于getElementById得到的是HTMLElement 是广泛的标签 没有a特有的href属性
  // 用 as 指定特定的类型后可使用其特有方法和属性
  const alink = document.getElementById('link') as HTMLAnchorElement

5. 字面量类型

// 与联合类型配合使用 只能选一个
function changeDirection(direcyion: 'up' | 'down' | 'left' | 'right') {
}
changeDirection('up')

ts高级类型

1. class类

2. 兼容性

3. 交叉类型  &

4. 泛型

* 关键<>

* 理解为 type统一了推断出来的类型 这样多元化了 复用性强

// 1. 
function idd<Type>(value: Type[]):Type[] {
    value.length
    return value
}
// 2.1
interface ILength { length: number }
function id3<Type extends ILength>(value: Type): Type {
    value.length
    return value
}
！注：
创建约束的接口，接口要求提供length属性
通过extends使用该接口，为泛型添加约束
该约束表示：传入的类型必须具有length属性
！！！传入的实参只要有length属性即可
// 2.2
// 创建函数获取对象属性中的值
function getProp<Type,Key extends keyof Type>(obj:Type,key:Key) {
    return obj[key]
}
getProp({name:'rosie',age:25},'age')
！注：
通过逗号分隔 Key
关键字Keyof 接收一个对象类型，生成联合类型
Key只能是Type所有键中的任意一个 只能访问对象中存在的属性