前端学习笔记TypeScript 快速上手

Posted luciozhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端学习笔记TypeScript 快速上手相关的知识,希望对你有一定的参考价值。

视频: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 类型声明文件

以上是关于前端学习笔记TypeScript 快速上手的主要内容,如果未能解决你的问题,请参考以下文章

前端学习笔记TypeScript 快速上手

TS快速上手- 初遇:Hello,TypeScript

TS快速上手初遇:Hello,TypeScript

SpringBoot 学习笔记 -- [了解SpringBoot的基础知识,快速上手搭建一个简单案例]

半小时快速上手 TypeScript 类型编程!(附手摸手实战案例)

[python]《Python编程快速上手:让繁琐工作自动化》学习笔记6