【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工程环境

    ts-webpack -- coderwhy老师

    - 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 类型不能赋值给除了 unknownany 的其他任何类型,使用前必需显式进行指定类型,或是在类型缩小情况下能够隐式地进行类型推断的情况。

函数类型

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)

外部定义类型声明

第三方库的类型声明,有时安装第三方库时没有内置类型声明,需要自行下载或配置。

DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions. (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)

【TS】学习总结的更多相关文章

  1. TS学习随笔(七)->声明文件

    now我们来看一看TS怎么声明文件, 在JS里面我们经常会使用各种第三方类库,引入方式也不太相同,常见的就是在HTML中通过script标签引入,然后就可以使用全局变量$或者jQuery了 我们通常这 ...

  2. TS学习随笔(三)->接口

    终于来到了比较重要的知识,接口,有多重要呢,反正是很重要好啵 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型. 那什么是接口呢,在面向对象语言中,接口(Interf ...

  3. TS学习随笔(四)->数组的类型

    少侠们,今天我们继续来搞一搞TS 今天我们要来看一看TS中数组的定义是个什么鬼样子 数组的类型: 在 TypeScript 中,数组类型有多种定义方式,比较灵活.下面我们来看看有哪些定义方法 「类型 ...

  4. TS学习随笔(一)->安装和基本数据类型

    去年学过一段时间的TS,但由于在工作中不常用.就生疏了,最近项目要求用TS,那我就再回去搞搞TS,写一篇记录一下自己学习TS的进度以及TS知识点 首先,关于TS的定义我就不在这描述了,想看百度一下你就 ...

  5. TS学习

    随着vue3.0的即将到来,是时候学习一下TS了 简介:TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类 ...

  6. TS学习随笔(六)->断言

    now,我们来看一看TS里面的断言,听起来很上档次啊,其实看完你就发出惊叹,这就是断言啊 类型断言 类型断言(Type Assertion)可以用来手动指定一个值的类型 语法 <类型>值 ...

  7. TS学习随笔(五)->函数

    这篇文章我们来看一下TS里面的函数 函数声明 在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expre ...

  8. TS学习随笔(二)->类型推论,联合类型

    这篇内容指南:        -----类型推论  -----联合类型 类型推论 第一篇中我们看了TS的基本使用和基本数据类型的使用,知道了变量在使用的时候都得加一个类型,那我们可不可以不加呢,这个嘛 ...

  9. TS学习之for..of

    for..of会遍历可迭代的对象,调用对象上的Symbol.iterator方法(可迭代对象,数组,字符串等) let arr = ["hello", "ts" ...

  10. TS学习之泛型

    可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据 不适用泛型的函数 function myfn(args: number): number { return args; } functi ...

随机推荐

  1. 嵌入式Linux会议LinuxCon欧洲的时间表公布

    From: http://linuxgizmos.com/embedded-linux-conference-and-linuxcon-europe-schedules-posted/ Linux基金 ...

  2. pxe+kickstart部署多个版本的Linux操作系统(上)---原理篇

    PXE概述: 1.PXE(Pre-bootExecution Environment),预启动执行环境2.通过网络接口启动计算机3.支持工作站通过网络从远端服务器下载映像,并由此支持通过网络启动操作系 ...

  3. DHCP工作原理

    DHCP:Dynamic Host Configurtion Protocol DHCP的工作原理(UDP) 1.客户端:首先会发送给一个dhcp discovery(广播)报文,报文中的2层和3层都 ...

  4. MVC框架介绍分析

    相信绝大多数学习过Javaweb的人都知道一个系统的模式--Spring模式,以这么模式中为基础,衍生出各种各样的新的模式,其中最重要的就是Spring下的Spring MVC MVC是Xerox P ...

  5. lxml的使用(节点与xpath爬取数据)

    lxml安装 lxml是python下功能很丰富的XML和HTML解析库,性能非常的好,是对libxml3和libxlst的封装.在Windows下载这个库直接使用 pip install lxml ...

  6. ArrayList 深入浅出

    ArrayList 特点:按添加顺序排列.可重复.非线程安全: 底层实现:数组 扩容原理:初始化集合时,默认容量为 0,第一次添加元素时扩容为 10,容量不够时扩容为原来容量的 1.5 倍. 这里扩容 ...

  7. 【技巧】使用PPT更换背景色

    主要记述使用PPT来更换图片某一部分的背景色 把想要更改的图片粘贴到PPT里. 依次选择[格式][颜色][设置透明色],然后点击需要更改背景的地方 将自己的目标颜色复制一下,填充上去,选择[置于底层]

  8. Scala学习——函数

    一.函数的定义(def) object FunctionApp { //定义函数:方法体内最后一行为返回值,不需要使用return def add(a:Int,b:Int):Int={ a + b } ...

  9. vue2.x移动端ui框架选型

    前言 最近公司准备做移动端spa项目,需要选一个ui框架.优先考虑谷歌Material Design设计风格.针对市面上的框架进行了一次调研,简单总结如下. 选型原则:1. 优先考虑md风格. 2. ...

  10. FreeRTOS-03-其它任务相关函数

    说明: 本文仅作为学习FreeRTOS的记录文档,作为初学者肯定很多理解不对甚至错误的地方,望网友指正. FreeRTOS是一个RTOS(实时操作系统)系统,支持抢占式.合作式和时间片调度.适用于微处 ...