一份不可多得的TypeScript系统入门整理

Github来源： | 求星星 ✨ | 给个❤️关注，❤️点赞，❤️鼓励一下作者

回看笔者往期高赞文章，也许能收获更多喔！

• JS葵花宝典秘籍笔记，为你保驾护航金三银四
• TypeScript趁早学习提高职场竞争力
• 一个合格的初级前端工程师需要掌握的模块笔记
• 前端模拟面试字数过23477万内容
• Vue.js笔试题解决业务中常见问题
• 【初级】个人分享Vue前端开发教程笔记
• 长篇总结之JavaScript，巩固前端基础
• 前端面试必备ES6全方位总结
• 达达前端个人web分享92道JavaScript面试题附加回答
• 【图文并茂，点赞收藏哦！】重学巩固你的Vuejs知识体系
• 【思维导图】前端开发-巩固你的JavaScript知识体系
• 14期-连肝7个晚上，总结了计算机网络的知识点！（共66条）
• 这是我的第一次JavaScript初级技巧
• localStorage和sessionStorage本地存储
• HTML5中的拖放功能
• 挑战前端知识点HTTP/ECMAScript
• 必学必会-音频和视频
• 前端170面试题+答案学习整理（良心制作）
• 前端HTML5面试官和应试者一问一答
• 哪吒闹海，席卷图文学习前端Flex布局
• 腾讯位置服务开发应用
• 【进阶】面试官问我Chrome浏览器的渲染原理（6000字长文）
• 面试官一上来就问我Chrome底层原理和HTTP协议（万字长文）
• 熬夜总结了 “HTML5画布” 的知识点
• this/call/apply/bind（万字长文）
• HTTP/HTTPS/HTTP2/DNS/TCP/经典题
• 执行上下文/作用域链/闭包/一等公民
• Web页面制作基础
• 学习总结之HTML5剑指前端（建议收藏，图文并茂）

❤️关注+点赞+收藏+评论+转发❤️

点赞、收藏和评论

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

我们下期见！

文章持续更新，可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 https://www.1024bibi.com 已经收录

github收录，欢迎Star：https://github.com/webVueBlog/WebFamily
希望能够帮助更多的小伙伴。加我😚即可交流问题（不是大佬，互相学习，创造良好的学习环境）。以下哪些你不懂呢？

TypeScript开发

全局安装typescript，使用安装命令可以使用`npm`也可以使用`yarn`：

npm install typescript -g

yarn global add typescript

demo.ts

function jeskson() {
 let web: string = "hello world"
 console.log(web)
}

jeskson()

// tsc
tes demo.ts
node demo.js

npm install -g ts-node

数据类型

- TS的数据类型

// ES6的数据类型：
基本数据类型：Boolean,Number,String,Symbol,undefined,null

引用类型：Array,Function,Object

// TS的数据类型，增加
void,any,never,元组,枚举,高级类型

类型注解：

let hello : string = 'Hello TypeScript'

原始类型

let bl: boolean = true
let num: number = 123
let str: string = "123"

数组泛型

let arrType: Array<number> = [0, 1, 2, 3, 5];
let arrType1: Array<string> = ['0', '1', '2', '3', '5'];
let arrType2: Array<any> = [1, '1', 2, 's', true];

用接口表示数组

interface Person{
  name: string;
  age: number;
}
interface NumberArray {
       [index:number]: Person;
}
let arrType3: NumberArray = [{name:'张三'，age: 20}]
let arrType4：Array<Person> = [{name:'张三'，age: 20}]
let arrType5：Person[] = [{name:'张三'，age: 20}]

类数组

类数组（Array-like Object）不是数组类型:

function sum() {
    let args: number[] = arguments;
}

// index.ts(2,7): error TS2322: Type 'IArguments' is not assignable to type 'number[]'.
//   Property 'push' is missing in type 'IArguments'.

