Typescript理解|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 4天

前言

一、 typescript介绍

1、特点 2、痛点 3、安装 4、编译

二、TypeScript 类型

1、原始类型 2、内置对象类型 DOM 内置类

三、类型注解

1、基本语法： 2、不同类型的数据互相赋值的规则（类型权重） 四、ts变量作用域 1、全局作用域(项目) 默认 2、 模块作用域(文件) 3、 函数作用域，块级作用域等等 五、类型 1、类型推论 2、联合类型 3、对象类型 5、数组元素的类型 6、函数中的类型限制 7、类型断言（断定） 8、类 9、泛型

一、 typescript介绍

​ TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，让javascript变成强类型语言。它由 Microsoft 开发，代码开源于 GitHub 上。

1、特点 可以在开发阶段和编译阶段就发现大部分错误，这总比在运行时候出错好 不显式的定义类型，也能够自动做出类型推论 即使 TypeScript 编译报错，也可以生成 JavaScript 文件 Google 开发的 Angular 就是使用 TypeScript 编写的 TypeScript 拥抱了 ES6+ 规范 2、痛点 ​ 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的东西短期可能会增加一些开发成本，多写一些类型的定义。对于长期维护的项目，TypeScript 能够减少其维护成本

3、安装 npm install -g typescript \ yarn global add typescript tsc -v 测试 c就是compile（编译）

4、编译 编译所完成的事情，就是把ts的代码转换成js的代码。因为浏览器或者node环境最终识别的是js，而不是ts。

tsc test.ts //监听 tsc test.ts --watch

类型不匹配时，编辑报错，但可以生成js（编辑通过），如果不希望编译通过需要配tsconfig.json

使用步骤：

1、新建test.ts 随便写上一些代码，js的代码就行（因为ts完全支持js） 2、使用命令：tsc test.ts 把ts编译成js 在当前目录下就会产生一个test.js文件。 3、新建html文件，引入test.js文件，就ok了。

编辑器推荐使用vscode，因为，vscode对ts的提示非常好。

二、TypeScript 类型

1、原始类型 ​ js里本来就有的(基本)类型：number、string、boolean、null、undefined、Symbol

​ ts里新增的类型：void、any、never、联合、函数、数组类型、类 …

2、内置对象类型 DOM ​ Document、HTMLElement、NodeList …

内置类 ​ Boolean、Error、Date、RegExp、Math …

三、类型注解

1、基本语法： 声明 变量:类型; //定义变量，没有赋值时，默认值是： undefined 声明 变量:类型=值; //定义变量并赋值。严格要求值是定义的类型

如：

let n:number; //定义一个变量n，类型是number，没有赋值，默认值是undefined let num:number = 12; //没有问题 num = "hi"; //出错，类型不对。

let str:string = "hello";

2、不同类型的数据互相赋值的规则（类型权重） 类型权重 any > boolean number string void 联合、函数、数组类型、类 > null undefined -> never

权重高的类型，接受权重低的类型值； 反之不对； 同等权重的数据不能互相赋值（特殊情况：null和undefined可以互相赋值）；

如：

//权重高的类型，接受低权重的类型值 let a:any; a = 12; a ="hello";

//权重低的类型，也可以接受权重高的类型 let a1:number; let b1:any="hello"; a1 = b1; console.log(a1);

let n = null; n = 12; console.log(n);

//同类型权重的数据不能互相赋值（特殊情况：null和undefined可以互相赋值）； //null和undefined可以互相赋值 let t = null; t = undefined;

void类型可以赋值为null和undefined。其它类型不行 any类型

any类型可以赋值为任何类型的数据，但是，类型依然是any类型

四、ts变量作用域 1、全局作用域(项目) 默认 ​ 在一个项目目录下，所有文件的变量都暴露在全局

2、 模块作用域(文件) ​ 变量封闭在模块内部，在内部全局使用。所以，只有 在文件内部使用了export（export default）就会让全局变量变成模块作用域。

如：

let temp:number; //定义变量，作用域范围是当前文件（模块） temp = 12;

export {}; 1 2 3 4 3、 函数作用域，块级作用域等等 五、类型 1、类型推论 定义变量时，没有明确的指定数据类型，ts会依照值推断出一个类型。

let a = "hi"; //虽然没有明确类型，但是ts推论出a变量是字符串类型 a=200; //这句话不能通过 1 2 3 4 2、联合类型 一个变量的取值可以是多种类型。

如： let temp: string | number; //表示temp变量的取值可以是string，也可以是number

temp = 12;//没有问题 temp = "hi";//没有问题 temp = false;//不行。

1 2 3 4 5 6 7 8 9 3、对象类型 对象的类型使用class或者接口（interface）来描述，也可以使用type定。 class我们已经学过，接口如何使用 接口的定义，就是为了描述对象。

