TypeScript 使用笔记

TS 是 JS的超集，它可以编译成纯JS。

TS可以在任何浏览器、任何操作系统、任何平台上运行

TS 数据类型

类型注解

let flag : boolean = false;

变量后面跟的冒号后面的类型就是这个变量的类型注解。类型的注解是可选的，不加就变成了JS，因为TS设计目标就是：兼容JS，减少JS迁移TS的成本。

泛型类型

TS 元组

数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。

元组中允许存储不同类型的元素，元组可以作为参数传递给函数。

var mytuple = [10,"Runoob"];    //元组

• push() 向元组添加元素，添加在最后面。
• pop() 从元组中移除元素（最后一个），并返回移除的元素。

TypeScript 联合类型

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。
注意：只能赋值指定的类型，如果赋值其它类型就会报错。
创建联合类型的语法格式如下：（Type1|Type2|Type3 ）

var arr:number[]|string[];    或  var val:string|number 

TS generator函数

generator是控制函数的执行过程，手动暂停和恢复代码运行。（function* add(){}）

yield 相当于对代码打断点，每次调用 next()方法,函数往下运行一下，直到遇到yield或者return ;

function*  doSomething() {
     console.log("start");
      yield;
       console.log("finish");
 }


 //调用方式需要注意一下，此案例中，他不能直接调用doSomething，需要声明个变量fun1,通过变量fun1.next()去调用该方法
var fun1 = doSomething() ;
fun1.next();//每调取一次next的方法，这个函数就会被调用一次到yield,以此类推
fun1.next();

function* getStockPrice(stock){
	while(true){
	yield Math.random()*100;
	}
}

var priceGenerator = getStockPrice("IBM");
var limitPrice = 15;
var price = 100;
while(price>limitPrice){
	price = priceGenerator.next().value;
	console.log(`the generator return ${price}`);
}

console.log(`buying at ${price}`);

TS destructuring 析构表达式

destructuring 通过表达式将对象或数组拆解成任意数量的变量；

function getStock{
	return {
		code:'123',
		price:12,
		goods:{
			goods1:10,
			goods2:20,
			goods3:30
		}
	}
}

var {code:codex,price,goods:{goods3}} = getStock();
console.log("code:"+codex)  // 123
console.log("price:"+price) //12
console.log("goods:"+goods3) //30



var array = [1,2,3,4];
function getArrayItem(num1,num2,...others){
console.log(num1) //1
console.log(num2)  //2
console.log(others)  //[3,4]
}
getArrayItem(array)

TS as 类型断言

TS AllowJS 选项 (–allowJS)

TypeScript 1.8 开始支持了 AllowJS 选项,现在可以直接引用 js 文件而不需要对应的 .d.ts 文件也不会报错（没有那么良好的类型提示支持）。

TS 形参

function getName<T,K>(name:T,age?:K){
    return `name: ${name} ----------`+(age?`age: ${age}`:'年龄保密')
}

alert(getName<string,number>('123'))

ts函数重载

java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。

   function getInfo(name:string):string;
   function getInfo(name:string,age:number):string;
   function getInfo(name:any,age?:any):any{
         if(age){

             return '我叫：'+name+'我的年龄是'+age;
         }else{

             return '我叫：'+name;
         }
     }
     
      // alert(getInfo('zhangsan'));  /*正确*/
     // alert(getInfo(123));  错误
      // alert(getInfo('zhangsan',20));

TS keyof

keyof操作符，用于类型查询

export interface IUser {
    email: string;
    password: string;
    address: string;
    phone: string;
}

type UserProps = keyof IUser;

相关使用：

安装使用

1. 安装

npm install -g typescript

2. 编译

tsc helloworld.ts

3. ts中引入js文件（js迁移）

配置文件tsconfig.json （tsc --init）

TypeScript使用tsconfig.json文件管理工程配置。包含哪些文件或进行哪些检查的相关配置。

{
    "compilerOptions": {
        "outDir": "./built",       //生成的所有文件放在built目录下（通过outDir）
        "allowJs": true,       //接受JavaScript做为输入（通过allowJs）
        "target": "es5"       //将JavaScript代码降级到低版本比如ECMAScript 5（通过target）。
    },
    "include": [
        "./src/**/*"        //读取所有可识别的src目录下的文件（通过include）
    ]
}

TS ? 和 !

? 用来检查 问号前面的变量为 null 或 undefined 时，程序不会出错。

stu3: Student;

<h1>stu3 id{{stu3?.id}}</h1>                // stu3 id
<h1>stu3 name{{stu3?.name}}</h1>      // stu3 name

! 用来检查 感叹号后面的变量为 null 或 undefined 时， 程序不会出错。

stu2: Student = {
    id: 1,
    name: undefined,
    age: 3
  };

<h1>stu2 name {{stu2!.name}}</h1>  // stu2 name 
<h1>stu2 id {{stu2!.id}}</h1>            // stu2 id 1

最后

以上就是温暖吐司为你收集整理的TypeScript 使用笔记的全部内容，希望文章能够帮你解决TypeScript 使用笔记所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。