function sum() {
    let args: IArguments = arguments;
}

元组类型

let tuple: [number, string] = [0, '1']
// 此时,如果改变数组的元素类型或添加元素数量,编辑器都会报错
// TS允许向元组中使用数组的push方法插入新元素(但不允许访问)

函数

函数声明`（Function Declaration）和函数表达式（Function Expression）`

// 函数声明（Function Declaration）
function sum(x, y) {
    return x + y;
}

// 函数表达式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

// 函数声明的类型定义
function sum(x:number,y:number):number{
       return x+y
}
// 输入多余的或者少于要求的参数，是不被允许的

// 函数表达式
let mySun = function(x:number,y:number):number{
      return x + y
}

用接口定义函数的形状

interface SearchFunc{
       （source:string,subString:string）:boolean
}

let mySearch:SearchFunc;
mySearch = function(source: string,subString:string){
     return source.search(subString) !== -1
}

与接口中的可选属性类似，我们用 ? 表示可选的参数：

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('dada', 'Cat');
let tom = buildName('dada');

参数默认值

function buildName(firstName:string,lastName:string='Cat'){
    return firstName + ' ' + lastName;
}
let tomcat = buildName('dada', 'Cat');
let tom = buildName('dada');

剩余参数

// 可以使用 ...rest 的方式获取函数中的剩余参数

function push(array,...items){
     items.forEach(function(item){
        array.push(item)
　　})
}

let a = [];
push(a,1,2,3)


function push(array:any[],...items:any[]){
     items.forEach(function(item){
         array.push(item);
    })
}

let a = []
push(a,1,2,3)

重载

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理

function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

使用重载定义多个 `reverse` 的函数类型：

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

静态类型

let count : number = 1;

interface dada {
 uname: string,
 age: number
}

const jeskson :dada = {
 uname: 'jeskson',
 age: 12
}

对象类型：

const gege: {
 name: string,
 age: number
} = {
 name: 'jeskson',
 age: 12
}

const person : string [] = ['dada', 'jeskson', '掘金魔王哪吒']

class Person{}
const dada : Person = new Person()

const dada :()=>string = ()=>{return 'jeskson'}

静态类型：对象类型，数组类型，类类型，函数类型

类型注解与类型推断

局部变量：

let count : number;
count=12;

如果ts能够自动分析判断变量类型，就不需要，否则就需要使用类型注解。

函数参数和函数的返回类型的注解

function getNum(a : number, two : number) : number {
 return a + b
}
const total = getNum(1,2)

never

function errorFunction() : never {
 throw new Error()
 console.log('hello world')
}

function forNever() : never {
 while(true) {}
 console.log('hello world')
}

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

数组类型注解

const numberArr : number[] = [1,2,3]

const stringArr : string[] = ['a','b','c']

const undefinedArr : undefined[] = [undefined, undefined]

const arr : (number | string)[] = [1,'string',2]

const dada : {name:string,age:number}[] = [
 {name:'jeskson',age:12},
 {name:'魔王哪吒',age:12},
]

// 类别别名
// type alias
type typeMy = {name:string,age:number}

const dada : typeMy[] = [{name:'jeskson',age:12}]

元组

加强版：

const dada : (string | number)[] = ['魔王哪吒','jeskson',12]

// 不常用-元组
const dada1 : [string,string,number] = ["jeskson",12,"dadaqianduan"]

接口

interface dada {
 name: 'jeskson';
 age: 12;
 work ?: string;
 say():string;
}

class obj implements dada {
 name="dada"
 age=12
 work="it"
 say(){
  return "dadaqianduan"
 }
}

const selected = (person: dada)=>{
}

// obj.name && console.log(obj.name)

类

class Da {
 content = "掘金魔王哪吒"
 sayHello() {
  return this.content
 }
}

consot da = new Da()
console.log(da.sayHello())

class Person {
 name: string;
}
const person = new Person()
person.name = "jeskson"
console.log(person.name)

