TypeScript学习笔记（技术胖b站视频）

环境搭建：

npm i -g typescript

npm i -g ts-node

报错console

Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include

解决方式：

npm install -g  @types/node

自定义类型：

interface Xiaojiejie {uname: string,age: number
}const xiaohong: Xiaojiejie = {uname: '小红',age: 18
}console.log(xiaohong.age)

ts静态类型分为基础静态类型和对象静态类型

// 基础静态类型
const count: number = 10
const name: string = 'cutaoki'
// 对象类型
// 对象
const Xiaojiejie: {name: string,age: number
} = {name: 'zxy',age: 20
}
// 数组
const arr: string[] = ['lzp', 'zxy']
// 类/构造函数
class Person{}
const ppl: Person
// 函数
const fn: () => string = () => 'couple'  //这里规定必须时一个函数并且返回值必须是字符串

ts在可以自动分析变量类型情况下无需类型注解;但是如果无法分析，则需要使用类型注解

let count = 123

如果函数传入参数为对象，给对象属性添加类型注解要注意写法

function add({num1, num2} : {num1 : number, num2 : number}) {return num1 + num2
}
const total = add ({num1 : 11, num2 : 12})

函数返回值类型注解

function getTotal(one : number, two : number): number {return one + two + ''
}
const total = getTotal(1, 2)

在getTotal函数申明时，限制了返回值类型，这样就会报错。需将函数内的 + ' ‘删掉即可

返回类型

void 表示没有任何返回值，即使是空字符串也会报错

never 表示永远不会有值的一种类型（比如抛出异常或根本就不会有返回值的类型或死循环）

any 表示可以是任何类型

数组类型注解

const numArr : number[] = [1, 2, 3]
const strArr : string[] = ['a', 'b', 'c']
const undArr : undefined[] = [undefined, undefined]
const mixArr : (number | string)[] = [1, 'b', 3]
const objArr : {name: string, age: number}[] = [  //也可以用定义好的接口、类型别名或类，形式如：Model1[]{name: 'taylor', age: 16},{name: 'crystal', age: 18}
]
//~~~~~~~~~~~~~~~~~~~~~
//type alias  类型别名
//接口与类型别名很相似，区别是类型别名可以直接赋值类型，而接口必须是对象
type Lady = {name: string, age: number}
const objArr : Lady[] = [{name: 'taylor', age: 16},{name: 'crystal', age: 18}
]
//~~~~~~~~~~~~~~~~~~~~~
//类
class Madam {name: string;age: number;
}
const objArr : Madam[] = [{name: 'taylor', age: 16},{name: 'crystal', age: 18}
]

上面如果用类作为数组前类型限制时，会报错Property has no initializer and is not definitely assigned in the constructo如图

错误原因：
在Typescript 2.7 release版本出来后，设置了一个新的编译器选项strictPropertyInitialization。
当本选项 strictPropertyInitialization:true 的时候，编译器会确保一个类中所有的属性都已经初始化，如果没有，那么在属性构建的过程中就会抛出错误。

解决办法（来自https://www.jianshu.com/p/cec1add8ddf0）：

//1
class Model1 {name!: string;age!: number;
}
const objArr: Model1[] = [{name: 'taylor', age: 16},{name: 'crystal', age: 18}
]//2 在构造器里面为变量赋予一个默认值
class Model1 {name: string;age: number;constructor() {this.name = '',this.age = 0}
}
const objArr: Model1[] = [{name: 'taylor', age: 16},{name: 'crystal', age: 18}
]//3
class Model1 {name: string;age: number;constructor(name: string, age: number) {this.name = name,this.age = age}
}
const objArr: Model1[] = [{name: 'taylor', age: 16},{name: 'crystal', age: 18}
]//4
class Model1 {constructor(public name: string, public age: number) {}
}const objArr: Model1[] = [{name: 'taylor', age: 16},{name: 'crystal', age: 18}
]

元组(类似固定成员类型顺序的数组，完美配合CSV使用)

const tuple: [string, number, string] = ['crystal', 18, 'actor']

