文章目录

简介
为什么会有TypeScript？
JavaScript 与 TypeScript 的区别
TypeScript优势
TypeScript安装、编译
配置TS开发工具 Vscode自动编译 .ts文件
三、TypeScript数据类型及理解
四、函数
- 函数声明法
- 匿名函数法
- 没有返回值
- 方法传参---可选参数
- 方法传参---设置默认参数
- 剩余传参---即 es6 中的 ... 语法
- 函数重载
- 箭头函数---和 es6 一样
类
- 基本语法
- 类的继承
- 修饰符
- Get/Set访问器
- 静态属性
接口
- 基本语法
- 继承接口
泛型
- 介绍
- 泛型函数
- 泛型类
- 泛型接口

简介

TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言

为什么会有TypeScript？

JavaScript 只是一个脚本语言，并非设计用于开发大型 Web 应用，JavaScript 没有提供类和模块的概念，而 TypeScript 扩展了 JavaScript 实现了这些特性。TypeScript 主要特点包括：

TypeScript 是微软推出的开源语言，使用 Apache 授权协议
TypeScript 是 JavaScript 的超集.
TypeScript 增加了可选类型、类和模块
TypeScript 可编译成可读的、标准的 JavaScript
TypeScript 支持开发大规模 JavaScript 应用
TypeScript 设计用于开发大型应用，并保证编译后的 JavaScript 代码兼容性
TypeScript 扩展了 JavaScript 的语法，因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
TypeScript 文件扩展名是 ts，而 TypeScript 编译器会编译成 js 文件
TypeScript 语法与 JScript .NET 相同
TypeScript 易学易于理解

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

TypeScript优势

解决痛点
TypeScript的设计解决了JavaScript的“痛点”：弱类型和没有命名空间；这导致程序很难模块化，不适合开发大型程序。

语法提示
编写程序时，编辑器将提供精准的语法提示，以帮助大家更方便地实践面向对象的编程。

容易上手
TypeScript的一个设计亮点，是它并没有抛弃JavaScript的语法另起炉灶，而是做成了JavaScript的超集，任何合法的JavaScript的语句在TypeScript下都是合法的，且沿用了JavaScript的使用习惯和惯例，可以说学习成本很低。

TypeScript安装、编译

npm install -g typescript

或者

cnpm install -g typescript

或者

yarm global add typescript

查看版本：

tsc -v

运行：

tsc helloworld.ts

注意：如果电脑上没有安装过yarn,请记得先安装

配置TS开发工具 Vscode自动编译 .ts文件

tsc --init

生成配置文件
2. 然后取消生成的 tsconfig.json 中的 “outDir”，改为如下：

3. 点击终端，选择typescript.选择监视选项

4. 可以开始正常敲代码

三、TypeScript数据类型及理解

布尔类型（boolean）
数字类型（number）
字符串类型（string）
数组类型（array）
元组类型（tuple）
枚举类型（enum）
任意类型（any）
null 和 undefined（是never 数据类型的子类型）
void 类型
never 类型：
a. 表示的是那些永不存在的值的类型，never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never 类型（除了never本身之外）。即使 any也不可以赋值给never。
b. 是其他类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
c. 返回never的函数必须存在无法达到的终点

四、函数

函数声明法

function run():string{return 'run'
}

匿名函数法

let fun2=function():number{return 2;
}
alert(fun2());let getInfo1=function (name:string,age:number):string {return `${name}--${age}`
}
alert(getInfo1('zhangdan',3434))

没有返回值

function getInfo3(name:string,age:number):void {console.log(`${name}--${age}`)
}
getInfo3('lixiaolong',3434)

方法传参—可选参数

注意：可选参数必须放在必须参数的后面

// es5中的实参和形参可以不一样，但是ts中必须一样，否则就需要配置可选参数
function getInfo4(name?:string,age?:number):string {return `${name}--${age}`
}
alert(getInfo4('3453'))
alert(getInfo4('',34))

方法传参—设置默认参数

用户可以不传递这个参数或传递的值是undefined
注意：与普通可选参数不同的是，带默认值的参数不需要放在必须参数的后面。 如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值来获得默认值
function getInfo5(name?:string,age:number=20):string {return `${name}--${age}`
}
alert(getInfo5('3453453',))

剩余传参—即 es6 中的 … 语法

函数重载

// Java中的重载是指两个或两个以上同名函数，但是他们的参数不一样，这时会出现函数重载的情况
// ts为了兼容es5 es6,重载方法和Java有区别// 在es5中，如果出现同名函数，则下面的会替换上面的方法
// function name(params:any):any {// }
// function name(params:any,config:any) {// }// ts中
function getInfo6(names:string):string;
function getInfo6(age:number):string;
function getInfo6(str:any):any{if (typeof str==='string') {return names}else{return str}
};
alert(getInfo6(20))

箭头函数—和 es6 一样

setTimeout(() => {alert(3333)
}, 1000);

类

基本语法

// 通过class创建类
class Animal {// 类的属性name: string;// 类的构造器constructor(name: string) {this.name = name;}// 类的方法sayHello():void{alert("hello animal:"+this.name);}
}
// 实例化类
var tom = new Animal("tom");
tom.sayHello();

类的继承

// 通过class创建类
class Animal {// 类的属性name: string;// 类的构造器constructor(name: string) {this.name = name;}// 类的方法sayHello(): void {alert("hello animal:" + this.name);}
}// 继承Animal
class Cat extends Animal {// 重写方法sayHello(): void {alert("hello cat:" + this.name);}
}class Dog extends Animal {sayHello(): void {alert("hello dog:" + this.name);}
}

