TypeScript是由微软开发的一个能在Node.js上运行的开源编程语言。在ES6的基础上演化并吸收JavaScript类别和接口的一些特性。适合开发大型应用，可以编译成纯JavaScript，可在任何浏览器上运行。
更多使用方法前往：
https://www.tslang.cn/docs/handbook/basic-types.html
先了解几个名词：
动态语言：在运行期间才去做类型检查的语言。该语言会在第一次赋值给变量时，在内部将数据类型记录下来。
静态语言：静态语言和动态语言相反，它的数据类型是在编译期间检测的。(在写程序时要声明所有变量的数据类型)
强类型语言：当变量被指定了某个数据的类型，如果不经过强制转换，那么就永远是这个类型。
弱类型语言：一个变量可以赋不同数据类型的值。
一、安装TypeScript
npm install -g typescript
生成tsconfig.json文件，注意是 - -
tsc --init
安装后可以使用TypeScript编译器，tsc，可将结果生成js文件。
编译单个TypeScript文件，命令如下：
(编译成功后，会在相同目录下生成一个同名js文件。)
tsc test01.ts
编译整个项目
yarn tsc
在tsconfig配置一些配置：
rootDir：指定输入文件的根目录。
outDir：指定编译后输出到的文件目录。
*用到哪个配置可以再查… *
二、TypeScript基本语法
TypeScript的数据类型分为：Boolean，Number，String，Array，Enum(枚举类型)，Any(任意类型，弱类型)，Void这7种类型
1、Boolean类型
const c: boolean = false // 编译通过
const flag: boolean = 0 // 使用数字赋值，编译失败
2、Number类型
const age: number = 2 // 整数，通过
const floatNum: number = 2.5 // 浮点数，通过
const fuNum: number = -2 // 负数，通过
3、String类型
const a: string = 'foo'
const b: string = false // 使用boolean类型赋值，编译失败
4、Array类型
const arr1: Array<number> = [1,2,3]
const arr2:number[]=[1,2,3]
5、Enum类型
enum postStatus { // 数字枚举，会自增
s0=0,
s1=1,
s2=2
}
const post = {
title:'标题',
content:'内容',
status:postStatus.s0 // 0 , 2
}
6、Any类型（any类型是不安全的，因为不会检测）
function stringify(val: any){
return JSON.stringify(val)
}
stringify('我的')
stringify(20)
stringify(false)
const anyList:any[] = ['hello',1,true,false,200,'world']
7、Void类型 (函数没有任何返回值)
void是undefined的子类型。js中的函数总会返回一些东西，要么是一个值，要么是undefined。
因为没有return值的函数返回undefined，而void在js中返回undefined，TypeScript中的void是一个正确的类型，告诉开发人员这个函数返回undefined。
function funVoid(): void{
alert('你好，欢迎学习typeScript')
return undefined // 编译通过(可省略)
return '你好，欢迎学习typeScript'
// 报错，上面声明这个函数是void类型，返回值只能是undefined
}
funVoid()
function funVoid(): void{
alert('你好，欢迎学习typeScript')
}
funVoid()
void也可以用于参数和所有其他声明，唯一传递的值只能是undefined。
function funVoid(x:void): void{
alert('你好，欢迎学习typeScript')
}
funVoid(undefined)
funVoid('啦啦啦') // 报错，类型“string”的参数不能赋给类型“void”的参数
三、TypeScript 类
constructor
当创建类的实例时，默认会调用对应的constructor构造函数。
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
// 创建实例时，constructor构造函数被调用，初始化了 x 和 y 属性
var p4: Point = new Point(1,2)
TypeScript中的类（与其他语言一样）使用关键字支持单继承extends，如下所示：
class person{
public name: string = 'wyy' // public公有属性，默认
private age: number // private私有属性，只能再person类中访问
readonly sex = 1 // 只读属性，不能修改
constructor(name: string,age: number){
this.name = name
this.age = age
}
say(msg?: string){ // ?表示这个属性，可赋值也可不赋值
console.log(`Hi, 我的名字${this.name}，消息：${msg == undefined?'':msg}`)
}
}
class students extends person{
public sayBye(){
this.name
this.sex
this.age //报错，属性“age”为私有属性，只能在类“person”中访问。
}
}
const stu1 = new students('沙漠',18)
stu1.sex=2 // 报错，无法分配到 "sex" ，因为它是只读属性。
stu1.say()
readonly 修饰符：将属性设置为只读。必须在声明时或者构造函数里被初始化，且值不能修改。
?修饰符：属性后面跟着?，表示调用方法时，这个属性值可传可不传
1、访问类型：
public (默认)：声明的方法和属性在类的内部和外部均能访问到
protected：声明的方法和属性只能在类的内部和其子类能访问
private：声明的方法和属性只能在其类的内部访问
1、super()
super 实际用法有两种：
1.constructor内的super()：执行父类的构造函数，必须要执行一次。
2.一般方法内的super.fun()：执行父类的方法。
传统js中，使用prototype实现父、子类继承。
如果父、子类有同名的方法，子类调用父类的同名(也可不同名)发放，需要用“ 父类.prototype.method.call(this) ”
但在TypeScript中提供了关键字，super，指向父类。
super.fun() 这样就可以调用父类同名(也可不同名)的方法了。
class person2{
public name: string = 'wyy' // public公有属性，默认
private age: number // private私有属性
readonly sex = 1 // 只读属性，不能修改
constructor(name: string,age: number){
this.name = name
this.age = age
}
eat(){ // 让子类调用eat方法
console.log('吃饭了。。。')
}
}
class students extends person2{
public sayBye(){
this.name
this.sex
}
eat(){
console.log('我要减肥，不吃饭了。。。')
}
constructor(){
super('夏天',12)
}
init(){
this.eat() // 调用自己的eat()方法。打印：我要减肥，不吃饭了。。。
super.eat() // 调用父类的eat()方法。打印：吃饭了。。。
}
}
const stu1 = new students()
stu1.init()
四、TypeScript 接口
关键字：interface
接口就是用来定义值得结构，接口自身当做类型。
看下面这段代码，函数funPerson要求参数是一个包含name属性的对象，并且name值为string类型。
function funPerson(obj: { name: string }): void {
console.log(`hello, ${obj.name}`)
}
上诉代码可以改造为：
interface objtype{ //定义接口
name:string
}
function funperson2(obj: objtype): void{
console.log(`hello, ${obj.name}`)
}
使用interface定义接口，但不要理解为是在定义一个对象，{}括号包裹里的只是一个代码块，里面是一条条的声明语句，只不过声明的不是变量的值而是类型。
(1) 接口，定义可选参数?：
interface objtype2{
name:string
age?:number // 可选参数
sex?:number // 可选参数
}
function funPerson3(obj: objtype2): void{
console.log(`hello ,我的名字是${obj.name},我今年${obj.age}岁了。`)
}
let objs = {
name:'沙漠',
age:20
}
funPerson3(objs)
(2) 接口的继承：
接口也可以继承，就是从一个接口里复制成员到另外一个接口里。
interface Teacher{
name:string,
age?:number,
say?():void
}
interface Student extends Teacher{ // 继承Teacher接口，可以使用Teacher里的name属性和age属性
stu():void
}
function Timfun(obj: Student): void{
return obj.stu()
}
let objTim={
name:'Tim',
age:8,
stu(){console.log(`你好，我叫${this.name},今年${this.age}岁了`)}
}
Timfun(objTim)
// 你好，我叫Tim,今年8岁了
五、TypeScript 泛型
在开发中，我们还要考虑代码的可重用性。泛型就是解决 类 接口 方法 的复用性，以及对不特定数据类型的支持(类型效验)。
当我们不知道函数的返回类型时，泛型函数就解决了这个问题。虽然这样说和Any类似。但是泛型函数并不会丢失类型，会根据我们传入的参数类型而返回一个类型，适用于多个类型。
// 只能返回string类型的数据
function returnStr(val:string): string{
return val
}
returnStr('wyy')
// 因为对返回结果类型的不确定，也可能要返回number类型，boolean类型(代码冗余)
function returnNum(val: number):number{
return val
}
returnNum(123)
// 看看上面两块代码是不是很相似，只是返回的类型不同，当然我们可以用any解决这个问题（但是any会放弃语法检测，跟没写是一样的）
function returnFun(val: any): any{ // 不建议使用
return val
}
returnFun('沙漠')
returnFun(456)
// 泛型：支持不特定的数据类型，要求传入的参数和返回值用T表示泛型，具体是什么类型在调用这个方法时决定的。
function returnT<T>(val: T): T{
return val
}
returnT('123') // string类型
returnT(123) // number 类型
returnT([1,2,'3',true]) // 数组类型
使用泛型可以创建泛型函数、泛型接口，泛型类
//（1）简单的泛型函数
function fun<T>(args: T): T { //函数是泛型函数，参数也是泛型参数
return args;
}
fun("icepy");
fun(100)
fun(true)
fun([1,'2',3,true])
//（2）泛型接口
interface generFn<T> {
(arg: T): T;
}
function identity<T>(arg: T): T {
return arg;
}
let myIdentity: generFn<number> = identity;
let myIdentity2: generFn<string> = identity;
myIdentity(1)
myIdentity2('2')
(3) 泛型类：比如有个求最小值得算法，需要同时支持返回数字和字符串 a - z两种类型。 通过类的泛型来实现
// 获取最小数
class MinClass<T>{
public arr: T[]=[]
add(val :T){
this.arr.push(val)
}
minNum(): T{
let minNum=this.arr[0]
for(var i = 0;i<this.arr.length;i++){
if(minNum>this.arr[i]){
minNum = this.arr[i]
}
}
return minNum
}
}
var minFun = new MinClass<number>()
minFun.add(2)
minFun.add(1)
minFun.add(12)
console.log("数值" , minFun.minNum()) // 结果：数值 1
var minFun2 = new MinClass<string>()
minFun2.add('ad')
minFun2.add('c')
minFun2.add('b')
minFun2.add('2')
minFun2.add('123')
console.log("字符串" , minFun2.minNum()) // 结果：字符串 2
扫一扫
1512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