类的构造函数

class Person {
 public name : string;
 constructor(name:string){
  this.name = name
 }
}

// 优化
class Person {
 constructor(public name:string){}
}
class Teacher extends Person{
 constructor(public age:number){
  super('jeskson')
 }
}

const person = new Person('jeskson')

const dada = new Teacher(12)
console.log(dada.age)
console.log(person.name)

Getter,Setter,static

class Da {
 constructor(private _age:number){}
 get age() {
  return this._age
 }
 set age(age:number) {
  this._age = age
 }
}

const dada = new Da(12)

class Da{
 static sayHello() {
  return "魔王哪吒"
 }
}
console.log(Da.sayHello())

只读属性：

class Person{
 public readonly _name:string
 constructor(name:string) {
  this._name = name
 }
}
const person = new Person('jeskson');
console.log(person.name);

抽象类，使用继承抽象类：

abstract class Da {
 abstract say()
}
class da extends Da {
 say() {
  console.log('jeskson')
 }
}

`tsc -init`生成`tsconfig.json`文件：

`compilerOptions`配置项

"files": []

removeComments 为 true，去掉注释
strict为true，书写规范

// 允许你的注解类型any不用特意标明
"noImplicitAny": true

// 不允许有null值出现
"strictNullChecks": true

// 入口文件
"rootDir": "./src"
// 编译好的文件
"outDir": "./build"

// Generates corresponding '.map' file
// 信息文件，存储位置信息
"sourceMap": true

// Report errors on unused locals
"noUnusedLocals": true

联合类型和类型保护

interface Teacher{
 teacher: boolean;
 say:()=>{}
}
interface Student{
 teacher: boolean;
 say:()=>{}
}

//联合类型，类型保护，类型断言
function da(study: Teacher | Student) {
 if(study.teacher) {
  (study as Teacher).say();
 }else{
  (study as Student).say();
 }
}

泛型

function fn<T>(params: Array<T>){
 return params;
}
fn<string>(["12","123"]);

使用：

class Select {
 constructor(private da: string[]) {}
 getDa(index:number):string{
  return this.da[index];
 }
}
const dada = new Select(["1","2","3"]);
onsole.log(dada.getDa(1));

class Select<T> {
 constructor(private da: T[]){}
 getDa(index: number): T{
  return this.da[index];
 }
}

interface Girl {
 name: string;
}
class SelectGirl<T extends Girl> {
 constructor(private girls: T[]) {}
 getGirl(index: number): string {
  return this.girls[index].name;
 }
}

class SelectGirl<T extends number | string> {
 constructor(private girls: T[]) {}
 getGirl(index: number): T {
  return this.girls[index];
 }
}

NameSpace

`npm init -y`生成`package.json`文件

`tsc -init`生成`tsconfig.json`文件

安装VsCode编辑器：

interface Person {
 name: string
}
const teacher: Person = {
 name: 'jeskson'
}

基础类型和对象类型

// 基础类型 null, undefined, symbol, boolean, void
const count:number = 12;
const name:string = '掘金魔王哪吒';

// 对象类型
const teacher: {
 name: string;
 age: number;
} = {
 name: 'jeskson',
 age: 12
};

const nums:number[] = [1,2,3]

const goTotal: ()=>number = () => {
 return 123;
}

类型注解和类型推断

// type annotation 类型注解

let count:number;
count=123;

// type inference 类型推断，TS会自动的尝试分析变量的类型

// 推动不出来，就自己加
function getTotal(firstNumber:number, secondNumber:number) {
 return firstNumber + secondNumber;
}
const total = getTotal(1,2);

函数相关类型

// 实战
function getTotal(firstNumber:number, secondNumber:number):number {
 return firstNumber + secondNumber;
}
const total = getTotal(1,2);

// void这个函数不应该有返回值
function sayHello(): void {
 console.log('hello');
}

