day01

2021-02-01 | 阅读：

TS介绍

1、js的超集
ts = 类型 + js，变量类型发生变化时js不会检查，ts会检查

2、区别
ts是静态语言(编译时进行类型检查，可以更早发现错误)

let age: number = 18

// 这句代码报错
age = '20'

age.toFixed()

js是动态语言(执行时进行类型检查，发现错误较晚)

3、转化
ts 命令行工具(编译工具) 转为js 再执行
安装：npm i -g typescript 使用 tsc hello.ts 生成 hello.js 然后 node hello.js
安装：npm i -g ts-node 使用：ts-node hello.ts

类型相关

1、类型注解

let age: number = 18   
age = 20   

2、兼容js已有类型
boolean
number：NAN
string
object：数组、字典、方法、null
undefine

let isLoading: boolean = false

let age: number = 18

let myName: string = '刘老师'

let a: null = null

let b: undefined = undefined

let s: symbol = Symbol()

TS新增类型

联合类型

// 添加小括号，表示：首先是数组，然后，这个数组中能够出现 number 或 string 类型的元素
let arr: (number | string)[] = [1, 3, 5, 'a', 'b']

// 不添加小括号，表示：arr1 既可以是 number 类型，又可以是 string[]
let arr1: number | string[] = ['a', 'b']
let arr1: number | string[] = 123

元组：[number, string, number]

let position: [number, string] = [39, '114']

**数组：number[] 或者 Array**

let numbers: number[] = [1, 3, 5]

let numbers1: Array<number> = [1, 3, 5]

let b: boolean[] = [true, false]

函数类型

(num1:number, num2?:number)=>number
没有返回值就是(num1:number, num2?:number)=>void
参数可以是可选类型且必须位于最后位置

// 1、写法一
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 2、写法二：匿名函数
const add = (num1: number, num2: number): number => {
  return num1 + num2
}

// 3、类型注解：(num1: number, num2: number)=>number
const add:(num1: number, num2: number)=>number = (num1, num2) => {
  return num1 + num2
}

// 调用
console.log(add(3, 2))

对象类型: 属性可以是可选类型

let person: {
  name: string
  age: number
  address?: string   
  // sayHi(): void
  sayHi: () => void
  greet(name: string): void
} = {
  name: '刘老师',
  age: 18,
  sayHi() {},
  greet(name) {}
}

字面量类型

let test:"name" = "name"

你定义了一个变量 test。
它的类型被明确指定为字符串字面量 “name”。
这个变量只能被赋值为 “name”，不能赋值为其它字符串。

等价于

type NameLiteral = "name";
let test: NameLiteral = "name";

应用场景举例：联合字面量类型

type Role = "admin" | "user" | "guest";

function setRole(role: Role) {
  // ...
}

setRole("admin"); // ✅
setRole("root");  // ❌ 报错：不能将 "root" 分配给类型 "Role"

自定义类型

type customArray = (string | number)[]    

类型断言
使用as可以让类型变的更具体

const aLink = document.getElementById('link') as HTMLAnchorElement
// const aLink = <HTMLAnchorElement>document.getElementById('link')
aLink.href

类型推断
利用TS类型推论的能力，提升开发效率

// 不需要写类型注解，自动推断为number类型
let num = 10
// 会报错
num = 'hello'


// 如果没有初始化需要指定类型   
let str:string
// 会报错
str = 0
str = 'hello'

对象接口

一、接口

interface IPerson {
  name: string
  age: number
  sayHi(): void
}

let person: IPerson = {
  name: '刘老师',
  age: 18,
  sayHi() {}
}

let person1: IPerson = {
  name: 'jack',
  age: 16,
  sayHi() {}
}

二、接口和type的区别

1、书写上有区别，一个没有等号一个有等号

2、接口，只能为对象指定类型。类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
type numstr = number | string

// 接口：
interface IPerson {
  name: string
  age: number
  sayHi(): void
}

// 类型别名
type IPerson = {
  name: string
  age: number
  sayHi(): void
}

let person: IPerson = {
  name: '刘老师',
  age: 18,
  sayHi() {}
}

三、接口的继承

interface Point2D {
  x: number
  y: number
}
// interface Point3D { x: number; y: number; z: number }

// 使用 继承 实现复用：
interface Point3D extends Point2D {
  z: number
}

let p3: Point3D = {
  x: 1,
  y: 0,
  z: 0
}

行者常至，为者常成！

JHHK