修饰符

class Animal {private name: string; // 这里把name修饰符改为privateconstructor(name: string) {this.name = name;}sayHello(): void {alert("hello animal:" + this.name);}
}class Cat extends Animal {sayHello(): void {alert("hello cat:" + this.name); //这里会报错，因为无法引用父类private修饰的属性}
}class Dog extends Animal {sayHello(): void {alert("hello dog:" + this.name); //这里会报错，因为无法引用父类private修饰的属性}
}

Get/Set访问器

class Animal {private name: string;get name(): string { //通过get和set解决子类不能引用父类private修饰的属性的问题return this.name;}set name(name: string) {this.name = name;}constructor(name: string) {this.name = name;}sayHello(): void {alert("hello animal:" + this.name);}
}class Cat extends Animal {sayHello(): void {alert("hello cat:" + this.name); }
}class Dog extends Animal {sayHello(): void {alert("hello dog:" + this.name); }
}

静态属性

class Table {static width: Number = 100;static height: Number = 50
}var width: Number = Table.width;

接口

基本语法

interface Graphic {width: Number;height: Number;
}class Square implements Graphic {width: Number;height: Number;constructor() {this.width = 100;this.height = 100;}constructor(width: Number, height: Number) {this.height = height;this.width = width;}
}

继承接口

interface Graphic {width: Number;height: Number;
}interface PenStroke {penWidth: Number;
}interface Square extends Graphic, PenStroke {sideLength: number;
}

泛型

介绍

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
通俗理解：泛型就是解决类、接口、方法的复用性以及对不特定数据类型的支持

泛型函数

function getDate<T>(value: T): T {console.log('3453453453');return value;
}
getDate<number>(345345);   // 3453453453
getDate<string>('String')  // 3453453453function getDate1<T>(value: T): any {console.log(value);  // 345345return value + '345345345';
}
alert(getDate1<number>(345345));   // 345345345345345

泛型类

class Minclass<T>{public list: T[] = []add(value: T) {this.list.push(value)}min(): T {let minest = this.list[0];for (let i = 0; i < this.list.length; i++) {if (minest > this.list[i]) {minest = this.list[i]}}return minest}
}let ert = new Minclass<number>()
ert.add(34)
ert.add(89)
ert.add(56)
ert.add(67)
ert.add(23)
ert.add(16)
ert.add(79)
alert(ert.min())let strs = new Minclass<string>()
strs.add('bc')
strs.add('dfgd')
strs.add('erf')
strs.add('zdf')
strs.add('abcd')
alert(strs.min())

泛型接口

// 写法一
interface configFn {<T>(confg: T): T
}
let getData: configFn = function <T>(value: T): T {return value;
}
getData<number>(34)// 写法二
interface config4<T> {(config: T): T
}
function getData2<T>(value: T): T {return value;
}
let test: config4<string> = getData2
test('sdfsdf')

TypeScript学习日记相关推荐

RUST直接升钢指令_[译]参照TypeScript学习Rust-part-1
[译]参照TypeScript学习Rust-1 · 前端在线regx.vip 对于前端,笔者比较认可Rust作为前端开发技术栈投资的,本文系列翻译旨在分享.学习Rust这门语言. Rust常常被认为 ...
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:数据类型文章目录变量赋值 ...
java的圆周率_java学习日记，圆周率的打印
前段时间看到听说学习java每天写技术贴会对自己提升很大,我现在学习java也就2个周,算不上技术贴,就写写学习日记吧. 昨天师傅给我出了一道题,说是试试用java打印圆周率. 刚开始我的思路是,如果 ...
GPU（CUDA）学习日记（十一）------ 深入理解CUDA线程层次以及关于设置线程数的思考
GPU(CUDA)学习日记(十一)------ 深入理解CUDA线程层次以及关于设置线程数的思考标签: cuda存储线程结构网格 2012-12-07 16:30 6298人阅读评论(4)收藏举 ...
GPU（CUDA）学习日记（十三）------ CUDA内存简介
GPU(CUDA)学习日记(十三)------ CUDA内存简介标签: cuda存储线程结构 2012-12-07 16:53 2902人阅读评论(0)收藏举报分类: GPU(16) CUDA ...
GPU（CUDA）学习日记（九）------ CUDA存储器模型
GPU(CUDA)学习日记(九)------ CUDA存储器模型标签: cuda存储bindingcache编程api 2012-09-27 10:53 1677人阅读评论(1) 收藏举报分类 ...
Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
typescript 接口 java_[Java教程]【TypeScript】TypeScript 学习 2——接口
[Java教程][TypeScript]TypeScript 学习 2--接口 0 2015-06-19 12:00:28 在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScr ...

TypeScript学习日记

文章目录

简介

为什么会有TypeScript？

JavaScript 与 TypeScript 的区别

TypeScript优势

TypeScript安装、编译

配置TS开发工具 Vscode自动编译 .ts文件

三、TypeScript数据类型及理解

四、函数

函数声明法

匿名函数法

没有返回值

方法传参—可选参数

方法传参—设置默认参数

剩余传参—即 es6 中的 … 语法

函数重载

箭头函数—和 es6 一样

类

基本语法

类的继承

修饰符

Get/Set访问器

静态属性

接口

基本语法

继承接口

泛型

介绍

泛型函数

泛型类

泛型接口

TypeScript学习日记相关推荐

最新文章

热门文章