【TS】学习总结
01-TypeScript编译环境
TypeScript全局安装
npm install typescript -g
tsc --version //查看版本,安装成功
TypeScript运行环境
-
常规路径
tsc demo.ts//demo.ts -> demo.js 运行js文件
-
ts-node(类似于node运行js)
npm install ts-node -g //ts-node依赖tslib、@types/node npm install tslib @types/node -g ts-node demo.ts
-
webpack工程环境
- mkdir demo & cd demo npm init npm install typescript tsc --init npm install webpack webpack-cli webpack-dev-server -D npm install ts-loader -D npm install html-webpack-plugin -D - 配置package.json - 配置webpack.config.js ...
02-TypeScript数据类型
数据定义语法
const/let/var name(: Type) = value;
不标明Type则会进行类型推导
基本数据类型
...
Array类型
推荐(TSLint):
const names1: string[] = ["why", "abc", "cba"];
const names2: Array<string> = ["why", "abc", "cba"];
数组类型元素类型相同。
object类型
// 使用类型推断
const obj = {
name:"afs",
age: 23
};
symbol类型&null类型&undefined类型
...
TypeScript新增数据类型
enum类型
enum Direction {
EAST,
WEST,
NORTH,
SOUTH,
}
const d1 = Direction.EAST; // 0
const d2 = Direction.NORTH; // 2
// 指定值,未赋值的依次递增
enum Direction {
EAST = 10,
WEST = 20,
NORTH,
SOUTH = 40,
}
/*
console.log(Direction);
{
'10': 'EAST',
'20': 'WEST',
'21': 'NORTH',
'30': 'SOUTH',
EAST: 10,
WEST: 20,
NORTH: 21,
SOUTH: 30
}
*/
console.log(Direction[21]); // NORTH
tuple类型
相较于数组,元素类型不同则为元组。
const num = [111, "sadfdsa"];
num.push(123)
num.push("asdfs")
num // [ 111, 'sadfdsa', 123, 'asdfs' ]
any类型
相对于保留js特性的变量(类型不确定)。
如果需要某个变量的类型不固定,可以显式定义any。
void类型
如果一个函数没有返回值,那么它的返回值类型就是void。
- 函数不显式定义返回类型,则会对返回值进行类型推导,没有返回值则返回undefined
- 如果定义为void,默认不能有返回值,❗但可以显式返回undefined
- 如果定义为any,可以返回任何类型
- 如果定义为其他特定类型,则必须有返回值且类型相同,比如undefined则必须显式返回undefined
function a(): undefined{
console.log(1)
}// 报错
never类型
never 表示永远不会发生的类型。
如:一个从来不会有返回值的函数(死循环),一个总是会抛出错误的函数。(一切不可能运行到的部分均可以限定为never类型)
function foo(x: string | number ): boolean {
if (typeof x === 'string') {
return true;
} else if (typeof x === 'number') {
return false;
}
// 如果 前面的判断有遗漏 ,这会报错:
// - 不是所有条件都有返回值 (严格模式下)
// - 或者检查到无法访问的代码
// 但是由于 TypeScript 运行永远不会被访问的 `never` 类型
// 你可能会用它来做安全或者详细的检查。
const check: never = x;
}
// 如果有开发人员需要zx类型
unknown类型
unknown
类型含义类似于any
。
unknown
类型不能赋值给除了 unknown
或 any
的其他任何类型,使用前必需显式进行指定类型,或是在类型缩小情况下能够隐式地进行类型推断的情况。
函数类型
const func: (n: number, s: string) => void = function func(m: number, n: string): void{
//code block
}
类型别名
type newType = number|string;
字面量类型
let m: 'message' = "message";
//m类型则为确定的'message'类型
m = 'other';//报错
字面量推断
function func(m: "a"|"b"|"c"){}
let a = "a";
func(a);//报错
//reason: a: string,m需要字面量类型,即使a="a"可以避免a更改为其他字符串
// => 改成
func(a as "a"); //或
const a = "a"; //或
const a = "a" as const;
03-TypeScript中函数
有一部分可见02-...[void类型]部分。
function func(m: type, n: type): type{
//code block
}
// 如果参数type不写会默认是any,返回值type会根据函数体返回值自动类型推断
匿名函数会根据上下文自动推断参数类型。
const array = [1, 2, 3];
array.forEach(item => {
//code block
})
//此处item会上下文进行类型推断: number
对象类型
function func(obj: {m: number, n: string}){}
可选类型
function func(m?: number){}
//m可选
联合类型
function func(m: number|string){}
//m为其中类型之一
//使用前需要类型缩小或类型断言
类型断言as
将不确定的类型转为更确定的类型。
//强制转换
const s2n = ("string" as unknown) as number;
...
非空类型断言!
function func(m?: string){
return m.length;
}
//编译报错
//改成 => 逃过编译阶段报错
function func(m?: string){
return m!.length;
}
可选链
//上面代码可以改成
function func(m?: string){
return m?.length;
}
//如果m不存在则短路直接返回undefined
剩余参数
function func(...args: number[]){}
详解Typescript里的This - 知乎 (zhihu.com)
函数重载
function sum(m: number, n: number): number;
function sum(m: string, n: string): string;
function sum(m: any, n: any): any{
//code block
}
04-TypeScript类型缩小
将不确定的类型进行类型范围缩小。
typeof
function func(m: number|string){
if(typeof m === "number") {}
else {} //number
}
平等缩小
//switch
function func(m: "a"|"b"){
switch (m) {
case 'a': break;
case 'b': break;
}
}
//===...
function func(m: "a"|"b"){
if(m === "a") {}
//...
}
instanceof
function func(m: Data:string){
if(m instanceof Data) {}
}
in
type Fish = {swim: () => void}
type dog = {run: () => void}
function func(animal: Fish|dog){
if("swim" in animal) {} //Fish
}
05-TypeScript类
继承:extends
class Parent{
constructor(){}
}
class Child extends Parent{
constructor(){
super();
}
}
修饰符
public、protected、private、static
readonly
class Parent{
readonly xxx;
//xxx只能在 构造器 或 字段定义时 赋值
constructor(){}
}
存取器
class Parent{
set name(name){}
get name(){}
}
抽象类abstract
...略...
06-TypeScript接口
//对象类型
interface Obj{
name: string,
age?: number,
readonly sex: boolean
}
//索引类型
interface Index{
[index: number]: string
}
//函数类型
interface Func{
(n: number, m: number): number
}
继承
接口支持多继承,类只能单一继承。
多态(面向接口编程)
...略...
Freshness
Freshness | 深入理解 TypeScript (jkchao.github.io)
interface IPerson{
name: string
}
const p: IPerson = {
name: "a",
aname: "a"
} //报错
//在p的赋值过程中,TypeScript对 对象字面量 进行严格检查
泛型
function foo<T>(arg: T): T {}
// 显式类型定义
foo<string>("abc")
// 隐式类型推导
foo("abc")
泛型约束
interface ILength{
length: number
}
function getLength<T extends ILength>(args: T){
return args.length;
}
getLength("aaa");
getLength([1, 2]);
getLength({length: 10});
07-TypeScript模块化开发
模块化
利用ES Module或CommonJS使文件成为一个独立的模块。
// ~/a.ts
const a = 1;
const b = 1;
// ~/b.ts
const a = 1;
const b = 1;
// ↑报错,冲突
-------------
// ~/a.ts
const a = 1;
const b = 1;
// ~/b.ts
const a = 1;
export const b = 1;
// ↑ok
namespace命名空间
namespace允许在模块内部进行更小粒度的作用域划分。
类型查找规则
.d.ts文件
进行类型声明(declare),用来做类型检测。
内置类型声明
内置JavaScript运行时的一些标准化API的声明文件。
TypeScript/lib at main · microsoft/TypeScript (github.com)
外部定义类型声明
第三方库的类型声明,有时安装第三方库时没有内置类型声明,需要自行下载或配置。
TypeScript: Search for typed packages (typescriptlang.org)
自定义类型声明
//变量
let name = "name"; //.ts
declare let name: string; //.d.ts
//函数
function foo(){}; //.ts
declare function foo(): void; //.d.ts
//类
class xxx{}; //.ts
declare class xxx{}; //.d.ts
//模块
export defualt xxx; //.ts
declare module "xxx" {}; //.d.ts
//命名空间
declare namespace ${
function ajax(): void
}//.d.ts
$.ajax()//.ts
tsconfig.json
TypeScript: TSConfig Reference - Docs on every TSConfig option (typescriptlang.org)