前端学习笔记TypeScript 快速上手

Posted 2021-09-14 luciozhang

视频：https://www.bilibili.com/video/BV1784y1c7V9

内容概要

• 强类型与弱类型
• 静态类型与动态类型
• javascript自有类型系统的问题
• Flow静态类型检查方案
• TypeScript语言规范与基本应用

1、强类型与弱类型（类型安全）

强类型语言中不允许任意类型的隐式类型转换，语法层面的限制，在编译阶段就会报错，而不是通过逻辑判断。
javascript与python

2、静态类型与动态类型（类型检查）

静态类型：变量声明是，类型就是确定的，声明过后，类型不允许再修改
动态类型：允许时才确定变量类型，变量类型随时可以修改。

3、JavaScript自有类型系统的问题

缺失了类型系统的可靠性
原因：早期应用简单，没有编译环节，弱类型/动态类型是优势

4、弱类型的问题

（1）调用对象中不存在的方法，在运行时才会报错
（2）参数类型不同，导致结果不符合预期（sum(100,’100’)）
君子约定有隐患，强制要求有保障

5、强类型的优势

（1）错误更早暴露
（2）代码更加智能，编码更准确（代码提示、参数提示）
（3）重构更牢靠
（4）减少不必要的类型判断（typeof===xxx）

FLow

JavaScript的类型检查器

类型注解

安装：npm install --save-dev flow-bin
初始化 flow init
// @flow
function sum (a:number, b:number){
return a+b;
}
检查 npm run flow

编译阶段移除flow注释

1、flow-remove-types
安装：npm install flow-remove-types —dev
运行：npm run flow-remove-types . -d dist
2、babel
@babel/preset-flow
配置
//.babelrc
{
“presets”:[“@babel/preset-flow”]
}
运行：npm run babel . -d dist

VsCode插件

Flow Language Support

类型推断

function square(n){
return n*n;
}
square(“100”) //会报错

类型注解

变量
let num: number = 100;
返回值
function foo() : number{
} // 返回undefined也会报错

支持的类型

1、原始类型：string、number（NaN/Infinity）、boolean、null、void（undefined）、symbol
2、数组类型：Array、number[]、[string, number] 元组
3、对象类型：const obj1 : { foo? : string, bar: number } = { foo : ’string’ , bar : 100}
const obj3:{ [string] :string} = {} // 键值都是string
4、函数类型：参数、返回值
函数作为参数(用箭头函数)：
function foo (callback: (string, number)=>void){
callback(’string’, 100);
}
5、特殊类型(联合类型)
const type: ‘success’ | ‘warning’ | ‘danger’ = ‘success’;
const b: string | number = 100
用type声明类型别名：
type StringOrNumber = string ｜number；
const b: StringOrNumber = ’string’
const c: ?number = undefined // 可以为null或者undefined
6、任意类型
Mixed（强类型，有类型推断）/Any（弱类型，用来兼容老代码）

Flow 对运行环境API的支持

内置变量
core/dom/bom/cssom/node

TypeScript

概述

JavaScript+类型系统+ES6 —编译—> JavaScript
功能更强大、生态更健全，更完善
渐进式

快速上手

安装 npm install -g typescript
tsc --version
编译 npm run tsc xxx.ts

配置文件

npm run tsc —init

常用配置：

“target”: “es5”,//编译后的标准js代码
“module”: “commonjs”,//模块化
“outDir”: “dist”,//编译后的目录
“rootDir”: “src”,//源代码目录
“sourceMap”: true,//源代码映射
“strict”: true,//开启所有严格检查选项
“lib”: [“ES2015”,“DOM”],//配置标准库 如果要使用ES2015的新的标准就需要引入对应的标准库包括DOM BOM等
标准库：内在对象的声明

编译 npm run tsc

原始类型

严格模式下 string和void不能为null

显示中文错误信息

npm run tsc —locale zh-CN

作用域问题

Export {}使整个文件作为模块导出

Object类型

不单指对象，包括对象/数组/函数
声明对象：
//限制对象成员类型 对象的成员，下面这样可以，但是使用接口是更好的写法
const obj:{foo:number,bar:string} = {foo:123,bar:“string”};

数组类型

const arr1: Array = [1,2,3]
const arr2: number[] = [1,2,3]

Function sum(…args: number[]){
//不需要判断是不是每个成员都是数字
return args.reduce((prev, current) => prev +current, 0)
}

元组类型

（明确元素数量和元素类型的数组）
const tuple: [number, string] = [18, ‘zxc’];
const age = tuple[0];
const [age, name] = tuple;

// 下面的方法返回对象中所有的键值数组，返回的就是元组
Object.entries({
foo: 123,
bar: 456
})

枚举类型

会生成双向的键值对象，可以从键获取值，可以从值获取键
enum PostStatus{
Draft,
Unpublished,
Published
}
// 加上const不会生成键值对，只会在使用枚举的地方替换为对应的常量
const enum PostStatus{
Draft,
Unpublished,
Published
}

const post = {
title: ’Hellow TypeScript’
content: ’TypeScript is a typed superset of JavaScript’,
status: PostStatus.Draft
}

函数类型

函数声明：
function func1(a: number, b?: number): string{
return ‘func1’;
}

func1(100, 200);
func1(100);

函数表达式：
const func2: (a: number, b:number) => string = function(a: number, b: number): string{
return ‘func2’;
}

任意类型

Any类型不会检查，不会报语法错误
function stringify(value:any){
return JSON.stringify(value);
}

隐式类型推断

let age = 18;
age = ‘string’; // 会报错
let foo; //会被声明为any类型

建议为每个变量添加明确的类型

类型断言

不是类型转换
const nums = [110, 120, 119, 112];
const res = num.find(i=>i>0); //res会被判断为 number或undefined
const num1 = res as number;
const num2 = res;

接口 Interfaces

约定对象中有什么样的成员

Interface Post{
title: string;
content: string;
subtitle?: string; //可选成员
readonly summary: string; //只读成员，修改会报错
}

function printPost(post: Post){
console.log(post.title);
console.log(post.content);
}

动态属性
interface Cache{
[prop: string]: string;
}
const cache: Cache = {};
cache.foo = ‘value1’;
cache.bar = ‘value2’;

类 Classes
ES6以前，函数+原型 模拟实现类
ES5开始，JavaScript有了专门的类
TypeScript增强了class的相关语法
访问修饰符: private/publish(默认)/protected

Class Person {
publish name: string = ‘xxx’;
private age: number;
protected readonly gender: boolean; // protected只允许在子类中访问
construction(name: string, age: number){
this.name = name;
this.age = age;
}

sayHi(msg: string): void{
}

}

抽象类

和接口类似，但是可以有具体的实现
abstract class Animal{
eat(food: string): void{
}
abstract run(distance: number): void
}
class Dog extends Animal{
run(distance: number): void {
}
}
const d = new Dog();
d.ect(‘food’);
d.run(100);

泛型

function createArray (length: number, value: T): T[]{
const arr = Array(length).fill(value);
return arr;
}
const res = createArray(3, ‘foo’);

类型声明

declare function camelCase(input: string):string;
.d.ts 类型声明文件