// never 表示这个函数永远不能执行完成
function errorEmitter(): never {
 while(true){} // 或抛出异常
}

function add({first,second}:{first:number;second:number}):number{
 return first+second;
}
function getNumber({first}:{first:number}){
 return first;
}

小结：

// 基础类型 boolean,number,string,void,undefined,symbol,null

let count: number;
count = 12;

// 对象类型 {},Class,function,[]
const fun = (str:string) => {
 return parseInt(str,10);
}
const fun1: (str:string)=>number = (str) => {
 return parseInt(str,10);
}

const date = new Date();

数组和元组

const arr: (number|string)[] = [1,'2',3];
const stringArr: string[] = ['a','b','c'];
const undefinedArr:undefined[] = [undefined];

const objectArr: {name:string,age:number}[] = [{
 name: '掘金魔王哪吒',
 age: 12
}]

// type alias 类型别名
type User = {name:string;age:number};
const objectArr: User[] = [{
 name: '掘金魔王哪吒',
 age: 12
}]

class Teacher {
 name: string;
 age: number;
}
const objectArr: Teacher[] = [
 new Teacher();
 {
  name: 'jeskson',
  age: 12
 }
];

元组

const teacherInfo: [string, string, number] = ['dadaqianduan','1024bibi.com',12];

Interface接口

interface Person {
 // readonly name: string;
 name: string;
 age?: number;
}
const getPersonName = (person: Person): void => {
 console.log(person.name);
};
const setPersonName = (person: Person, name: string): void=>{
 persono.name = name;
};
const person = {
 name: '掘金魔王哪吒',
 age: 12
};
getPersonName(person);

类的定义与继承

class Person {
 name='掘金魔王哪吒';
 getName() {
  return this.name;
 }
}
class Teacher textends Person {
 getTeacherName() {
  return 'teacher';
 }
 getName() {
  return '1024bibi.com' + super.getName()
 }
}

const teacher = new Teacher();
// 重写，字类可以重写父类的东西

类中的访问类型和构造器

// private protected public 
class Person {
 public name: string;
 sayHi() {
  console.log('1024bibi.com')
 }
}
const person = new Person();
person.name = '掘金魔王哪吒'
console.log(person.name);

// public 允许我在类的内外被调用
// private 允许在类内被使用
// protected 允许在类内以及继承的子类中是使用

• constructor

class Person {
 public name: string;
 constructor(name: string) {
  this.name = name;
 }
}

const person = new Person('dadaqianduan');
console.log(person.name);

// 简化写法
class Person {
 constructor(public name: string) {}
}

class Teacher extends Person {
 constructor(public age:number) {
  super('dadaqianduan');
 }
}

// 如果父类没有构造器，也使用空的 super()

静态属性，Setter和Getter

class Person {
 constructor(private name: string) {}
 get getName() {
  return this.name;
 }
}

const person = new Person('dadaqianduan');
console.log(person.getName);

class Person {
 constructor(private _name: string) {}
 get name() {
  return this._name;
 }
 set name(name: string) {
  this._name = name;
 }
}

设计模式：单例模式，一个类只允许通过这个类，获取一个单例实例

class Demo {
 private static instance: Demo;
 private constructor(public name:string) {}

 static getInstance(name: string) {
  if(!this.instance) {
   this.instance = new Demo('1024bibi.com');
  }
  return this.instance;
 }
}

//const demo1 = new Demo();
//const demo2 = new Demo();

const demo1 = Demo.getInstance();

抽象类

抽象类只能被继承，不能被实例化

abstract class Da {
 width: number;
 getType() {
  return 'dadaqianduan';
 }
 abstract getAra(): number;
}

npm init -y

生成package.json文件：

{
 "name": "TypeScript",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test: "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

tsc --init
// Successfully created a tsconfig.json file

// npm uninstall ts-node -g

npm install -D ts-node

npm install typescript -D