1、interface //定义类型（自定义类型） //格式 interface 接口名{ 键:类型。 }

//还记得nodejs中的那个schema吗。

interface IPerson{ name:string,//必须的属性值 readonly sex:string|number, //只读,联合类型 age?:number//可选的属性值 }

let p1:IPerson={ name:"张三疯", sex:"男", // wife:"梅超风" //不行，我们定义的p1类型IPerson里没有wife };

p1.name="张四疯"; // p1.sex="女";//不行，不能改 p1.age = 12; //没有问题 // p1.wife ="梅超风"; //这句话在编译时会报错，因为，我们定义的p1类型IPerson里没有wife

console.log(p1);

2、type type IPerson={ name:string, sex:string|number, age?:number }

5、数组元素的类型 // 变量:类型[] // 变量:Array<类型> //等价于： 变量:类型[] // let 变量:(类型名|类型名2)[]

let arr:number[] = [1,2,3,4]

let arr2:(number|string)[]=['aa',12]

let arr3:Array=[12,3]

6、函数中的类型限制 对函数的限定，能够限定形参的类型，返回值的类型。

形参：输入

返回值：输出

即：函数的限定就是限定它的输入和输出

//1、声明式

//注意：下面的代码是定义函数 //function 函数名(参数:类型):返回类型{函数体} function sum(x:number, y:string):number {

}

//2、函数表达式 //注意：下面的代码是定义函数类型 //定义函数类型，不赋值 //let 变量:输入类型 => 输出类型

// 1、定义一个变量show3，show3是函数类型 let show3:(m:number,n:string,a?:string)=>number;

// 2、给变量show赋值（相当于定义函数） show3 = function(t:number,s:string){ return t; } // 3、调用函数 let b = show3(12,"23","12");

//函数表达式 //定义的同时赋值 //let 变量:输入类型 => 输出类型 = function(参数){} let show3:(a:number,b:string,c?) => number = function (a,b){ return a; }

//接口定义函数类型(自定义类型) interface Func { (a:number,b:string):boolean }

let show5:Func = function(a:number,b:string){ return true; }

show5(12,"hi");

// void类型修饰函数返回值时，表示函数不能有任何返回值 function fn():void{ return "hi"; //出错 }

7、类型断言（断定） 绕过编译器的类型推断，手动指定一个值的类型

类型断言的注意点：

1）、类型断言不做类型转换 2）、自定义类型也可以用来做断言 3）、权重最低

格式： 1）、<类型>变量 2）、变量 as 类型

(a).length //断言字符串 (a as string).length //断言字符串

如： function fn(a:string|number):boolean{ //a.length; 这么写是错的，因为，a的取值有两种可能性，length没法直接使用，会报错 // 使用断言，就不会报错

let n:number = (<string>a).length;  //当a是string时，使用length属性。如果是number，不会给n赋值。那么，n是undefined，

console.log(n);
return <boolean>0;//这是不对的，因为，类型断言不做类型转换

}

fn("hello"); //5 fn(120);//undefined

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 8、类 在TS中，不支持es6类的写法。支持es7类的写法。

class Person{ constructor(){ //声明了一个属性，并且赋值 this.name = "张三疯";//这不行了，这是es6的写法 } }

class Person{ //声明一个属性name，并且赋初值。 name = "张三疯";//这可以，es7的写法

constructor(){
}    

}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 es7类的写法：

class Person{ //声明实例属性 name1="张三疯"; //定义属性name，值为 张三疯 age:number;//age属性没有赋值

//实例方法
show(){
    console.log(this.name1,this.age);
}
//构造函数
constructor(name,age){
    //赋值
    this.name1 = name;
    this.age = age;
}

//静态属性(类的属性)
static count=0;

//静态方法（类的方法）
static max(){
    return 110;
}    

}

let p = new Person("张三疯","男"); p.show();

console.log(Person.count); console.log(Person.max());

ES7类的访问控制符

控制类内部的属性(实例，类)|方法(实例，类) 的被访问权限

//public 公共的，谁都可以访问(类内、外)，默认就是public //private 私有的，当前类内使用 //protected 受保护的，当前类内部+子类内部可以使用。

class Person {

public namee:string='张三丰';//实例属性 private age:number; //私有的，只能当前类内部使用 protected address:string; //受保护的，当前类内部及其子类内部 address2:string; //不加的情况下 是public

protected static VER:string='1.11.1' //类属性 静态属性

constructor(namee:string,age:number){
   	this.namee = namee;//实例属性第一次的修改
	this.age = age||0;//实例属性第一次的修改

}

private show(){} //私有的实例方法 private static show2(){} //私有的类方法（静态方法） }

9、泛型 在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

其实就是，把类型也当作变量（类型是可变的，未知的），在使用时，把类型变量放在<> 里，表示类型的声明。

1)、函数泛型

//定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}

//如： function 函数(length: number, value: T): Array {}；其中T就是类型的变量名

//调用 函数(参数) //给变量T赋值为string。

//栗子

function fn(a1:T,a2:T):Array{ return [a1,a2]; }

console.log(fn(12,23));

console.log(fn("hello","world"));

console.log(fn("hello","world")); //这个不行，因为，要求T 是number类型，而传入的参数"hello"是string类型。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 2)、类泛型

//定了了Person类，并声明了两个类型T和U。 class Person<T,U>{ p1:T; //属性p1的类型是T p2:U; //属性p2的类型是U

constructor(p1:T,p2:U){
    this.p1 = p1;
    this.p2 = p2;
}

show():void{
    console.log(this.p1,this.p2);
}

} //实例化时，给T赋值为string，U赋值为number let p = new Person<String,number>("hello",2); p.show();

TypeScript 基础（一）

文章目录1.认识 TypeScript ：2.变量和常量：2.1 什么是变量？2.2 变量的声明：2.3 变量的命名规则和规范：1）变量的命名规则（必须遵守）：2）变量的命名规范：3. ts 语言的数据类型4.运算符和表达式4.1 运算符：4.2 算术运算符：4.3 赋值运算符：4.4 自增自减运算符：4.5 符号运算符：4.6 关系运算符：4.7 逻辑运算符（真为 1，假为 0）：4.8 运算符的优先级：5.流程控制5.1 我们常见的流程：5.2 分支结构（选择~）：5.3 循环结构：5.4 跳出循环： typescript ?:_何时使用TypeScript：常见场景的详细指南

1.TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。 2. (1)TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以运行在TypeScript环境中。 (2)TypeScript是为大型... TypeScript 简单介绍_牛牪犇0的博客_typescript 简介 1-19 TypeScript是微软开发的JavaScript的超集,typescript兼容JavaScript,可以载入JavaScript代码然后运行,ts与js相比进步的地方 包括:加入注释,让编译器理解理解存储所支持的对象和函数,编译器会移出注释,不会增加开销;增加一个完整的类结构,使之更... typescript精髓 10-31 typescript精髓 typescript精髓typescript精髓typescript精髓typescript精髓typescript精髓 初识TypeScript编译器(tsc) 最新发布 BertKing的专栏 528 对于有过Java/C/Rust/Go等编程语言经验的开发者来讲，对于编译器这个概念应该都不陌生。(比如 javac , gcc , rustc …)今天我们主要来看一下 TypeScript 编译器 —— tsc TypeScript 全面介绍_敬 之的博客_typescript简介 1-11 a. 全局安装 TypeScript 语言的编译器:cmd 命令提示行下输入npm i -g typescript;只需首次安装即可。 b. 用 vscode 打开项目文件夹后,右键选择在终端中打开,在终端中输入tsc -init(tsc是ts语言的编译器, c是compile的意思, 编译... TypeScript简介_鸣_c的博客_typescript官方简介 1-19 TypeScript介绍:TypeScript是JavaScript类型的严格超集,它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。TypeScript添加了可选的静态类型和基于类的面向对象编程。typescript的诞生是因为在...

什么是TypeScript TypeScript 快速入门 weixin_45345105的博客 198 TypeScript 概述 基于JS的扩展语言，最低能编译到ES3版本的代码。 任何一种JavaScript运行环境都支持TypeScript进行开发 相比于Flow,功能更为强大,生态更健全、更完善 很多大项目都使用TypeScript进行开发 – Angular/Vue3.0 TyperScript — 前端领域中都第二语言 缺点： 语言本身多了很多概念，提高了学习成本 项目初期，TypeScript会增加一些成本 TypeScript 快速上手 安装: yarn add typescript --d typeScript-基础知识-1.什么是 TypeScript aohouju7093的博客 69 1.它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 的 Angular2 也使用了 TypeScript 作为开发语言。 一、什么是 TypeScript 1.TypeScript是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 M... TypeScript—什么是TypeScript?(一)_typescript是啥_周橘的博客-CSDN博... 1-12 TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。 【TypeScript】一文带你了解什么是TypeScript 前端之行，任重道远！ 9287 TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript是一种非常受欢迎的JavaScript语言扩展。它在现有的JavaScript语法之上加入了一层类型层，而这一层即使被删除，也丝毫不会影响运行时的原有表现。许多人认为TypeScript“只是一个编译器”，但更好的理解其实是把TypeScript编译器（即处理语法的部分）和语言工具（即处理与编辑器集成的部分）。.......... Typescript中?? ?: ?. 都是什么意思 Andrew_SJ的博客 6492 ?: ?:是指可选参数，可以理解为参数自动加上undefined function echo(x: number, y?: number) { // 可选参数 return x + (y || 0); } getval(1); // 1 getval(1, null); // error, 'null' is not assignable to 'number | undefined' interface IProListForm { enterpriseId: string | number;什么是TypeScript?本文介绍TypeScript基本用法和语法

main方法

问题 Typescript中的感叹号点、问号点是什么意思？我刚入坑react项目的时候看别人代码就看到这样的写法，以开始是懵逼的哈哈哈哈，毕竟是个小白，然后吭哧吭哧的百度查资料，最后发现了问号点(?.)奥义哈哈哈。 例子 data入参可能为null,undefined，通常我们的写法是直接上if判断啥的，然后再取data中的属性，但是有了问号点(?.)写法就简单很多了，看下面例子： 1.typescript写法： //1.data可能为null,undefined , row也可能为null,undefin TypeScript m0_54625720的博客 176 typescript 官网 介绍​ TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，让javascript变成强类型语言。它由 Microsoft 开发，代码开源于 GitHub 上。 特点 可以在开发阶段和编译阶段就发现大部分错误，这总比在运行时候出错好 不显式的定义类型，也能够自动做出类型推论 即使 TypeScript 编译报错，也可以生成 JavaScript 文件 Google 开发的 Angular 就是使用 TypeScr typescript中特殊符号（？/！）用法 不停 9625 属性或参数中使用 ？：表示该属性或参数为可选项 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop 变量后使用 ！：表示类型推断排除null、undefined 转载出处 ... 什么是TypeScript?为什么要用它来代替JavaScript？ 游人 459 TypeScript是 JavaScript 的超集，主要提供可选的静态类型、类和接口。一大好处是使 IDE("GUI/编辑器") 能够提供更丰富的环境，以便在您输入代码时发现常见错误。 什么是typescript以及如何使用 u014527697的博客 8045 TypeScript TypeScript 是由微软开发的一款开源的编程语言 。TypeScript 是 Javascript 的超级， 遵循最新的 ES6、 Es5 规范。 TypeScript 从语言层面上扩展了JavaScript的语法。TypeScript 更像后端 java这样的面向对象语言可以让 js 开发大型企业项目 。应用：谷歌也在大力支 ？？其实没啥意思，就是Nullish Coalescing (空值合并)。 具体好好看官方文档：www.typescriptlang.org/docs/handbo… 4.0的版本要有一些变化 来直接上代码简单例子一目了然 const i = undefined const k = i ?? 5 console.log(k) // 5 // 3.9.2编译 const i = und 1.什么是TypeScript

什么是TypeScript 官方的解释是TypeScript是JavaScript的一种超集。我的理解是TypeScript就是JavaScript的一种特别的使用形式，这个形式中包括了一些高级的使用方式（这些方式是原生JavaScript所不具备的）。 TypeScript就是JavaScript TypeScript可以通过编译器直接转换成JavaScript代码。所以我们可以随心所欲按照TypeScript规定的写法来写TypeScript，至于怎么转化就交给TypeScript编译器吧。 你的所有J TypeScript基础

什么是TypeScript

JS是动态类型（在执行阶段才进行类型的匹配）的语言，弱类型语言（会做类型转换，在强类型语言中字符串和数字是无法相加的）。 TS是静态类型（在编译阶段进行类型的匹配，在编译阶段就可以暴露大部分错误）的语言，也是弱类型语言。相比JS，可读性和可维护性都增强了。TS基于JS，兼容所有JS特性，支持共存。 基本语法 基础数据类型： string、number、boolean、null、undefined 在变量名后加一个冒号，冒号后面接类型名称。 字符串/数字字面量： 对象类型： 类型

Typescript详解

什么是TypeScipt? 参考文档官方文档 TypeScript 是由微软开发的一款开源的编程语言。 TypeScript 是 Javascript 的超集，遵循最新的ES6、Es5 规范。TypeScript 扩展了 JavaScript 的语法。 TypeScript 更像后端java、C#这样的面向对象语言，可以让 js 开发大型企业项目。 谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+就是基于 Typescript 语法。 最新的 Vue 、React 也可以集成 TypeScript中的 ?: 是什么意思 热门推荐 weixin_40821790的博客 3万+ 可选参数和可选属性使用了 –strictNullChecks，可选参数会被自动地加上 | undefined:复制到剪切板function f(x: number, y?: number) { return x + (y || 0); } f(1, 2); f(1); f(1, undefined); f(1, null); // error, 'null' is not assignabl 什么是 TypeScript？ m0_61643133的博客 90 TypeScript 是 JavaScript 的超集。TypeScript 建立在 JavaScript 之上。首先，我们编 ———————————————— 版权声明：本文为CSDN博主「Ensoleile2021」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/weixin_5152…