元组也可以作为数组的成员类型注解

const tupleArr: [string, number, string][] = [['crystal', 18, 'actor'],['taylor', 16, 'singer'],['yang', 20, 'dancer'],
]

类（与es6的类很相似）

子类中调用父类的属性或方法，在前面加上 super. ，例如父类有个say方法，在子类想调用就要用super.say()

三个关键字：public 默认，允许类的内部和外部使用

private 只允许在类的内部使用

protected 在私有的范围之外还可以在子类中使用，即继承自这个类的子类内部

对于private属性，可以用get和set暴露给类的外部

class Person {constructor(private _age: number) {}get getAge() {return this._age-3}set setAge(age: number) {this._age = age + 5}
}const someone = new Person(18)
someone.getAge()
someone.setAge(30)
someone.getAge()

还有一个关键字static，在属性或者方法前面加上static后就是静态属性/静态方法，可以不用创建实例，而通过类点静态属性/静态方法调用。

还有一个关键字readonly，表示只读属性，一旦赋值就没法修改。

class Person {public readonly _name: stringconstructor(name: string) {this._name = name}
}const crystal= new Person('cc')
console.log(crystal._name)

如果子类有构造函数constructor，子类必须调用super方法

class Person {constructor(public name: string){}
}class Teacher extends Person {constructor(public age: number) {super('cutaoki')  // 如果父类没有constructor函数，就不用传参}
}const xiaocang = new Teacher(28)
console.log(xiaocang.name + xiaocang.age)

抽象类

abstract class Girl {abstract job()  //抽象类中的方法必须是抽象方法，而且不需要大括号写具体逻辑//抽象类的子类必须实现抽象方法
}
calss Crystal extends Girl {job() {console.log('action')}
}
calss Taylor extends Girl {job() {console.log('Saw you')}
}

配置文件——tsconfig.json

在文件根目录下终端使用指令tsc -init，就会生成默认配置文件tsconfig.json

tsc -init

ts-node 指令等于 tsc demo.ts 加 node demo.js

但是ts-node遵循配置文件，tsc demo.ts不会执行默认配置文件

直接执行tsc就会执行默认配置文件

默认会将所有ts文件都转化为js文件，如果按需转化，则可以在配置文件中加入include项，数组中加入要转化的文件名即可，也可以用exclude排除不转化的文件

"include": ["demo.ts", "demo2.ts"]
//"exclude": ["demo3.ts"]

与include共呢个相似的一个项：files，用法也几乎一样

在配置文件的compilerOptions中常用项的功能了解：

"compilerOptions": {"removeComments": true  //删除注释"strict": true  //严格按照ts的书写和语法要求，就是ts的严格模式"noImplicitAny": true  //如果一个变量没有类型注释，则类型推断为any，此项打开后不用再为该变量写类型注释也不会报错。"noImplicitAny"仅在"strict"不生效情况下可以使用"strictNullChecks": false  //如果为true，ts文件中不允许出现null。仅在"strict"不生效情况下可以使用"outDir": "./build"  //指定ts转化生成的js文件的存放位置"rootDir": "./src"  //要转化的ts文件的位置"sourceMap": true  //生成js文件同时生成一个.map文件，里面有生成文件与源文件的一些信息"noUnusedLocals": true  //打开的话如果检测到有未使用的变量则会在打包时报错提示"noUnusedParameters": true  //打开的话如果检测到有未使用的方法则会在打包时报错提示}

联合类型与类型保护/类型守护

interface Waiter {anjiao: boolean;say: () => {}
}
interface Teacher {anjiao: boolean;skill: () => {}
}function judgeWho(a: Waiter | Teacher) {//传入参数是多种就是联合类型//因为不确定a是否有say方法，直接执行a.say()会报错//方法一：断言if(a.anjiao) {(a as Teacher).skill()} else {(a as Waiter).say()}
}function judgeWho2(a: Waiter | Teacher) {//方法二if('skill' in a) {a.skill()} else {a.say()}
}//方法三
function add(a: number | string, b: number | string) {if(typeof a === 'number' && typeof b === 'number') {return `${a}${b}`}return 0
}//方法四
class numObj {count: number
}
//instance只能用在类上，不然会报错
function addObj(a: object | numObj, b: object | numObj){if(a instanceof numObj && b instanceof numObj) {return a.count + b.count}return 0
}

枚举

enum Status {a,b,c
}
//枚举默认给成员从0开始排序
console.log(Status.a)  //0
console.log(Status.b)  //1
console.log(Status.c)  //2
//也可以反向查询
console.log(Status[1])  //b//枚举可以自定义排序起始编号
enum Status {a = 5,b,c
}
console.log(Status.a)  //5
console.log(Status.b)  //6
console.log(Status.c)  //7

泛型

//泛型在真正使用时才确定其类型
function join<T>(a: T, b:T) {return `${a}${b}`
}
join<number>(1, 2)//泛型中数组的使用
function myFun<T>(params: T[]) {  //还有一种写法：function myFun<T>(params: Array<T>)return params;
}
myFun<string>(['abc', '123'])//多个泛型的使用情况
function join<T, P>(a: T, b: P) {return `${a}${b}`
}
join<string, number>('abc', 123)
//泛型支持类型推断，所以这里也可以写成join('abc', 123)
//泛型的类型推断不利于代码理解，不建议使用

类中使用泛型

class SelectMark<T extends number | string> {  //泛型约束，泛型的类型只能是二者之一constructor(private marks: T[]) {}getMark(index: number): T {return this.marks[index]}
}
const selectMakr = new SelectMark<string>(['a','b','c'])
console.log(selsecMark.getMark(1))

泛型的继承

interface Mark {name: string
}class SelectMark<T extends Mark> {constructor(private marks: T[]) {}getMark(index: number): string {return this.marks[index].name}
}
const selectMark = new SelectMark([{name: 'taylor'},{name: 'crystal'},{name: 'cutaoki'}
])
console.log(selectMark.getMark(1))

命名空间，减少全局变量污染，实现基本的封装

namespace Home{class Header {constructor() {const elem = document.createElement('div')elem.innerText = 'This is Header'document.body.appendChild(elem)}}class Content {constructor() {const elem = document.createElement('div')elem.innerText = 'This is Content'document.body.appendChild(elem)}}class Footer {constructor() {const elem = document.createElement('div')elem.innerText = 'This is Footer'document.body.appendChild(elem)}}export class page{constructor() {new Header()new Content()new Footer()}}
}

子命名空间

namespace Components{export namespace SubComponents{export class Test{}}
}

TypeScript学习笔记（技术胖b站视频）相关推荐

TypeScript学习笔记3：运算符
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录运算符 ...
TypeScript学习笔记2：数据类型
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录数据类型 ...
TypeScript学习笔记1：变量赋值及书写方式
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录变量赋值 ...
Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
Typescript 学习笔记一：介绍、安装、编译
前言整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
typeScript学习笔记day01——小肉包
typeScript学习笔记 class1: 一.javaScript(js)的优缺点 javaScript是在微软公司和网景公司之间爆发的浏览器大战期间,由网景公司的Brendan Eich(布兰登 ...
typeScript学习笔记day02——小肉包
typeScript学习笔记 class3 : 2021.02.24 一.TS编译选项自动编译文件编译文件时,使用-w指令后,YS编译器会自动监视文件变化,并在文件发生变化时对文件进行重新编译. ...
非常不错的学习网站——技术胖
非常不错的学习网站--技术胖网址: www.jspang.com 转载于:https://www.cnblogs.com/tian-long/p/8743851.html
技术胖1-4季视频复习— (看视频笔记)
输入技术胖视频1-4季总记不太住的模板的使用,template component 的注册.传值.父子组件 methods中的 $event nextTick 使用是在哪一步前,哪一步后? 内 ...

TypeScript学习笔记（技术胖b站视频）

TypeScript学习笔记（技术胖b站视频）相关推荐

最新文章

热门文章