技术标签: JavaScript 前端 vue.js javascript
TypeScript
简称:TS,是 JavaScript 的超集。简单来说就是:JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。Type
+ JavaScript// TypeScript 代码有明确的数据类型
let age1: number = 18
// JavaScript 代码没有明确的类型
let age2 = 18
JS的缺陷
JS 的类型系统是弱类型的,没有类型的概念
let ar = 11 // 这里是数值
ar = [] // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误
没有类型校验,导致了在使用 JS 进行项目开发时,会经常遇到类型错误的问题,增加了找 Bug、改 Bug 的时间,严重影响开发效率
JavaScript 属于动态类型的编程语言
边解释边执行,错误只能在运行阶段才能发现。
TS属于静态类型的编程语言
对比:
Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合,TypeScript 已成为大中型前端 项目的首选编程语言
目前,前端最新的开发技术栈:
注意: Vue2 对 TS 的支持不好~
安装可以把TS编译成JS的工具,搭建一个可以运行TS的环境
安装包:npm i -g typescript
tsc
命令,实现了 TS -> JS 的转化tsc –v
(查看 typescript 的版本)注意:Mac 电脑安装全局包时,需要添加 sudo
获取权限:sudo npm i -g typescript
步骤
创建js文件。例如 hello.ts 文件(注意:TS 文件的后缀名为 .ts
)
编译。将 TS 编译为 JS
在终端中输入命令,tsc hello.ts
(此时,在同级目录中会出现一个同名的 JS 文件)
执行 JS 代码。
node hello.js
https://www.typescriptlang.org/play
了解ts-node命令的基本使用;
每次修改代码后,都要重复执行两个命令,才能运行 TS 代码,太繁琐。
tsc 你的代码.ts
node 你的代码.js
使用 ts-node
包,直接在 Node.js 中执行 TS 代码。它提供了 ts-node
命令,可以简化执行命令。
npm i -g ts-node
使用方式:ts-node hello.ts
相当于:1 tsc 命令 2 node(注意:ts-node 不会生成 js 文件)
解释:ts-node 命令在内部偷偷的将 TS -> JS,然后,再运行 JS 代码
在初始学习阶段,我们会使用ts-node来运行代码,在项目阶段就不会再这样使用了。
Cannot find name 'console'. Do you need to change your target library? Try changing the
libcompiler option to include 'dom'.
tsc --init
生成配置文件 tsconfig.json了解类型注解的概念; 能掌握类型注解的使用方式
TypeScript 是 JS 的超集,TS 提供了 JS 的所有功能,并且额外的增加了:类型系统
可以显示标记出代码中的意外行为,从而降低了发生错误的可能性
格式
let 变量名: 类型 = 初始值
示例代码:
let age: number = 18
说明:代码中的 : number
就是类型注解
作用:为变量添加类型约束**。
上述代码中,约定变量 age 的类型为 number 类型,就只能给变量赋值该类型的值,否则,就会报错
// 错误代码:
// 错误原因:将 string 类型的值赋值给了 number 类型的变量,类型不一致
let age: number = '18'
了解类型推论的场景
在 TS 中,某些没有明确指定类型的情况下,TS 的类型推论机制会自动提供类型。好处:由于类型推论的存在,有些情况下的类型注解可以省略不写
// 变量 age 的类型被自动推断为:number
let age = 18
// 函数返回值的类型被自动推断为:number
function add(num1: number, num2: number) {
return num1 + num2
}
如果不知道类型,可以通过鼠标放在变量名称上,利用 VSCode 的提示来查看类型
写代码的时候,多看方法、属性的类型,养成写代码看类型的习惯
了解ts中的数据类型
将 TS 中的常用基础类型分为两类
number/string/boolean/null/undefined/symbol
object
(包括,数组、对象、函数等对象)// 数值类型
let age: number = 18
// 字符串类型
let myName: string = '小花'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null
如何定义一个变量可以是null也可以是 number 类型?
掌握联合类型的用法
let arr: (number | string)[] = [1, 'a', 3, 'b']
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
解释:|
(竖线)在 TS 中叫做联合类型,即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
// | 联合类型
// 联合类型1: 变量可以是两种类型之一
let timer:number|null = null
timer = 2
// 联合类型2: 数组元素可以是两种类型之一
let arr: (number|string|boolean)[] = [1,2,3]
arr[0] = '1'
arr[2] = true
注意:这是 TS 中联合类型的语法,只有一根竖线,不要与 JS 中的或(|| 或)混淆了
掌握在ts中使用数组的方法。
格式
let 变量: 类型[] = [值1,...]
let 变量: Array<类型> = [值1,...]
// 写法一:
let numbers: number[] = [1, 3, 5] // numbers必须是数组,每个元素都必须是数字
// 写法二:
let strings: Array<string> = ['a', 'b', 'c'] // strings必须是数组,每个元素都必须是字符串
如何定义一个数组,它的元素可能是字符串类型,也可能是数值类型。
分析,结合联合类型来使用
let arr: (number | string) [] = ['1', 1]
这里有个有优先级的问题
推荐使用 number[]
写法
掌握类型别名的用法,能给类型起别名。
定义
type 别名 = 类型
使用
type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'
给复杂类型起别名
// type NewType = string | number
// let a: NewType = 1
// let b: NewType = '1'
// let arr: NewType[] = [1, '1']
type MyArr = (number | string) []
const arr:MyArr = [1, '1']
别名可以是任意的合法字符串,一般首字母大写
对函数中涉及的类型进行约定
函数的类型实际上指的是:函数参数
和返回值
的类型
// 普通函数
function 函数名(形参1: 类型=默认值, 形参2:类型=默认值): 返回值类型 {
}
// 箭头函数
const 函数名(形参1: 类型=默认值, 形参2:类型=默认值):返回值类型 => {
}
// 函数声明
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
return num1 + num2
}
add(1,'1') // 报错
定义多个具有相同参数类型和返回值类型的函数时,代码比较累赘
const add = (a:number,b:number):number =>{
return a + b
}
const sub = (a:number,b:number):number =>{
return a - b
}
把拥有相同形参和实参的函数当做一个整体,来定义
const add1 : (n1:number,n2:number)=>number = (a,b)=>{
return a+b }
提炼自定义类型
type Fn = (n1:number,n2:number) =>number
const add1 : Fn = (a,b)=>{
return a+b }
掌握函数的返回值是void的情况
如果函数没有返回值,那么,函数返回值类型为:void
function greet(name: string): void {
console.log('Hello', name)
//
}
如果一个函数没有返回值,此时,在 TS 的类型中,应该使用 void
类型,有如下三种情况会满足
不写return
写return ,但是后面不接内容
写return undefined
// 如果什么都不写,此时,add 函数的返回值类型为: void
const add = () => {
}
// 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同
const add = (): void => {
}
// 但,如果指定 返回值类型为 undefined,此时,函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
// 此处,返回的 undefined 是 JS 中的一个值
return undefined
}
如果函数没有指定返回值,调用结束之后,值是undefined的
当不能直接声明返回值是undefined
function add(a:number, b:number): undefined {
// 这里的会报错
console.log(a,b)
}
掌握可选参数的使用,能用可选参数定义函数
使用函数实现某个功能时,参数可以传也可以不传。
例如:数组的 slice 方法,可以 slice()
也可以 slice(1)
还可以 slice(1, 3)
]
这种情况下,在给函数参数指定类型时,就用到可选参数了
可选参数:在可选参数名的后面添加 ?
(问号)
function mySlice(start?: number, end?: number): void {
console.log('起始索引:', start, '结束索引:', end)
}
注意:可选参数只能出现在参数列表的最后,也就是说可选参数后面不能再出现必选参数
相同点: 调用函数时,可以少传参数
区别:设置了默认值之后,就是可选的了,不写就会使用默认值; 可选的并一定有值。
注意:它们不能一起使用。优先使用默认值
掌握给对象指定类型的描述
const 对象名: {
属性名1:类型1,
属性名2:类型2,
方法名1(形参1: 类型1,形参2: 类型2): 返回值类型,
方法名2:(形参1: 类型1,形参2: 类型2)=>返回值类型
} = { 属性名1: 值1,属性名2:值2 }
可选属性用 ?
const 对象名: {
属性名1?:类型1,属性名2:类型2 } = {
属性名2:值2 }
const goodItem:{
name: string, price: number, func: ()=>string } = {
name: '手机',
price: 2000,
func:function(){
return '打电话' }
}
说明:
{}
来描述对象结构属性名: 类型
的形式,如果是多行,可以省略,方法名(): 返回值类型
的形式用类型别名来简化定义对象的类型的方式
把类型注解封装一下,定义类型
// 创建类型别名
type Person = {
name: string,
age: number
sayHi(): void
}
// 使用类型别名作为对象的类型:
let person: Person = {
name: '小花',
age: 18
sayHi() {
}
}
function f1 (p: Persion) :void {
}
掌握接口的使用
当一个对象类型被多次使用时,可以有两种方式来来描述对象的类型,达到复用的目的。
interface 接口名 {
属性1: 类型1, 属性2: 类型2,
}
interface IGoodItem {
name: string, price: number, func: ()=>string
}
const good1: IGoodItem = {
name: '手表',
price: 200,
func: function() {
return '看时间'
}
}
const good2: IGoodItem = {
name: '手机',
price: 2000,
func: function() {
return '打电话'
}
}
解释:
interface
关键字来声明接口I
开头interface(接口)和 type(类型别名)的对比:
推荐:能使用 type 就是用 type
// 接口的写法-------------
interface IPerson {
name: string,
age: number
}
const user1:IPerson = {
name: 'a',
age: 20
}
// type的写法-------------
type Person = {
name: string,
age: number
}
const user2:Person = {
name: 'b',
age: 20
}
掌握接口的继承
比如,这两个接口都有 x、y 两个属性,重复写两次,可以,但很繁琐
interface Point2D {
x: number; y: number }
interface Point3D {
x: number; y: number; z: number }
如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用
interface 接口2 extends 接口1 {
属性1: 类型1, // 接口2中特有的类型
...
}
interface Point2D {
x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
z: number
}
解释:
extends
(继承)关键字实现了接口 Point3D 继承 Point2D掌握元组类型的使用
固定结构的数据, 例如
可以使用数组来记录坐标
let position: number[] = [116.2317, 39.5427] // 数组的元素都是数值类型
使用 number[] 的缺点:不严谨,因为该类型的数组中可以出现任意多个数字,而类似于经纬度只能有两个数字。
元组是另一种特殊的数组:
let position: [number, number] = [39.5427, 116.2317]
解释:
模拟定义useState。
useState的返回值是一个数组,第一个元素是number,第二个是修改number的函数。
function useState(n: number): [number, (number)=>void] {
const setN = (n1) => {
n = n1
}
return [n, setN]
}
const [num ,setNum] = useState(10)
let str1 = 'hello 武汉'
const str2 = 'hello 武汉'
问: str1是什么类型? str2是什么类型?
通过 TS 类型推论机制,可以得到答案:
任意的 JS 字面量(比如,对象、数字等)都可以作为类型使用
说明:
字面量:{ name: 'jack' }
[]
18
20
'abc'
false
function() {}
单个字面量没有什么用处,它一般和联合类型一起使用 , 用来表示一组明确的可选值列表
比如,在贪吃蛇游戏中,游戏的方向的可选值只能是上、下、左、右中的任意一个
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时,写上'',就会有类型提示:
changeDirection('up')
解释:参数 direction 的值只能是 up/down/left/right 中的任意一个
优势:相比于 string 类型,使用字面量类型更加精确、严谨
redux 中的actiontype
type ActionType = 'ADD_TODO' | 'DEL_TODO'
function reducer(type:ActionType) {
if(type === 'ADD_TODO')
}
性别取值只能有两个
let gender: 'girl' | 'boy' = 'boy'
gender = 'abc' // 报错
字面量类型约定:只能取某些个特定的值。一般和联合类型一起使用。
掌握枚举类型的使用
enum,枚举。它用来描述一个值,该值只能是 一组命名常量 中的一个
没有type之前,用枚举比较多,现在用的少了。枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值
定义格式
enum 枚举名 {
可取值1,可取值2,.. }
说明:
enum
关键字定义枚举使用格式
枚举名.可取值
// 定义枚举类型
enum Direction {
Up, Down, Left, Right }
// 使用枚举类型
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时,需要应该传入:枚举 Direction 成员的任意一个
// 类似于 JS 中的对象,直接通过 点(.)语法 访问枚举的成员
changeDirection(Direction.Up)
解释:
,
(逗号)分隔掌握枚举类型的值
枚举类型和ts中其他的类型不一样,枚举类型不仅仅是类型,还是一个值。
type定义的类型是没有值的
type NewType = number | string
console.log(NewType) // 输出类型是没有意义的
枚举定义的类型是有值的。
// 创建枚举
enum Direction {
Up, Down, Left, Right }
// 调用函数时,需要应该传入:枚举 Direction 成员的任意一个
// 类似于 JS 中的对象,直接通过 点(.)语法 访问枚举的成员
console.log(Direction.Up)
也可以使用tsc给编译一下来做对比
默认情况下,枚举的值是数值。默认为:从 0 开始自增的数值
当然,也可以给枚举中的成员初始化值
// Down -> 11、Left -> 12、Right -> 13
enum Direction {
Up = 10, Down, Left, Right }
enum Direction {
Up = 2, Down = 4, Left = 8, Right = 16 }
字符串枚举:枚举成员的值是字符串
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
注意:字符串枚举没有自增长行为,因此,字符串枚举的每个成员必须有初始值
用后端用0,1来标识性别,但是0,1在代码中不好读。
enum Gender {
girl,
boy
}
type User = {
name: string,
gender: Gender
}
const u1: User = {
name: '小花',
gender: Gender.girl
}
console.log(u1)
掌握any类型的使用
any: 任意的。当类型设置为 any 时,就取消了类型的限制。
let obj: any = {
x: 0 }
obj.bar = 100
obj()
const n: number = obj
解释: 以上操作都不会有任何类型错误提示,即使可能存在错误(编译时不报错,可是运行时会报错)
console.log()
; 定义一个函数,输入任意类型的数据,返回该数据类型原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
假设我们明确知道页面上有一个img,它的id是img。
const box = document.getElementById('img')
console.log(box.src) // ts报错
注意:该方法返回值的类型是 HTMLElement,该类型只包含所有标签公共的属性或方法,不包含 img 标签特有的 src等属性,无法操作 src 等 img标签特有的属性或方法。
作用: 手动指定值的类型
场景:有时候你会比 TS 更加明确一个值的类型,此时,可以使用类型断言来指定更具体的类型。
关键字: as
const 变量 = 值 as 类型
解释:
as
关键字实现类型断言const box = document.getElementById('img') as HTMLImageElement
box.src
技巧:如何得知dom的类型
__proto__
获取 DOM 元素的类型;知道后端的结果会是一个类型,但这个结果是用ajax拿到的,不好直接给初始值,又希望得到输出提示的效果
type User = {
name: string,
age: number
}
const u1 = {
} as User
console.log(u1.name) // 这里就会有提示
res表示一个复杂的对象,我们把它传给一个函数fn,但是目前没有办法从形参obj中获取提示信息
const res = {
name: '小花', city: '武汉', skills: ['js', 'css'] }
function fn(obj) {
// 这里写obj.没有提示
// obj.
}
fn(res)
怎么解决?
JS 中提供了 typeof 操作符,用来在 JS 中获取数据的类型
console.log(typeof 'Hello world') // ?
TS 也提供了 typeof 操作符:可以在类型上下文中引用变量或属性的类型(类型查询)
根据已有变量的值,反向推断出获取该值的类型,来简化类型书写
type 类型 = typeof 常量
const res = {
name: '小花', city: '武汉', skills: ['js', 'css'] }
type Stu = typeof res
function fn(obj:Stu) {
// 这里写 obj. 就会有提示
obj.skills
}
fn(res)
解释:
typeof
操作符来获取变量 p 的类型,结果与第一种(对象字面量形式的类型)相同基本类型学习完了
创建一个 fn 函数,它的特点是: 传入什么类型的数据就返回什么类型的数据。 也就是说,参数和返回值类型相同。
例如:
function fn(value: number): number {
return value }
比如,fn(10) 调用以上函数就会直接返回 10 本身。但是,该函数声明只接收数值类型,无法用于其他类型
思考:any 能做到么?
function fn(value: any): any {
return value }
不能。它没有了类型保护,也没有严格限制返回值的类型和输入值的类型一致。
泛型,顾名思义,就是可以适用于多个类型,使用类型变量比如T帮助我们捕获传入的类型,之后我们就可以继续使用这个类型。
本质是参数化类型,通俗的将就是所操作的数据类型被指定为一个参数,这种参数类型可以用在类、接口和函数的创建中,分别成为泛型类,泛型接口、泛型函数
function fn<Type>(value: Type): Type {
return value }
// 上面的Type只是一个名字而已,可以改成其他的
function fn<T>(value: T): T {
return value }
语法:在函数名称的后面写 <>
(尖括号),尖括号中添加类型变量,比如此处的 Type。
const num = fn<number>(10)
const str = fn<string>('a')
<>
(尖括号),尖括号中指定具体的类型,比如,此处的 number泛型的格式?
泛型的作用?
function fn<T>(value: T): T {
return value }
// 省略 <number> 调用函数
let num = fn(10)
let str = fn('a')
<类型>
来简化泛型函数的调用下面的react代码对我们理解泛型有帮助
// js
const [num, setNum] = useState(10)
// ts, 用泛型指定类型
const [num, setNum] = useState<number>(10)
cont inputRef = useRef(null)
const onClick = () => {
console.log(inputRef.current.value) // ts在这里会报错
}
<input type="text" ref={inputRef} />
改正
cont inputRef = useRef<HTMLInputElement>(null)
const onClick = () => {
console.log(inputRef.current.value) // 正确
}
模拟实现useState的声明
// useState它接收一个任意类似的数据,返回一个数组。数组的第一个元素的类型与入参一致; 数组的第二个元素是一个函数,函数的入参类型和返回值类型与useState的入参一致
function useState() {
}
const arr1 = useState('123')
const arr2 = useState(123)
要求: 鼠标放上去有对应的提示
参考
function useState<T>(p:T): [T,(p:T)=>T] {
const t = (p: T):T => {
return p
}
return [p, t]
}
默认情况下,泛型函数的类型变量 T 可以代表多个类型,这导致无法访问任何属性
function fn<T>(value: T): T {
// 这里value. 不会有提示
console.log(value.length)// 这里会报错
return value
}
fn('a')
收缩类型
(缩窄类型取值范围)添加泛型约束收缩类型,主要有以下两种方式:
比如,:可以接收任意类型的数组。
将类型修改为 Type[]
(Type 类型的数组),因为只要是数组就一定存在 length 属性,因此就可以访问了
function fn<Type>(value: Type[]): Type[] {
console.log(value.length)
return value
}
比如,要求传入T类型必须要有length属性。
// 创建一个接口
interface ILength {
length: number }
// T extends ILength 添加泛型约束
function fn<T extends ILength>(value: T): T {
console.log(value.length)
return value
}
fn('abc') // Ok
fn([1,2,3]) // Ok
解释:
extends
关键字使用该接口,为泛型(类型变量)添加约束示例
function setElement<Type extends HTMLElement>(element:Type):Type {
console.log(element.innerText) // 这里的.会有语法提示
return element
}
泛型的类型变量可以有多个,并且类型变量之间还可以约束(比如,第二个类型变量受第一个类型变量约束)
比如,创建一个函数来获取对象中属性的值:
function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
return obj[key]
}
let person = {
name: 'jack', age: 18 }
getProp(person, 'name')
,
逗号分隔。keyof Type
实际上获取的是 person 对象所有键的联合类型,也就是:'name' | 'age'
// Type extends object 表示: Type 应该是一个对象类型,如果不是 对象 类型,就会报错
// 如果要用到 对象 类型,应该用 object ,而不是 Object
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) {
return obj[key]
}
getProperty({
a:1, b:2}, 'a')
掌握泛型接口的使用
在接口中使用泛型来使用,以增加其灵活性,增强其复用性
interface MyArray {
length: number,
push(n: number):void,
pop():number,
reverse():number[]
}
let obj: MyArray = {
id(value) {
return value },
ids() {
return [1, 3, 5] }
}
interface 接口名<类型变量> {
}
<类型变量>
,那么,这个接口就变成了泛型接口。实际上,JS 中的数组在 TS 中就是一个泛型接口。
const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach
const nums = [1, 3, 5]
// 鼠标放在 forEach 上查看类型
nums.forEach
泛型工具类型:TS 内置了一些常用的工具类型,来简化 TS 中的一些常见操作
说明:它们都是基于泛型实现的(泛型适用于多种类型,更加通用),并且是内置的,可以直接在代码中使用。 这些工具类型有很多,先来学习以下3个:
Partial<Type>
Readonly<Type>
Pick<Type, Keys>
Partial用来基于某个Type来创建一个新类型,新类型中所有的属性是可选的。
格式
type OldType = {}
type newType = Partial(OldType)
示例
用来构造(创建)一个类型,将 Type 的所有属性设置为可选。
type Props = {
id: string
children: number[]
}
type PartialProps = Partial<Props>
解释:构造出来的新类型 PartialProps 结构和 Props 相同,但所有属性都变为可选的。
type Props = {
id: string
children: number[]
}
type ReadonlyProps = Readonly<Props>
let props: ReadonlyProps = {
id: '1', children: [] }
// 错误演示
props.id = '2'
type Props = {
id: string
title: string
children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>
在react项目中使用ts
npx create-react-app my-app --template typescript
说明:在命令行中,添加 --template typescript
表示创建支持 TS 的项目
多了一个文件:tsconfig.json
。在项目根目录下可以看到它,它就是TS 的配置文件
后缀名有变化。在 src 目录中,文件的后缀有变化,由原来的 .js 变为 .ts
或 .tsx
.ts
ts 文件的后缀名.tsx
是在 TS 中使用 React 组件时,需要使用该后缀,只要文件中使用了jsx模板,后缀名必须叫tsx在 src 目录中,多了 react-app-env.d.ts
文件
.d.ts
类型声明文件,用来指定类型
// ts
.ts
.tsx
.d.ts
了解tsconfig文件的作用
tsconfig.json是typescript项目的配置文件,用于配置typescript
tsconfig.json配置文件可以通过 tsc --init
生成
说明:所有的配置项都可以通过鼠标移入的方式,来查看配置项的解释说明。
{
// 编译选项
"compilerOptions": {
// 生成代码的语言版本:将我们写的 TS 代码编译成哪个版本的 JS 代码
// 命令行: tsc --target es5 11-测试TS配置文件.ts
"target": "es5",
// 指定要包含在编译中的 library
"lib": ["dom", "dom.iterable", "esnext"],
// 允许 ts 编译器编译 js 文件
"allowJs": true,
// 跳过类型声明文件的类型检查
"skipLibCheck": true,
// es 模块 互操作,屏蔽 ESModule 和 CommonJS 之间的差异
"esModuleInterop": true,
// 允许通过 import x from 'y' 即使模块没有显式指定 default 导出
"allowSyntheticDefaultImports": true,
// 开启严格模式
"strict": true,
// 对文件名称强制区分大小写 Demo.ts
"forceConsistentCasingInFileNames": true,
// 为 switch 语句启用错误报告
"noFallthroughCasesInSwitch": true,
// 生成代码的模块化标准
"module": "esnext",
// 模块解析(查找)策略
"moduleResolution": "node",
// 允许导入扩展名为.json的模块
"resolveJsonModule": true,
// 是否将没有 import/export 的文件视为旧(全局而非模块化)脚本文件
"isolatedModules": true,
// 编译时不生成任何文件(只进行类型检查)
"noEmit": true,
// 指定将 JSX 编译成什么形式
"jsx": "react-jsx"
},
// 指定允许 ts 处理的目录
"include": ["src"]
}
掌握类型声明文件。
类型声明文件:用来为已存在的 JS 库提供类型信息
要点:
.d.ts中只能出现类型声明
.ts中可以有执行代码 + 类型声明
1. 第三方库
例如:
以 axios为例,为啥axios.get()有提示呢?
在package.json中有一个配置:
typings: "./index.d.ts"
这里有一个类型声明文件:
2. 给现有的.js编写,从而获得代码提示功能
const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach
lib.es5.d.ts
类型声明文件中lib.dom.d.ts
)了解第三方库没有类型声明文件的情况
axios
jquery, react…
做法:在https://www.typescriptlang.org/dt/search?search=中搜索
并在项目中安装。
安装的
如下两种场景需要提供类型声明文件
文件目录:
a.ts
b.ts
文件内容:
改进:
index.d.ts
a.ts
b.ts
index.d.ts
export interface Token {
token: string
refresh_token: string
}
a.js
import {
Token } from './index' // 必须省略.d.ts
function showToken(token: )
如果多个 .ts 文件中都用到同一个类型,此时可以创建 .d.ts 文件提供该类型,实现类型共享。
有一个ts项目,用到了.js文件。
demo.ts
utils/index.js
utils/index.js
let count = 10
let songName = '痴心绝对'
let position = {
x: 0,
y: 0
}
function add(x, y) {
return x + y
}
function changeDirection(direction) {
console.log(direction)
}
const fomartPoint = point => {
console.log('当前坐标:', point)
}
export {
count, songName, position, add, changeDirection, fomartPoint }
demo.ts
import {
add } from './utils' // 这里可以使用,但是,没有提示。
这里可以使用,但是,没有提示
demo.ts
utils/index.js
utils/index.d.ts
定义类型声明文件
declare let count:number
declare let songName: string
interface Position {
x: number,
y: number
}
declare let position: Position
declare function add (x :number, y: number) : number
type Direction = 'left' | 'right' | 'top' | 'bottom'
declare function changeDirection (direction: Direction): void
type FomartPoint = (point: Position) => void
declare const fomartPoint: FomartPoint
export {
count, songName, position, add, changeDirection, FomartPoint, fomartPoint
}
declare 关键字:用于类型声明,为其他地方(比如,.js 文件)已存在的变量声明类型,而不是创建一个新的变量。
文章浏览阅读68次。如何提升自己的实力?Step 1:梳理自己的知识对照下面这份学习大纲,梳理出自己的知识盲区,这份大纲里面的技术点完全对标P7岗的主流技术,因此这是一份很好的知识大纲笔记。Step 2:查漏补缺,夯实基础对照上面分享的学习路线梳理完自己的知识点后,就能够很清楚的知道自己的知识盲区,这样才能更加高效的学习,更快的往中高级程序员发展Java核心技术:(涵盖了JVM、并发编程、网络、分布式、微服务、数据库、数据结构与算法等等技术知识)Spring高级源码:Spring的重要性应该不用再多_java 重栽函数返回值
文章浏览阅读1k次。CSS语言:CSSSCSS确定/*source: http://webdesign.tutsplus.com/tutorials/bring-your-forms-up-to-date-with-css3-and-html5-validation--webdesign-4738*//* === Remove input autofocus webkit === */*:focus {outline..._html的页面右侧联系方式怎么
文章浏览阅读8.2k次,点赞5次,收藏41次。在学习过程中我们会感受到project的一系列操作真的很是方便,今天给大家介绍一下project2016中的资源管理部分(1) 创建资源列表、资源分配,成本分配的步骤和结果创建资源列表:打开资源工作表的方法:方法一:首先在甘特图区域右键,会出现如下所示的页面选择“资源分配表”,这样弹出来的页面就是资源分配表方法二:在工具栏中选择“视图”“资源工作表”也会弹出资源工作表页面如下图所示..._学习利用prroject创建资源列表、资源分配,成本分配及运作等,并熟悉各种查看资源任
文章浏览阅读1.5k次,点赞2次,收藏4次。进程间通信介绍进程间通信目的进程间通信发展匿名管道什么是管道站在文件描述符角度-深度理解管道匿名管道建立信道开始操作-管道基本特性 总结:命名管道命名管道创建一个命名管道编写一个命名管道创建管道服务器端读取客户端client写入 写端业务逻辑拓展功能总结_操作系统命名管道通信
文章浏览阅读1.8w次,点赞4次,收藏45次。matlab入门阶段,需要用matlab画时间序列图,比较简单,可能以后看起来会感觉很小儿科,但是一些细节上的操作害怕有些遗漏,特此记录。1、可以利用excel打开时间序列文件,截取需要操作的数据所在的区域,其实在matlab中也可以截取。2、在Input Data之后,将output Type修改一下3、Import Selection即可。4、因为输出的是列向量,所以要在下..._matlab画时序图
文章浏览阅读490次。转载自:https://blog.csdn.net/gfg156196/article/details/81118368 一套代码 iOS、Android 两端运行,Google Flutter 实在太强大。。“Flutter 可帮助你更容易、更快速的开发界面美观的移动应用。” — — Google Flutter 使用的是 Google 自己开发的网络编程语言——Dart 语..._android flutter教程
文章浏览阅读684次。痛苦是人类的属性,它能证明你还活着。_tail++ head-1
文章浏览阅读465次。与并不是升级版的版本一样的解法…利用STL中的 next_permutation 全排列算法可轻松得到答案注意判断的更改,详情见代码#include <iostream>#include <vector>#include <algorithm>using namespace std ;int main(){ int a , b , ..._三连击升级版c++
文章浏览阅读319次。经我校研究生院审核,确定我系复试名单如下。请各位上线考生务必在3月10日17点之前通过电子邮件方式确认参加复试,否则视为放弃。邮件发送至[email protected]。格式为:邮件主题:确认参加学术型/专业学位复试——姓名(考生编号)//具体哪一种复试请根据实际情况邮件内容:考生信息:考生编号、姓名、单科成绩、总分本人确认参加南京大学计算机科学与技术系3月14日至16日的学术型/专业学位..._南京大学计算机李重
文章浏览阅读1.6k次。1.单一程序:打印Hello源文件为hello.c无选项编译链接gcc hello.c将hello.c预处理、汇编、编译并链接形成可执行文件。这里未指定输出文件,默认输出为a.out选项 -o-o选项用来指定输出文件的文件名gcc hello.c -o hello选项 -Egcc -E hello.c -o hello.i将hello.c预处理输..._gcc编译案例
文章浏览阅读462次。0x00 Kernal与rstLinux kernal的文档使用rst结构化文本编写,阅读kernal\msm-4.1.4\README文档可知,可以通过make htmldocs生成可读的html那就试一试,果然报错了HOSTCC scripts/basic/fixdepDocumentation/Makefile:24: The 'sphinx-build' command was not ..._linux .rst 转换html
文章浏览阅读2.8w次,点赞27次,收藏55次。普通盒模型与怪异盒模型对比。box-sizing:content-box,box-sizing:border-box;对比。如何使用普通盒模型与怪异盒模型,如何让浏览器只支持标准盒模型。_当该元素的css属性box-sizing的值分别为content-box和border-box时,该元素在浏览