TypeScript入门
解决JavaScript类型系统的问题
TypeScript大大提高了代码的可靠程度
JavaScript的超集(seperset)
TypeScript属于「渐进式」
缺点：语言本身多了很多概念
强类型与弱类型
强类型与弱类型（类型安全）
语言层面不会限制实参的类型
几乎没有什么约束
允许任意的隐式类型转换
语言层面限制函数的实参类型必须与形参类型相同
有更强的类型约束
不允许任意的隐式类型转换
强类型
弱类型
静态类型与动态类型（类型检查）
运行阶段才能够明确变量类型
而且变量的类型随时可以改变
一个变量声明时它的类型就是明确的
声明过后，它的类型就不允许再修改
静态类型
动态类型
JavaScript类型系统特征
弱类型且动态类型
早前的JavaScript应用简单
JavaScript(脚本语言)没有编译环节
大规模应用下，这种「优势」就变成了短板
强类型的优势
错误更早暴露
代码提示更智能，编码更准确
重构更牢靠
减少不必要的类型判断
TypeScript原始类型
const a: string = 'footer' const b: number = 100 //NaN Infinity const c: boolean = true //false // const d: boolean = null //严格模式和非严格模式 const e: void = undefined //函数的返回值为空 const f: null = null const g: undefined = undefined const h: symbol = Symbol() // ES2015 复制代码
标准库就是内置对象所对应的声明
TypeScript中文错误消息
yarn tsc --locale zh-CN
作用域问题
在文件中添加一个
export {}将其变成模块文件，有模块作用域，避免冲突
Object类型
泛指所有的非原始类型
限制对象类型更多的使用接口
数组类型
const arr1: Array<number> = [1,2,3] const arr2: number[] = [1,2,3] 复制代码
元组类型 Tuple Types
const tuple: [number,string] = [18, 'jyy'] // const age = tuple[0] // const name = tuple[1] const [age, name] = tuple //解构赋值 //应用 Object.entries({ foo: 123, bar: 456 }) 就是一个元组类型 复制代码枚举类型 Enum Types
enum PostStatus { Draft = 6, UnPublished, PubLished } // 双向枚举 会侵入编译后的js文件 //常量枚举 const enum PostStatus { Draft = 6, UnPublished, PubLished } 复制代码函数类型 Fuction Types
//函数声明方式 function func1(a: number,b: number): string{ return 'jyy' } // string 约定的是返回值类型 //这样的方式传参的个数是固定的 //如果想不固定,1.加问号；2.ES6设置默认值的方式 function func1(a: number,b?: number): string{ return 'jyy' } function func1(a: number,b: number = 10): string{ return 'jyy' } // 接收剩余参数 function func1(a: number,b: number, ...rest:number[]): string{ return 'jyy' } 复制代码任意类型 any
function stringify(value: any){ return JSON.stringify(value) } 复制代码隐式类型推断
建议为每个变量添加明确的类型
类型断言 Type assertions
//明确变量是某种类型 ,两种方式 const num1 = res as number const num2 = <number>res //JSX下不能使用 复制代码
接口 Interfaces
可以理解为一种规范或者一种契约
interface Post{ title: string content: string } function printPost(post: Post){ console.log(post.title) console.log(post.content) } //这样就显示的要求了printPost方法传入参数的类型，个数 //其他 interface Post{ title: string content: string subtitle?: string readonly summary: string //只读成员 } //如果无法知道具体的成员 interface Cache{ [key: string]: string //key可以是任意的，指键 后面约定了值的类型 } 复制代码类 Classes
描述一类具体事物的抽象特征
TypeScript增强了class的相关语法
类的访问修饰符
private
public
protected
抽象类
只能被继承，不能使用new去创建实例对象
//抽象类 abstract class Animal { eat(food: string): void{ console.log(``) } //抽象方法 不需要方法体，子类必须实现 abstract run(distance: number): void } 复制代码泛型 Generics
我们在定义函数、接口、类的时候没有指定具体的类型，等到使用的时候再指定具体的类型
function createNumberArray(length: number, value: number): number[]{ const arr = Array<number>(length).fill(value) return arr } function createNumberArray(length: number, value: string): number[]{ const arr = Array<string>(length).fill(value) return arr } function createNumberArray<T>(length: number, value: number): number[]{ const arr = Array<T>(length).fill(value) return arr } const res = createArray<string>(3,'foo') 复制代码类型声明 Type Declaration
declare function camelCase (input: string): string //现在一般不会手动这样写 会安装一些第三方声明模块
作者：喵爱吃鱼
链接：https://juejin.cn/post/7021806307195748359